【ロゴ】フォントでつくる!ジュッ!と焼き焦げたタイトル文字

【ロゴ】フォントでつくる!焼け焦げたタイトル文字

【Photoshop講座】新聞紙などが焼け焦げた処理は、文字型で抜く処理が加わると意外に簡単なものです。それは、形状が限られてしまうことで、不自然さを味方にできるから? なのかも知れません。2つのフィルターの組み合わせと、レイヤースタイルの効果だけで作成できる方法をご紹介しましょう。


マスクを利用したラスタライズ!
文字を入力した「テキストレイヤー」には、形状を崩すなどの変形や加工が行えないので、何らかの方法で「ラスタライズ (ビットマップ化)」をする必要があります。表示部分を隠すことができる「レイヤーマスク」には、通常のレイヤーと同様にフィルターなどの加工が行えるので、文字型のレイヤーマスクがあれば一気に解決です。
テキストを焼け焦げ風に加工
これから行う操作は、入力したテキストを焼け焦げ風に加工する方法です。複数のフィルターで形状を崩し、レイヤースタイルの効果で焼け焦げの色や質感を表現します。使用するフォントは任意で設定しますが、作例とは違うピクセルサイズの画像では、フィルターの効果が発揮できないことがあります。小さくしたい場合は、完成後にレイヤーを統合してリサイズしてください。
画像に入力したテキスト (拡大) → テキストを焼け焦げ風に加工 (拡大)
ベースのフォントを入力する
素材画像をダウンロードして開きます。素材画像は、[幅 : 1280 pixel]、[高さ : 720 pixel] 、[解像度 : 72 pixel/inch]、[モード : RGBカラー]を使用しています。背景に敷く素材は、新聞紙や包装紙など、焼け焦げが強調できる白っぽく風合いのある写真が好ましいです。
素材画像を開く
素材画像を開く
[ツール] パネルで、[横書き文字ツール] を選択します。
[横書き文字ツール] を選択
[横書き文字ツール] を選択
オプションバーで、任意のフォントを設定し、[フォントサイズを設定] に「250 pt」を入力します。
[フォントサイズを設定] に「250 pt」を入力
任意のフォントを設定!
作例では、「Stencil Gothic」を設定していますが、フォント環境はご使用のパソコンによって異なります。リスト表示される任意のフォントを設定してください。
ドキュメント内をクリックして、ポイントテキストで文字を入力します。
文字を入力
文字を入力
文字の間隔を空けよう!
焼け焦げの効果は、文字の周囲に広がるものなので、隣接する文字が近いとスペースが足りなくなってしまいます。あらかじめ、トラッキングなどで、文字の間隔を少し空けておくと効果的です。文字列が欧文の場合は、[文字のカーニングを設定] に [オプティカル]、[選択した文字のトラッキングを設定] に [100] を設定しておくといいでしょう。
カーニングとトラッキングを設定
カーニングとトラッキングを設定
このレッスンの動画を配信中!
【Photoshop講座】フォントでつくる!焼け焦げたタイトル文字
サムネールをクリックすると、YouTube 動画にリンクします。

