SVGフォントはもう試した?透明感のある美しい文字表現ができるフォント -Opulent Font + SVG
Post on:2018年4月19日
フォントの色というか、塗りはベタが常識でした。
手書き風のフォントでも、隙間があるだけで、ベタ塗りです。
そんな今までのフォントの常識を打ち破る、SVGフォントを紹介します。
SVGフォントの塗りには高精細な水彩テクスチャが使用されており、透明感のある美しい文字が利用できます。

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

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

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

SVGフォントの使用例
実際に使用してみました。

使ってみた!
SVGフォントが利用できる環境は、下記の通り。
- Photoshop CC 2017+
- Illustrator CC 2018+
上記以外での利用方法は、後述します。
SVGフォントは普通のフォントと同じように、テキストツールで入力できます。

テキストの入力
SVGフォントのカラーを変更する際は、普通のフォントとは異なります。
- フォントのレイヤーを選択。
- レイヤー効果から「カラーオーバーレイ」を選択。
- カラーオーバーレイでカラーを変更。

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

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

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

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

.psbをClip Studioで開いたところ
カラーの変更は、合成モードを使用します。

Clip Studioでカラーを変更
今回紹介したOpulent Font + SVGは有料のフォントで、下記から購入できます。

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

3種類のフォント
-
- Opulent SVG Font(中央)
- 高精細な水彩テクスチャを使って、透明感のある美しい手書き文字を楽しめます。
-
- Opulent Brush Font(左)
- 本物のペイントブラシで書いた仕上がりを楽しめます。
-
- Opulent Solid Font(右)
- 滑らかなインクの仕上がりを楽しめます。
フォントのフォーマットは、SVGが.otfで、それ以外の2つは.ttf です。
sponsors