WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： はーちゃん
カテゴリー： デザイン >Photoshop

ファッション雑誌やイベントのポスターなどで、文字の輪郭と塗りが少しずれて見えるデザインを目にしたことはありませんか？
このような表現は「版ずれ文字」と呼ばれ、レトロで可愛らしい雰囲気を演出できるデザイン手法のひとつです。
今回は、Photoshopのレイヤースタイルを使って、簡単に「版ずれ文字」を作る方法をご紹介します。

文字を用意する

まずは、ツールバーから「横書き文字ツール」を選択し、文字を入力します。

このとき、フォントは太めのゴシック体を選ぶと、後ほど版ずれの効果を加えた際に綺麗に仕上がります。
また、角に丸みのあるフォントを選ぶとやわらかく可愛らしい印象に、角ばったフォントを選ぶとレトロポップで存在感のある印象にすることができます。

今回は、可愛らしい印象にしたかったので「Rounded M+ 1c」の太さ「black」にしました。

レイヤースタイルで版ずれ効果をつける

それでは、レイヤースタイルを使って文字に版ずれ効果を加えていきます。

まずは、文字の輪郭を作成します。
先ほど入力した文字レイヤーを選択した状態で、レイヤーパネルの右上にある「塗り」の値を「0％」に変更します。

次にレイヤーパネルの下から「fx（レイヤースタイル） → 境界線」をクリックします。

「レイヤースタイル」パネルが表示されるので、左側で「境界線」が選択されていることを確認したら、以下の内容を設定して「OK」をクリックします。

すると、以下のように文字の輪郭のみが表示された状態になりました。

次に、輪郭から少しずれた塗りの部分を作成していきます。
先ほどと同様に、最初に入力した文字レイヤーを選択した状態で、レイヤーパネルの下から「fx（レイヤースタイル） → ドロップシャドウ」をクリックします。

「レイヤースタイル」パネルが表示されるので、左側で「ドロップシャドウ」が選択されていることを確認したら、以下の内容を設定して「OK」をクリックします。

このとき、「レイヤーがドロップシャドウをノックアウト」のチェックを外すことで、文字の内側にもドロップシャドウが表示され、版ずれした塗りの表現を作ることができます。

すると、以下のように文字の輪郭と塗りがわずかにずれて見える「版ずれ文字」を作ることができました。

境界線の太さや塗りのずらす角度・距離を調整することで、印象を大きく変えることができるので、使用するフォントや表現したい雰囲気に合わせて、ぜひお好みの設定を試してみてください。

今回はより可愛らしい雰囲気に仕上げるため、版ずれ文字の色を調整し、あしらいを追加してみました。
こちらで完成です！

まとめ

今回はPhotoshopのレイヤースタイルを使って、「版ずれ文字」を作る方法をご紹介しました。
ポップでレトロな雰囲気を演出したいときや、SNS用の画像制作などで一工夫加えたいときにおすすめの表現なので、ぜひ皆さん試してみてください！