SVGフォントはもう試した?透明感のある美しい文字表現ができるフォント -Opulent Font + SVG

フォントの色というか、塗りはベタが常識でした。
手書き風のフォントでも、隙間があるだけで、ベタ塗りです。
そんな今までのフォントの常識を打ち破る、SVGフォントを紹介します。

SVGフォントの塗りには高精細な水彩テクスチャが使用されており、透明感のある美しい文字が利用できます。

SVGフォント

使用したSVGフォントは、Opulent Font + SVGです。

サイトのキャプチャ

Opulent Font + SVG

Opulent Font + SVGは先月リリースされたばかりのSVGフォントで、早くも海外の多くのデザイナーに注目されています。

SVGフォントの使用例

SVGフォントの使用例

Opulent Font + SVGではフォントの特徴を活かし、高精細な水彩テクスチャを使って、フォントに組み込まれた美しい手書き文字を透明に再現できます。

SVGフォントの使用例

SVGフォントの使用例

実際に使用してみました。

SVGフォントの使用例

使ってみた!

SVGフォントが利用できる環境は、下記の通り。

  • Photoshop CC 2017+
  • Illustrator CC 2018+

上記以外での利用方法は、後述します。
SVGフォントは普通のフォントと同じように、テキストツールで入力できます。

SVGフォントの使用例

テキストの入力

SVGフォントのカラーを変更する際は、普通のフォントとは異なります。

  1. フォントのレイヤーを選択。
  2. レイヤー効果から「カラーオーバーレイ」を選択。
  3. カラーオーバーレイでカラーを変更。
SVGフォントの使用例

カラーオーバーレイでカラーを変更

カラーオーバーレイなので、カラーだけでなく、描画モードや不透明度を使用して、フォントのカラーを変更できます。

SVGフォントの使用例

SVGフォントのカラーを変更

カラーをレッドに変更しても、フォントの透明感は損なわれません。

SVGフォントの使用例

透明感はそのまま

Photoshopのバージョンが古くて利用できないよ、という人でも大丈夫。.psbファイルにすべての文字が収録されており、コピーしてドキュメントに貼り付けて利用できます。

サイトのキャプチャ

.psbをPhotoshopで開いたところ

.psbファイルに対応しているソフトウェアであれば、利用できます。
例えば、Clip Studioでも問題なく、利用できました。

サイトのキャプチャ

.psbをClip Studioで開いたところ

カラーの変更は、合成モードを使用します。

サイトのキャプチャ

Clip Studioでカラーを変更

今回紹介したOpulent Font + SVGは有料のフォントで、下記から購入できます。

サイトのキャプチャ

Opulent Font + SVG

Opulent Font + SVGには、3種類のフォントが収録されています。

フォントの種類

3種類のフォント

  • Opulent SVG Font(中央)
    高精細な水彩テクスチャを使って、透明感のある美しい手書き文字を楽しめます。
  • Opulent Brush Font(左)
    本物のペイントブラシで書いた仕上がりを楽しめます。
  • Opulent Solid Font(右)
    滑らかなインクの仕上がりを楽しめます。

フォントのフォーマットは、SVGが.otfで、それ以外の2つは.ttf です。

sponsors

top of page

©2024 coliss