Photoshopでおしゃれなフォントを簡単に画像化する

ホームページ作ってると、ここってところでおしゃれなフォントとか使いたくなりますよね。タイトルだったり見出しだったり。

方法としてはWebフォントを使うのが一番いいんだろうけど…Typekit(アドビが提供するフォントサービスみたいなの)はWebフォントの使用に制限がかけられていたり、環境によってはちゃんと再現されなかったりで扱いにくい場合が多々あると思います。

そこで文字列を画像にしたいと思います。これなら画像貼るだけなのでタイトルに、くらいなら特別支障は出ないですね。長い文章や文字サイズが変わるような(滅多にないとは思うけど)ところではおとなしくWebフォントとして扱った方がいいと思いますが…

著作権の方も

https://helpx.adobe.com/jp/typekit/using/font-licensing.html

同期フォントをロゴなどの画像の作成に使用することはできますか。

はい。このフォントを、任意のデスクトッププログラム(Adobe Photoshop など)で画像を作成するために使用できます。作成した画像はどのような目的にも使用できます。可能な作業には、PDF ファイルや EPS ファイルの生成、および JPEG、PNG などのビットマップファイルの生成が含まれます。

と大丈夫のようです。(著作権の知識はほぼほぼ皆無なんで保証はしかねます。怒られたらおとなしくやめましょう)

前置きが長くなりましたが以下やり方です。

Photoshopから新規作成

プリセットなどは何でもいいんですが

  • カラーモードはRGB
  • 単位はピクセル
  • 十分な幅・高さ設定

だけはやっておいた方が良いです。Web一般のプリセットがらくちんです。

適当な位置にテキストを挿入。

今回は

  • Font: Relation Regular
  • font size: 36px

でやってみました。

レイヤーボタンからテキストレイヤーを右クリック。

PNGとしてクイック書き出し!

完成品はこちら。

出力された画像のサイズをみてフォントサイズを変えてやればよいと思います。