抜いた文字の背景色を設定する
[レイヤー] パネルで、テキストレイヤーを非表示にします。
テキストレイヤーを非表示
テキストレイヤーを非表示
レイヤーサムネールを [command (Ctrl)] キーを押しながらクリックして、文字の選択範囲を作成します。
レイヤーサムネールを [command (Ctrl)] + クリック
レイヤーサムネールを [command (Ctrl)] + クリック
文字の選択範囲を作成
文字の選択範囲を作成
描画ピクセルを選択!
レイヤーサムネールを [command (Ctrl)] + クリック、または右クリックしてコンテキストメニューから、[描画ピクセルを選択] を選択すると、レイヤーに含まれるオブジェクトの選択範囲が作成できます。非表示中のレイヤー、レイヤーマスク、作業用パスなどからも選択範囲が作成できます。
[レイヤー] パネルで、[塗りつぶしまたは調整レイヤーを新規作成] をクリックして、メニューから [べた塗り] を選択して、[べた塗り 1] を作成します。
[べた塗り 1] を作成
[べた塗り 1] を作成
[カラーピッカー] ダイアログで、新しい色に [H : 0°/ S : 0% / B : 90%] を設定して、[OK] をクリックします。
[カラーピッカー] ダイアログを設定
[カラーピッカー] ダイアログを設定
抜いた文字の背景色が設定できた
抜いた文字の背景色が設定できた
選択範囲からマスクを自動作成!
レイヤーマスク作成時に、あらかじめ選択範囲を作成しておくと、選択範囲外を隠す領域としてブラックが塗りつぶされます。塗りつぶしまたは調整レイヤーを新規作成すると、レイヤーマスクが自動的に追加されるので、これらの操作がまとめて行えます。レイヤーマスクによって文字をラスタライズ (ビットマップ化) することで、フィルターや色調補正などの効果が適用できるようになります。
基本がわかる動画を配信中!
チャンネル登録をお願いします!
2つのフィルターで文字のエッジを崩す
[レイヤー] パネルで、[べた塗り 1] 塗りつぶしレイヤーのレイヤーマスクを選択します。
レイヤーマスクを選択
レイヤーマスクを選択
[フィルター] メニューから、[フィルターギャラリー] を選択します。[フィルターギャラリー] 操作パネルで、[ブラシストローク] → [はね] を選択します。
[はね] を選択
[はね] を選択
[はね] ダイアログで、[スプレー半径] に「12」、[滑らかさ] に「5」を設定します。
[はね] ダイアログを設定
[はね] ダイアログを設定
元画像 (レイヤーマスク) → [はね] 適用後 (プレビュー)
控えめに拡散する!
[はね] の設定値は、およその文字のエッジを崩すことにあります。[スプレー半径] の設定値を大きくすると、ランダムに拡散するピクセルの範囲が広くなり、エッジを離れて点在してしまう箇所も出てきます。なるべく、控えめな設定値を探ってください。
[フィルターギャラリー] 操作パネルで、[新しいエフェクトレイヤー] をクリックして、[はね] を複製します。
[新しいエフェクトレイヤー] をクリック
[新しいエフェクトレイヤー] をクリック
[スケッチ] → [スタンプ] を選択します。
[スタンプ] を選択
[スタンプ] を選択
[スタンプ] ダイアログで、[明るさ・暗さのバランス] に「25」、[滑らかさ] に「5」を設定して、[OK] をクリックします。
[スタンプ] ダイアログを設定
[スタンプ] ダイアログを設定
2つのフィルターで文字のエッジを崩すことができた
2つのフィルターで文字のエッジを崩すことができた
[スタンプ] 設定のコツ!
[スタンプ] の設定値は、まず、階調のバランスを変えたくないので、中間値の「25」に置き、[滑らかさ] の数値を探っていきます。[滑らかさ] は数値が大きくなるほどスムーズになるので、ピクセルの拡散が省略された形状が出てくるまで、数値を下げていきます。
基本がわかる動画を配信中!
チャンネル登録をお願いします!
抜いた文字の影を作成する
[レイヤー] パネルで、[レイヤースタイルを追加] をクリックし、メニューから [シャドウ (内側)] を選択し、[レイヤースタイル] ダイアログを表示します。
[シャドウ (内側)] を選択
[シャドウ (内側)] を選択
[レイヤースタイル] ダイアログを表示
[レイヤースタイル] ダイアログを表示
[レイヤースタイル] ダイアログで、[構造] の [不透明度 :] に「60」% を設定します。[角度 :] の [包括光源を使用] のチェックマークを外し、[角度 :] に「120」°、[距離 :] に「12」px、[サイズ :] に「12」px を設定します。
[シャドウ (内側)] を設定
[シャドウ (内側)] を設定
STEP 3 → 抜いた文字の影が作成できた (プレビュー)
[包括光源を使用] とは?
[包括光源を使用] のチェックマークを外すと、他の設定に影響しない単独の数値が設定できます。初期設定では有効とされているので、まず最初に [包括光源を使用] を無効にしてから、他の設定を行ってください。
エッジの焼け焦げを作成する
[レイヤースタイル] ダイアログで、[スタイル] メニューから、[ドロップシャドウ] をクリックします。
[ドロップシャドウ] をクリック
[ドロップシャドウ] をクリック
[構造] セクションの [描画モード :] に [乗算]、[不透明度 :] に「100」% を設定します。
[構造] セクションの [描画モード] を設定
[構造] セクションの [描画モード] を設定
[シャドウのカラーを設定] をクリックして、[カラーピッカー] ダイアログを表示します。
[シャドウのカラーを設定] をクリック
[シャドウのカラーを設定] をクリック
[カラーピッカー] ダイアログで、新しい色に [H : 32°/ S : 80% / B : 37%] を設定して、[OK] をクリックします。
[カラーピッカー] ダイアログを設定
[カラーピッカー]ダイアログを設定
[レイヤースタイル] ダイアログで、[構造] セクションの [角度 :] の [包括光源を使用] のチェックマークを外し、[距離 :] に「0」px、[スプレッド :] に「35」%、[サイズ :] に「16」px を設定します。
[構造] セクションの [角度] を設定
[構造] セクションの [角度] を設定
STEP 4 → エッジの焼け焦げが作成できた (プレビュー)
スプレッドとは?
レイヤスタイルのドロップシャドウを含む効果には、[スプレッド] という設定項目があります。これは陰影の中間調を増幅させて、少し膨らんだような濃いシャドウが表現できます。通常、オブジェクトの形状に陰影を落とすワケですが、[サイズ] によるぼかし幅は、中間点 (オブジェクトの形状) を基準として内側と外側を均等にぼかします。たとえば、[サイズ] に「16」px、[スプレッド] に「100」% を設定すると、中間点がぼかし幅の外側いっぱいに振られるので、ドロップシャドウはくっきり鮮明になり、オブジェクトの形状より「8」px 大きなドロップシャドウが作成されます。
周辺に広がった焦げめを作成する
[レイヤースタイル] ダイアログで、[スタイル] メニューから、[光彩 (外側)] をクリックします。
[光彩 (外側)] をクリック
[光彩 (外側)] をクリック
[構造] セクションの [描画モード :] に [乗算]、[不透明度 :] に「100」%、[ノイズ :] に「15」% を設定します。
[構造] セクションを設定
[構造] セクションを設定
[クリックでグラデーションを編集] をクリックして、[グラデーションエディター] ダイアログを表示します。
[クリックでグラデーションを編集]をクリック
[クリックでグラデーションを編集]をクリック
[グラデーションエディター] ダイアログで、[プリセット] から [描画色から透明に] を選択し、[位置 : 0%] に [H : 32°/ S : 80% / B : 37%]、[位置 : 100%] に [H : 48°/ S : 100% / B : 92%] を設定して、[OK] をクリックします。
[グラデーションエディター] ダイアログを設定
[グラデーションエディター] ダイアログを設定
[レイヤースタイル] ダイアログで、[エレメント] セクションの [テクニック :] に [さらにソフトに] を選択し、[スプレッド :] に「10」%、[サイズ :] に「64」pxを設定し、[OK] をクリックします。
[エレメント] セクションを設定
[エレメント] セクションを設定
STEP 5 → 周辺に広がった焦げめが作成できた (プレビュー)
ジュッ!と焼け焦げたタイトル文字が完成した
ジュッ!と焼け焦げたタイトル文字が完成した
焦げ色の変化と不透明度を設定!
焦げ色は、[暖色系のブラウン (より暗い)] から「橙色」へ変化するグラデーションを設定し、不透明度を 100% から 0% へ変化させます。周辺への広がりは、[エレメント] セクションの [サイズ] で設定しますが、焼け焦げの範囲をもっと広げたい場合は、数値が大きすぎるとメリハリがなくなるので、不透明度の中間点を調整して、少し大きくするといいでしょう。
不透明度の中間点を調整
不透明度の中間点を調整

スポンサード リンク