【Photoshop】文字やアイコンに斜線の影を付ける方法

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Photoshop（フォトショップ）で文字やアイコン、イラスト等に斜線の影を付ける方法をフォトショ初心者の方に詳しく解説します。Webサイトやバナー、チラシなどの印刷物に使うロゴや見出しのデザインに最適なテクニックです。

Photoshopを使った表現の幅を広げられたい方にオススメのコンテンツですよ。

この記事の目次

何ができるの？

上記の様に文字やアイコン等に斜線の影が追加できます。影表現だけでなく、通常のパターンとしても使えるので汎用性の高いPhotoshopテクニックです。

斜線の影を作る方法

それではPhotoshopで斜線の影を追加する方法を解説します。

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はAdobe公式サイトから導入できます。
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

斜線のパターンを作成する

STEP.1

新規ドキュメントを作成

Photoshopでパターン用のサイズが小さい新規ドキュメントを作成します。

サンプルのサイズは下記です。
幅：4px
高さ：4px
解像度：72px/inch

STEP.2

黒ドットを作成

新規レイヤーを作成し、アクティブにします。
[ 長方形選択ツール ] で1pxを選択しましょう。

[ 塗りつぶしツール ] で選択した1pxを黒色で塗りつぶします。
その後は [ Ctrl + D ] (Mac：⌘ + D) で選択を解除しましょう。

STEP.3

黒ドットを移動コピー

[ 移動ツール ] で黒い1pxを左図の様に移動コピーしましょう。
[ Alt + ドラッグ ] (Mac：Optiron + ドラッグ) で移動コピーができます。

※背景の白いレイヤーは非表示にして透明にしておきましょう。

FINISH

パターンを定義して完成

Photoshop画面上部の [ 編集 ] → [ パターンを定義 ] をクリックします。

お好きな名称でパターン名を登録したら斜線パターンの完成です。

斜線パターンの種類

その他の斜線パターンの作例です。斜線の太さや間隔を変えるだけで全く違った表現ができますよ。
※斜線は等倍で作成する事をオススメします。パターンオーバーレイの [ 比率 ] で斜線を拡縮できますが、若干画質が粗くなります。

文字に斜線の影を追加する

STEP.1

新規ドキュメントを作成

Photoshopで斜線エフェクト作成用の新規ドキュメントを作成します。

サンプルのサイズは下記です。
幅：1920px
高さ：1080px
解像度：72px/inch

STEP.2

文字を入力

[ 文字ツール ] でお好きな文字を入力します。サンプルのフォントは [ Bahnschrift ] を使用しました。

文字レイヤーは [ スマートオブジェクトに変換 ] しておきましょう。その後、[ Ctrl + J ] (Mac：⌘ + J) でレイヤーをコピーします。名前は上から順に「仕上げ用」と「斜線影用」としました。

「斜線影用」は [ Ctrl + G ] (Mac：⌘ + G) でグループ化しておきましょう。

STEP.3

斜線影用レイヤーを設定

「斜線影用レイヤー」をアクティブにします。
[ 塗り ] を0%にしましょう。

レイヤーパネル下部の [ fx ] → [ パターンオーバーレイ ] を適用します。

（サンプルは分かりやすい様に「仕上げ用レイヤー」を非表示にしています。）

先に作成した斜線パターンを適用します。
描画モード：通常　不透明度：100%
角度：0°　比率：100%
レイヤーにリンクにチェック
最後に [ OK ] をクリック。

すると文字が黒色の斜線で描かれます。

STEP.4

斜線影用レイヤーを複製＆移動

斜線影用レイヤーを [ Ctrl + J ] (Mac：⌘ + J) でレイヤーをコピーし、[ 移動ツール ] で左方向へ1px、下方向へ1px移動させます。（キーボードにある上下左右のカーソルキーを使うと便利ですよ。）

コピーしたレイヤーを1px移動、更にコピーしたレイヤーを移動…を繰り返しましょう。

サンプルは計15枚のレイヤーをコピーした例です。

STEP.5

仕上げ用レイヤーを加飾

