Home » Blog » Photoshop » 炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshop

\🍄Adobe Stockにループ素材を投稿しています🍄/

炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshop
この記事をシェアする

Photoshopには、炎を描画する専用フィルターがあります。これを使うには「パス」という準備が不可欠。
初心者向けに「テキスト・画像のパス化」と、ロゴや文字、画像を燃やす「炎の作り方」を解説します。

🍄はじめに

今回はこんな感じで、テキストを燃えさせていきましょう!

炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshopつくね

テキストと画像のパス化が違うので、両方ご説明!
その後、炎をつけていきます。

◼︎炎を作る前の準備:テキストや画像を「パス」にする方法

炎のエフェクトをかけるには、パスが必要です。
Photoshopを起動して任意のファイルを作成し、炎を纏わせたい文字を打っておきましょう。

❶テキストをパスにする

レイヤーパネルの「テキストレイヤー」を右クリック「作業用パスを作成
パスパネルに作成したパスが表示されます。

炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshopテキストパス作成
炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshopテキストパス

パスパネルに作成したパスが表示されます。

炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshop作業用パス

❷画像をパスにする

オブジェクト選択ツール」やコンテキストタスクバーの「被写体を選択」を使用して 使いたい画像のオブジェクトを選択します。

炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshop選択ツール
炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshop画像パス

選択範囲ができた状態で「パスパネル」の右横に付いてる「」をクリックし「作業用パスを作成…」をクリックするとパスが作成されます。背景が暗いので分かりにくてすみません。。。

炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshop画像作業用パスを作成
炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshop画像作業用パス

◼︎フィルターで「炎」を描画する

❶新規レイヤーを作成

レイヤーパネルの「」をクリックし、新規レイヤーを作成します。
分かりやすいように背景に黒レイヤーを置いています。新規レイヤーに炎フィルターをかけます。

炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshop新規レイヤー

❷炎を適用

新規レイヤーを選択した状態で、メニューバーから「フィルター描画」 を選択。

炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshop炎エフェクト

炎の設定はプレビューを見ながら、「基本」と「詳細」の数値を好みの炎になるように色々試してみてくださいね!
今回は上に燃え上がるようにしてみました。

炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshop炎基本
炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshop炎詳細

炎の形が決定したら、パスはいらないので削除してください。

炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshopテキストパスの削除

◼︎テキスト設定+炎でリアルに

文字の手前にも炎を被せましょう。
テキストレイヤーを最上層に移動しでください。

❶テキストのレイヤースタイル

まずは、テキストレイヤーをダブルクリックしてレイヤースタイルを開きます。

レーヤースタイルの設定は、完全に好みの問題なのですが、熱されたガラスっぽい設定で説明します。

ベベルとエンボスの設定
スタイル:ベベル(内側)」「深さ:168」「方向:下へ」「サイズ:13」「ソフト:4
光沢輪郭」をクリックし、「輪郭エディター」を開き、下の画像のような形にしてください。

炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshopテキストベベル
炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshopテキストベベル輪郭

光彩(内側)の設定
描画モード:スクリーン」「不透明度:40」「サイズ:7

炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshopテキスト光彩内側

サテンの設定
描画モード:乗算」「不透明度:15」「距離:17」「サイズ:32

炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshopテキストサテン

グラデーションオーバーレイの設定
描画モード:通常」「不透明度:100」「スタイル:線形
グラデーション」をクリックして「グラデーションエディター」を開き「#330f01 #5e0500 #e6be44 #fdf5b3 #e6be44 #5e0500 #330f01」とのグラデを作ってください。

炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshopテキストグラデオーバーレイ
炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshopテキストグラデオーバーレイエディター

グラデーションは自分で作らなくても無料のグラデーションプリセットもありますよ!
メタリック文字の作り方|Photoshop」の記事で「無料グラデーションプリセットの追加」について触れていますので、ご参考に!

❷スマートオブジェクトに変換

テキストレイヤーを右クリックでを「スマートオブジェクトに変換」を選択します。

炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshopスマートオブジェクトに変換

❸テクスチャ素材でクリッピングマスクする

テクスチャ素材はpixabayからこちらのアルミ画像をダウンロードしました。アルミ素材ではなくてざらっとした質感のものでも良いかと思います。

炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshopテクスチャ

テクスチャ素材をテキストレイヤーの上に置き、右クリックから「クリッピングマスクを作成」をします。
描画モード:覆い焼きカラー」「不透明度:55%」にします。

炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshopクリッピングマスク

熱々のガラスっぽくなったかと思います。

炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshopガラスっぽくなった

❹フリーフォールパスツールで炎を追加

手前にも炎を足します。
ツールバーから「フリーフォールパスツール」を選択し、炎を乗せたい場所に適当にパスを描きます。フリーフォールペンツールは手描きのような感覚でパスが描けます。

炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshopフリーフォームペンツール

最上層に新規レイヤーを作成して、そこにメニューバーから「フィルター描画」 を適用します。
炎の設定や位置が確定したらパスは削除します。

炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshopフリー炎
炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshop最上層炎パス付き

不透明度:80%」に少し透けさせるとよりリアルです。完成です!

炎の文字の作り方!画像やテキストをパス化する手順も解説|Photoshop炎文字完成

😺さいごに

炎の形色も自由自在なので、かなり使えるエフェクトですよ!
インスタ・YouTubeのタイトルの装飾にどうでしょう?

\またね!/

くろねこのライン絵文字

くろねこのLINE絵文字あります

この記事をシェアする

Comments are closed

投稿一覧>>