【Photoshop】炎文字をパスぼかしで簡単に作る方法

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

Photoshop（フォトショップ）のパスぼかしを活用し、炎の向きが簡単に変えられる炎文字を超簡単に作る方法をフォトショ初心者の方に詳しく解説します。
メラメラと燃える炎がモチーフのテキストエフェクトメイキングです。

ロゴデザイン、見出しデザイン、バナーデザイン、Webやチラシのメインビジュアル作成など。
フォトショップを使ったクリエイティブに応用できる制作テクニックが身に付けられます。

この記事の目次

何ができるの？

パスぼかしとグラデーションマップを使って燃えさかる炎の様な文字が作れる制作テクニックです。
文字だけでなく、アイコン等のオブジェクトにも流用可能！
手軽に手の込んだ炎文字が5分以内に作成できますよ。

簡単な炎文字の作り方

Photoshopを使った簡単な炎文字の作り方を解説します。
フォトショップ初心者の方でも再現可能な内容です！

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はAdobe公式サイトから導入できます。（7日間無料体験可能。終了後は自動課金されます。）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

STEP.1

文字を入力

レイヤーパネル下部の [ 塗りつぶしまたは調整レイヤーを新規作成 ] → [ べた塗り ] を開き、画面を真っ黒に塗りつぶします。

べた塗り作成後は背景レイヤーを削除して大丈夫です。

[ 文字ツール ] でお好きな文字を入力します。
フォントは [ めもわーるまる ] を使用しました。

フォントサイズ：250pt
フォントカラー：白

入力した文字は右クリックメニューから [ スマートオブジェクトに変換 ] しておきます。
※スマートオブジェクトはコチラの記事で詳しく解説しています。

その後 [ Ctrl + J ] (Mac：⌘ + J) でレイヤーをコピーします。上から順にレイヤーの名称を「仕上げテキスト」、「炎テキスト」としました。

STEP.2

パスぼかしの設定

「炎テキスト」レイヤーをアクティブにします。

Photoshop画面上部の [ フィルター ] → [ ぼかしギャラリー ] → [ パスぼかし ] を適用します。

速度：300%
テイパー：30%
ぼかし(中央)：チェック無し

設定後は [ OK ] をクリック。

すると炎が上に上がるような軌跡が描けます。

STEP.3

仕上げテキストをぼかす

「仕上げテキスト」をクリックしてアクティブにします。

[ フィルター ] → [ ぼかし ] → [ ぼかし(ガウス) ] を適用しましょう。

ぼかし（ガウス）の設定画面が開きます。
ぼかし半径：2.0px
※値はお好みで調整して下さい。

設定後は [ OK ] をクリック。

すると手前の文字も少し輪郭がボケて馴染みました。

FINISH

グラデーションマップを適用して完成

レイヤーパネル下部の [ 塗りつぶしまたは調整レイヤーを新規作成 ] → [ グラデーションマップ ] を開きます。

プロパティパネルが開くのでグラデーションを設定します。

グラデーションエディターのカラーは左から順に下記です。
①#000000　②#ff0000
③#ff7800　④#fffc00
⑤#ffffff

設定後は [ OK ] をクリック。

レイヤーの最上部にグラデーションマップを移動させたら簡単炎文字の完成です。

レイヤーの [ ぼかしギャラリー ] をダブルクリックすると再度パスぼかしの設定ができるようになります。炎の向きや長さなどが簡単に編集できるので便利ですよ！

OMAKE

グラフィックを変更

スマートオブジェクト化したテキストレイヤーのレイヤーサムネールをダブルクリックします。

するとPSBファイルが別タブで開きます。お好きな文字やアイコンを作成し、[ Ctrl + S ] (Mac：⌘ + S) で上書き保存しましょう。

元PSDのタブをアクティブにすると炎の質感は同じでグラフィックだけ差し替えられている事が確認できます。一度PSDのテキストエフェクトを作ってしまえば簡単編集できますよ！

更に高品質な炎テキストエフェクト

【Photoshop】燃えさかる炎のテキストエフェクトPSD

1分で炎文字が作れるテキストエフェクトPSDの使い方を解説しています。上記テキストエフェクトを更に発展させた超クオリティの高いエフェクト素材ですよ！

炎関連の高品質なテンプレート

より高品質な炎関連の高品質なテンプレートPSDです。
全て商用利用可能！
ノンデザイナーの方でもプロの仕事が再現できるチートアイテムばかりです。

#01 Lava Text Effect

まるで溶岩のような質感にできるテキストエフェクトです。非常に細かいところまで作りこまれており、かつ高画質。巨大な印刷物の使用にも耐えられる解像度のロゴを数分で作成できますよ。

ダウンロードする

#02 Smoking Hot Text Effect

熱風のような煙の表現ができるエフェクトPSDです。作るのが難しい煙など、制作に手間のかかる作業を全て飛ばして高品質な結果のみ得る事が可能です。

ダウンロードする

#03 Hot Glowing Iron Text Effect Mockup

熱された鉄のような質感が仕上げん出来るテキストエフェクトです。文字を差し替えるだけでロゴや見出し、手の込んだグラフィックの完成です。

ダウンロードする

#04 Fire and Flames Photo Effect Mockup

人など様々な対象物が炎に変化する様子が作れるエフェクトモックアップです。変身させたい画像に差し替えるだけ、他の作業は必要ありません。

ダウンロードする

#05 Explosion Effect Mockup

背景が大爆発している迫力のある絵が作れるエフェクトモックアップPSDです。長辺が14,192pxもあり、巨大なポスターの印刷に耐えられる解像度です。

ダウンロードする

#06 Fire and Flames Photo Effect Mockup

対象物の周囲に炎を纏わせられるエフェクトPSDです。まるでリアル版焔の錬金術師のようなグラフィックが作成できますよ。

ダウンロードする

#07 Hot Fire Portrait Effect

ファンタジー要素溢れる炎のエフェクトが追加できるエフェクトPSDです。クオリティは見ての通り一級品、フォトショ初心者の方にも数分で再現できます。

ダウンロードする

商用利用可能なエフェクトPSD

商用利用可能で高品質なエフェクトモックアップPSDです。
ノンデザイナーの方でもあっという間に写真を大変身させられますよ。

【Photoshop】写真を全く違うグラフィックに変える高品質なエフェクト50選【商用可】

【Photoshop】写真を超短時間で大変身させる高クオリティなエフェクト51選【商用可】

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

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

1分で高品質なエフェクトが作れるPSD

1分で超高品質なテキストエフェクトが作れるPSD素材です。
全て商用利用可能！
劇的にクリエイティブを効率化できる素材を活用してみませんか？

メタリックな文字とネオンの筆記体を組み合わせたサイバーパンク風テキストエフェクト

様々なテキストエフェクトのPSD素材

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

Photoshopで使える商用利用可能で高品質な様々なテキストエフェクトのPSD素材を厳選しました。1分でプロクオリティの作品が作れるチート素材ですよ。

テキストエフェクトを自作

Photoshopを使いこなして様々な質感のテキストエフェクトを作る方法を解説しています。
気になるサムネイル画像をクリックすればメイキング記事にジャンプします。

おわりに

以上、Photoshop（フォトショップ）のグラデーションマップを使った幾何学模様背景の作り方でした。
白く塗った個所に適用されるグラデーション機能を使う事で複雑なグラデーションが表現可能です。

Webバナーの背景、サイトやチラシのメインビジュアル、ポートフォリオ制作等。
様々なクリエイティブに応用できるテクニックなので是非ご活用ください！

また、noteで当記事で作成したサンプルPSDを配布しております。

ではまた！