SVGフォントはもう試した?透明感のある美しい文字表現ができるフォント -Opulent Font + SVG
Post on:2018年4月19日
フォントの色というか、塗りはベタが常識でした。
手書き風のフォントでも、隙間があるだけで、ベタ塗りです。
そんな今までのフォントの常識を打ち破る、SVGフォントを紹介します。
SVGフォントの塗りには高精細な水彩テクスチャが使用されており、透明感のある美しい文字が利用できます。
![SVGフォント](http://coliss.com/wp-content/uploads-201802/2018041604.png)
使用したSVGフォントは、Opulent Font + SVGです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018041605-01.png)
Opulent Font + SVGは先月リリースされたばかりのSVGフォントで、早くも海外の多くのデザイナーに注目されています。
![SVGフォントの使用例](http://coliss.com/wp-content/uploads-201802/2018041605-02.png)
SVGフォントの使用例
Opulent Font + SVGではフォントの特徴を活かし、高精細な水彩テクスチャを使って、フォントに組み込まれた美しい手書き文字を透明に再現できます。
![SVGフォントの使用例](http://coliss.com/wp-content/uploads-201802/2018041605-03.png)
SVGフォントの使用例
実際に使用してみました。
![SVGフォントの使用例](http://coliss.com/wp-content/uploads-201802/2018041607-01.png)
使ってみた!
SVGフォントが利用できる環境は、下記の通り。
- Photoshop CC 2017+
- Illustrator CC 2018+
上記以外での利用方法は、後述します。
SVGフォントは普通のフォントと同じように、テキストツールで入力できます。
![SVGフォントの使用例](http://coliss.com/wp-content/uploads-201802/2018041607-02.png)
テキストの入力
SVGフォントのカラーを変更する際は、普通のフォントとは異なります。
- フォントのレイヤーを選択。
- レイヤー効果から「カラーオーバーレイ」を選択。
- カラーオーバーレイでカラーを変更。
![SVGフォントの使用例](http://coliss.com/wp-content/uploads-201802/2018041607-03.png)
カラーオーバーレイでカラーを変更
カラーオーバーレイなので、カラーだけでなく、描画モードや不透明度を使用して、フォントのカラーを変更できます。
![SVGフォントの使用例](http://coliss.com/wp-content/uploads-201802/2018041607-04.png)
SVGフォントのカラーを変更
カラーをレッドに変更しても、フォントの透明感は損なわれません。
![SVGフォントの使用例](http://coliss.com/wp-content/uploads-201802/2018041607-05.png)
透明感はそのまま
Photoshopのバージョンが古くて利用できないよ、という人でも大丈夫。.psbファイルにすべての文字が収録されており、コピーしてドキュメントに貼り付けて利用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018041608-01.png)
.psbをPhotoshopで開いたところ
.psbファイルに対応しているソフトウェアであれば、利用できます。
例えば、Clip Studioでも問題なく、利用できました。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018041608-02.png)
.psbをClip Studioで開いたところ
カラーの変更は、合成モードを使用します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018041608-03.png)
Clip Studioでカラーを変更
今回紹介したOpulent Font + SVGは有料のフォントで、下記から購入できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018041606.png)
Opulent Font + SVGには、3種類のフォントが収録されています。
![フォントの種類](http://coliss.com/wp-content/uploads-201802/2018041605-04.png)
3種類のフォント
-
- Opulent SVG Font(中央)
- 高精細な水彩テクスチャを使って、透明感のある美しい手書き文字を楽しめます。
-
- Opulent Brush Font(左)
- 本物のペイントブラシで書いた仕上がりを楽しめます。
-
- Opulent Solid Font(右)
- 滑らかなインクの仕上がりを楽しめます。
フォントのフォーマットは、SVGが.otfで、それ以外の2つは.ttf です。
sponsors