今回はこのようなお悩みを解決します！
・Photoshopを使用して文字をおしゃれに装飾する方法
Web/UIデザイナー兼フロントエンドエンジニアのかがみ（@cony_tas）です！
デザイナー歴は約10年。
ゲーム会社でアプリのUIデザインやバナーデザイン、Webサイト制作をやっています。
ブログのアイキャッチ画像や、YouTubeのサムネイル画像を作ろうと文字を打ってみたけど、そのままだとちょっとシンプルだな…っていうことありますよね？
そこで本記事では
簡単に文字をおしゃれに装飾する方法
を解説します。
さらに今回ご紹介するテクニックをいろいろ組み合わせれば、下の画像のような金属風テキストも簡単に作れるようになりますよ♪
どれも覚えてしまえば簡単なテクニックなので、サクっと覚えちゃってください！
CONTENTS［ hide ］
文字を縁取る
文字装飾でもっとも基本となる文字を縁取る方法です。
例えば写真の上にテキストを乗せる場合、テキストのベタ打ちだと読みづらいことが多いですが、テキストを縁取ることによって視認性が上がりますよ。
また細いフォントを使用する場合でも、縁取ることで文字に厚みを持たせることができるので読みやすくなります。
文字を縁取る方法
- レイヤースタイルで「境界線」を選択する
- 「サイズ」で境界線の太さを調整
- 「カラー」で境界線の色を選択
境界線はグラデーションにもできる
レイヤースタイルの境界線は単色カラーのほかに、グラデーションカラーの設定もできます。
「境界線」の設定で「塗りつぶしタイプ」を「グラデーション」に変更すると設定できるのでお試しくださいね！
文字にカラーをベタ塗りする
文字に単色カラーを設定する方法です。
文字色は文字パネルから設定できますが、レイヤースタイルのカラーオーバーレイでも設定できる上に、グラデーションオーバーレイやパターンオーバーレイと重ねて描画モードを変更することで微妙な色調整も行うことができます。
カラーをベタ塗りする方法
- レイヤースタイルで「カラーオーバーレイ」を選択する
- 「カラー」選択部分をクリックして好きな色を選択
文字にグラデーションをかける
文字にグラデーションカラーを設定する方法です。
Photoshopではデフォルトでいくつかのグラデーションを選べるようになっていますが、自分で細かくグラデーションカラーを設定することも可能なので、好みの色を組み合わせてグラデーションを作ってみましょう。
グラデーションをかける方法
- レイヤースタイルで「グラデーションオーバーレイ」を選択する
- 「グラデーション」をクリック
- 好きなカラーを選択して好みのグラデーションを作る
- ◇部分を左右にスライドすることで、カラーの比率を変更できる
文字にドロップシャドウをかける
文字にドロップシャドウをかけることで、背景に埋もれてしまっている文字を見やすくしたり、立体感を出すことができます。
影の表現にとどまらず、各種数値の設定次第では光彩のようにも使えるので、調整次第でとても面白い表現が可能です。
ドロップシャドウをかける方法
- レイヤースタイルで「ドロップシャドウ」を選択する
- 「カラー」をクリックして好きなカラーを選択
- 「角度」を入力 （例）９０°にすると真下に影が落ちる
- 「距離」を調整 （例）数値を上げると影が指定した角度で落ちる
- 「サイズ」を調整 （例）数値を上げると影が大きくなる
ドロップシャドウは立体的な文字作りもできる
レイヤースタイルのドロップシャドウの設定で「スプレッド」を100%にすると、ぼかした影ではなく形がハッキリとした影を作れます。
あわせて距離やサイズも調整することで、文字に立体感を持たせることも可能です。
境界線と組み合わせて文字に厚みを持たせたい時にも使ってみてください。
文字を金属風に加工する
これまではレイヤースタイルを一つ使って文字を加工してきましたが、いくつかの合わせ技で金属風な加工も可能です！
ここではすでに解説した「グラデーションオーバーレイ」の他に、「ベベルとエンボス」、「光彩（外側）」を組み合わせて加工しますが、参考画像の通りに設定していくことで作れますので挑戦してみてください♪
金属風に加工する方法
- レイヤースタイルで「グラデーションオーバーレイ」を選択する
- 「グラデーション」をクリック
- 「グラデーションエディター」で金属風になるよう各種カラーを設定する
- グラデーションに複数カラーを設定する場合、最初は調整が難しいので画像を参考に調整してみてくださいね
- レイヤースタイルで「ベベルとエンボス」を選択する
- 「テクニック」をシゼルハードに変更
- 「深さ」と「サイズ」を調整
- 「陰影」の各種設定を調整
- レイヤースタイルで「光彩（外側）」を選択する
- 「カラー」を変更
- 「スプレッド」と「サイズ」を調整
まとめ：Photoshopで文字を装飾する簡単な方法
今回はPhotoshopで文字を装飾する方法を5つご紹介しました。
文字を装飾することに慣れてきたら、レイヤースタイル以外にも加工する方法がたくさんありますので徐々にステップアップしていきましょう！
最後にご紹介した方法のまとめです。
- ・文字を縁取る
- ・文字にカラーをベタ塗りする
- ・文字にグラデーションをかける
- ・文字にドロップシャドウをかける
- ・文字を金属風に加工する
以上になります。また次の記事でお会いしましょう。