仕上げ用レイヤーに [ fx ] → [ 境界線 ] を適用します。境界線の色は背景色と同じ、太さはお好みで調整して下さい。

この際にお好みで [ べた塗り ] 等で背景を追加したり、文字色を [ カラーオーバーレイ ] で変更しておきましょう。以上で文字に黒色の斜線の影を落とす事ができました。

FINISH

斜線の色を変えて完成

斜線影用グループを右クリックメニューから [ スマートオブジェクトに変換 ] します。

スマートオブジェクト化した斜線影用レイヤーに [ fx ] → [ カラーオーバーレイ ] を適用します。

以上で文字やアイコンに斜線の影を落とす事ができました。ロゴや見出しなどの装飾として、イラストや写真等のおしゃれな影表現としてなど。何かと使える機会の多い表現の一つですよ。

位置をズラしただけ

文字レイヤーにパターンオーバーレイで斜線のパターンを適用し、位置をズラしたサンプルです。これはこれで楽に作れて表現としてもアリなのですが、角のシャドウ表現が甘い印象です。
正直好みの問題なのでお好きな表現を使用して下さい。

背景パターンにも使える

文字やアイコン等の影表現としてだけでなく、背景パターン素材として使う事もできます。斜線パターンは非常に汎用性の高い素材なので、表現の幅が広げられますよ。

文字を大変身させる高品質エフェクト

単なる文字や写真を超短時間で全く違った表現にできる高品質なエフェクトです。
全て商用利用可能！
制作時間の短縮と作品のクオリティアップを重視したい方に超オススメのフォトショエフェクトです。

#01 Old monitor CRT Screen Text Effect Mockup

古いブラウン管モニターの走査線のような表現ができるエフェクトです。
シュタインズ・ゲートを彷彿させますね。
Photoshopで再現するにはかなりの高等テクニックが必要です。

ダウンロード

#02 Brick Wall Text Effect Mockup

レンガの壁にスプレーでペインティングしたような表現ができるエフェクトモックアップです。
単色の文字にベタ塗り背景を準備するだけでサンプルのような仕上りに！

ダウンロード

#03 Engraved Wood Text Effect Mockup

屋外の壁で使われるような木を彫り込んだようなエフェクトモックアップです。

ダウンロード

#04 Glitter Text Effect with Gold Stroke Mockup

ラメ加工のようなキラキラが超簡単にできるエフェクトモックアップです。
情報量が多く、仕上がりも超リアル！
ゼロから作るのはメチャ大変です。

ダウンロード

#05 Golden Stars Text Effect Mockup

金色の星で構成されたエフェクトを追加できます。
クリスマスだけでなく、誕生日や結婚式など様々な祝い事で使えますよ。

ダウンロード

Photoshop用の高品質なエフェクト集

【Photoshop】高品質＆商用可能なテキストエフェクト【PSD素材】

入力した単なる文字オブジェクトをあっという間に大変身させてくれるエフェクト集です。
もちろん文字だけでなく様々なグラフィックに適用可能！全て商用利用可能です。

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート45選

デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選

紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう！
デジタル媒体向けポートフォリオテンプレ素材35選

制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬！
様々なモックアップテンプレート57選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

おわりに

以上、Photoshop（フォトショップ）で文字やアイコン等に斜線の影を追加する方法でした。

斜線パターンはデザイン制作でよく使う素材の一つなので登録しておいて損はありません。また、当記事で作成した斜線だとオブジェクトの端にも斜線が付与されるので、単に1つのパターンレイヤーをずらした物と比較するときめの細かいデザインに仕上がります。

Webサイトやバナー、チラシやポスターなどの印刷物等のロゴデザイン、見出しデザインなど。幅広いクリエイティブで使えるテクニックなので是非お試しください！

ではまた！

テキストエフェクトの作り方まとめ

Photoshopでテキストエフェクトをゼロから自作する方法、そして1分で超高品質で商用利用可能なテキストエフェクトが作れるPSD素材の使い方と作例を解説しています。
ロゴデザイン、Webデザイン、バナーデザイン、各種DTPデザイン、UIデザイン、ポートフォリオ制作等。幅広いクリエイティブに活用できる内容です。