【ロゴ】フォントでつくる!焦げた焼印の文字

【ロゴ】フォントでつくる!焦げた焼印の文字

【Photoshop講座】焼印とは、熱した金型を木や皮革などに押し付けて、それを何らかの印 (しるし) とするものです。Brand (ブランド) の語源とされているところが面白いですね。金型という特性があるので、ひとかたまりの文字にするとそれっぽく仕上がります。フォントや図形、イラストなど、あらゆるものに使える技法をご紹介しましょう。



シェイプバーストを効果的に使おう!

[シェイプバースト] とは、放射状のグラデーションを適用できる機能です。焼印には高温の熱を感じさせるような「焼け焦げ」の演出が欠かせません。透明度の変化だけではなく、広がる色にも変化を付けたいので、ここはどうしても手を加えたいところです。

文字を入力する

幅 : 1280 pixel、高さ : 720 pixel、解像度 : 72 pixel/inch、カラーモード : RGB カラー 8 bit の素材画像を開きます。
素材画像を開く
素材画像を開く
[ツール] パネルから、[横書き文字ツール] を選択します。
[横書き文字ツール] を選択
[横書き文字ツール] を選択
オプションバーで、任意のフォントを設定します。作例では、[フォント : Square 721 Extend Roman]、[フォントサイズ : 152 pt] を設定しています。
オプションバーで任意のフォントを設定
[アンチエイリアスの種類を設定] に [滑らかに] を選択します。
[滑らかに]を選択
ドキュメント内をクリックして、ポイントテキストで文字を入力します。
作例では、「BRAND」を入力しました。文字が入力できたら、[enter] キーを押して、文字の入力を確定します。
クリックして文字を入力
クリックして文字を入力
入力した「BRAND」に編集を加えるため、[書式] メニューから、[シェイプに変換] を選択して、[BRAND] をシェイプレイヤーに変換します。
シェイプレイヤーに変換する
シェイプレイヤーに変換する
テキストレイヤーに編集を加えない場合は、シェイプレイヤーに変換する必要はありません。
他のシェイプレイヤーからコピー&ペーストして要素を加え、焼印の金型になる図案を完成させます。
焼印の金型になる図案を完成させる
焼印の金型になる図案を完成させる

さまざまなオブジェクトに対応!

このレッスンは、すべての効果をレイヤースタイルだけで作成します。たとえば、Illustrator で作成したベクトル画像のオブジェクトでも、同じ効果を得ることが可能です。
Illustrator から Photoshop にペースト
Illustrator から Photoshop にペースト
[ファイル] メニューから、[配置] を選択して、Illustrator 形式のドキュメントを選択、またはアートワークをコピー&ペーストで、[スマートオブジェクト] や [シェイプ] に変換して配置することもできます。

基本がわかる動画を配信中!

チャンネル登録をお願いします!

透過した焦げ色を設定する

[塗りの不透明度] で元のカラーを消し、レイヤースタイルで透過した焦げ色のベースをつくりましょう。
[レイヤー] パネルで、[BRAND] シェイプレイヤーの右端をダブルクリックします。すると、[レイヤースタイル] ダイアログの [レイヤー効果] が表示されます。
シェイプレイヤーの右端をダブルクリック
シェイプレイヤーの右端をダブルクリック
[レイヤースタイル] ダイアログの [レイヤー効果] が表示される
[レイヤースタイル] ダイアログの [レイヤー効果] が表示される
[レイヤースタイル] ダイアログで、[高度な合成] セクションの [塗りの不透明度 :] に「0」% を設定します。
[塗りの不透明度] に「0」% を設定
[塗りの不透明度] に「0」% を設定
すると、[BRAND] シェイプレイヤーの文字、または図形が透明になります。
[塗りの不透明度] 設定前 → [塗りの不透明度] 設定後

ただの「不透明度」ではない!

通常の [不透明度] の設定値では、レイヤー効果を含め、オブジェクト全体に設定値が影響を与えます。それに対し [塗りの不透明度] の設定値では、レイヤー効果に影響を与えません。
テキストにドロップシャドウを適用 → [塗りの不透明度] でテキストだけを消す
たとえば、オブジェクトがまったく見えないのに、そのドロップシャドウがつけられるのです。この特徴を活かせば、いろいろな面白い効果が期待できますね。
[塗りの不透明度] によって透明になったオブジェクトに、レイヤースタイルで新しいカラーを設定します。
[レイヤースタイル] ダイアログで、[スタイル] リストから、[カラーオーバーレイ] を選択して有効にします。
リストを選択すると、[カラーオーバーレイ] の設定項目が表示されます。
リストを選択すると設定項目が表示される
リストを選択すると設定項目が表示される

効果の選択方法

[レイヤースタイル] ダイアログでは、左側の [スタイル] リスト、または左下の [fx] をクリックして、適用する効果を選択します。選択された効果は、効果名にチェックマークが付き、他の効果と合わせた結果が表示されるようになります。選択した効果に応じて、右側のセクション内に設定項目が表示されます。
[カラーオーバーレイ] は、オブジェクトの描画色をべた塗りする機能で、[描画モード] と [不透明度] が設定できます。背面の基本色と合成色が関係し合う [乗算] と、半透明の描画色がつくり出せる [不透明度] の設定で、透過した焦げ色のベースを作成します。
[表示色] セクションの [描画モード] に [乗算] を選択します。
[オーバーレイのカラーを設定] のカラーボックスをクリックして、[カラーピッカー] ダイアログを表示します。
[カラーピッカー] ダイアログで、[暖色系のブラウン (暗い)] を設定します。
[新しい色] に焦げ色が設定されていることを確認したら、[OK] をクリックします。
[レイヤースタイル] ダイアログで、[不透明度] に「75」% を入力します。
[カラーオーバーレイ] を設定
[カラーオーバーレイ] を設定
[暖色系のブラウン (暗い)] を設定
[暖色系のブラウン (暗い)] を設定
文字、または図形が着色され、描画モード [乗算] で合成されました。
オブジェクトを着色することができた
オブジェクトを着色することができた

スウォッチを活用しよう!

設定する「焦げ色」は、すべての工程に統一して使用します。よく使う基本色をカラーチップ状に集めた [スウォッチ] パネルは、クリックですばやくカラーを設定したいときに威力を発揮します。
[スウォッチ] パネルで描画色を設定
[スウォッチ] パネルで描画色を設定
使用する素材画像により、適切なカラーを詳細に設定することは前提ですが、基本色から大まかに選択したカラーでも十分です。

焦げ色は「黒」にしない!

ドロップシャドウやトーンを落とすなど、黒色はたいへん重宝するカラーですが、それに頼りすぎると単調になったり、生命感のない色になってしまうこともあります。
暖色系のブラウン (暗い) H34/S68/B46
色の構成要素を多く含んでいる茶色や緑色をベースにした暗い色を設定し、背景の色と混ぜ合わせると、ひと味違った作品をつくり出せるかも知れません。

基本がわかる動画を配信中!

チャンネル登録をお願いします!

焦げ色にムラをつける

このレッスンは、すべての効果をレイヤースタイルだけで作成します。引き続き、レイヤースタイルの設定を行いましょう。[レイヤースタイル] ダイアログで、[スタイル] メニューから、[サテン] を選択して有効にします。
[描画モード] に [乗算] を選択します (初期設定)。[効果のカラーを設定] に [暖色系のブラウン (暗い)] を設定します。[不透明度] に「50」% を入力します。
[角度] に「19」°、[距離] に「22」px、[サイズ] に「28」px を入力します。
[輪郭] に [ガウス] を選択して、[階調の反転] にチェックマークを入れます (初期設定)。
[サテン] を設定
[サテン] を設定
焦げ色に少しムラがつきました。
焦げ色にムラがついた
焦げ色にムラがついた

サテンの効果とは?

[レイヤースタイルの [サテン] は、光沢のある布生地「サテン」のような効果をつけられる機能です。オブジェクトの塗りの部分を左右で交差させ、描画モードの [差の絶対値] で重ね合わせて形状をつくり出します。
設定項目の[距離]は重ね合わす距離、[サイズ] はぼかし幅です。[輪郭] はトーンカーブによって階調を変化させることで、オブジェクトの形状を変えるものです。プリセットの [線形] 以外は、[サイズ] の設定値が高いほど効果が現れます。

焦げ色にノイズをつける

レイヤースタイルの [ドロップシャドウ] を活用して、焦げ色に粗いノイズを付け、透過して見える背景画像との質感の違いを強調します。[レイヤースタイル] ダイアログで、[スタイル] メニューから、[ドロップシャドウ] を選択して有効にします。
[レイヤースタイル] ダイアログで、[レイヤーがドロップシャドウをノックアウト] のチェックマークを外します。
[画質] セクションの [輪郭] に [半円] を選択します。[ノイズ] に「50」% を入力します。
[ドロップシャドウ] を設定
[ドロップシャドウ] を設定
[構造] セクションの [角度] の設定は、ここでは直接影響しませんが、[包括光源を使用] のチェックマークを外しておきましょう。設定値はなんでも構いません。とりあえず、影響しない意味を込めて「0」°を入力しておきましょう。
[距離] に「0」px、[スプレッド] に「0」px、[サイズ] に「10」px を入力します。
[描画モード] に [乗算] を選択します (初期設定)。[シャドウのカラーを設定] に [暖色系のブラウン (暗い)] を設定します。[不透明度] に「50」% を入力します。
[ドロップシャドウ] を設定
[ドロップシャドウ] を設定
[ドロップシャドウ] 適用前 → [ドロップシャドウ] 適用後

なぜドロップシャドウなのか?

レイヤースタイルの [ドロップシャドウ] は、オブジェクトの影をつくる機能ですが、ここでは影としてではなく、粗い粒子がオブジェクトを包み込むように設定しています。
[ドロップシャドウ] は [ノイズ] が設定できる
[ドロップシャドウ] は [ノイズ] が設定できる
レイヤースタイルには、描画に関する機能がたくさんあります。しかし、この粗い粒子 [ノイズ] を設定できるのは [ドロップシャドウ] だけなので、効果の構成も [ドロップシャドウ] を中心に考えています。

ノックアウトってなに?

ここで使われている「ノックアウト」とは印刷用語です。インクの重なり部分を「抜き合わせ」することを示しています。[レイヤーがドロップシャドウをノックアウト] では、有効の場合、オブジェクトと重なる部分のドロップシャドウが取り除かれます。
カンバスカラーに [白] を設定したドキュメントに、シェイプレイヤーのオブジェクトを作成し、[レイヤーがドロップシャドウをノックアウト] の「有効」と「無効」の変化を比較してみましょう。
「有効」の場合 (初期設定) → 「無効」の場合
シェイプレイヤーには、ドロップシャドウの変化が確認しやすいように、[レイヤー] パネルで、[塗り] に「50 %」を設定して、オブジェクトを半透明にしました。

ノックアウトが「有効」の場合 (初期設定)

オブジェクトと重なる部分のドロップシャドウが取り除かれます。取り除かれたドロップシャドウは、オブジェクトが透明色の場合に確認できます。

ノックアウトが「無効」の場合

オブジェクトと重なる部分のドロップシャドウがそのまま適用されます。そのまま適用されたドロップシャドウは、オブジェクトが透明色の場合に確認できます。

金型で押された窪みをつくる

レイヤースタイルの [ベベルとエンボス] を活用して、オブジェクトに立体的な効果を加え、金型で押されてた窪みをつくります。[レイヤースタイル] ダイアログで、[スタイル] メニューから、[ベベルとエンボス] をクリックして有効にします。
[陰影] セクションの [ハイライトのモード] に [スクリーン] を選択します。[ハイライトのカラーを設定] に [ホワイト] を設定します (初期設定)。
[不透明度] に「50」% を入力します。[シャドウのモード] に [乗算] を選択します (初期設定)。[シャドウのカラーを設定] に [暖色系のブラウン (暗い)] を設定します。[不透明度] に「50」% を入力します。
[ベベルとエンボス] を設定
[ベベルとエンボス] を設定
[角度] の [包括光源を使用] のチェックマークを外します。[角度] に「30」°、[高度] に「30」°を入力します。
[光沢輪郭] に [線形] (初期設定) を選択します。[アンチエイリアス] のチェックマークを外します (初期設定)。
[ベベルとエンボス] を設定
[ベベルとエンボス] を設定
[構造] セクションの [スタイル] に [エンボス] を選択します。[テクニック] に[滑らかに] を選択します (初期設定)。[深さ] に「100」% を入力します (初期設定)。[方向] に [下へ] を選択します。[サイズ] に「8」px、[ソフト] に「0」px を入力します。
[ベベルとエンボス] を設定
[ベベルとエンボス] を設定
金型で押された窪みをつくることができました。
金型で押された窪みをつくることができた
金型で押された窪みをつくることができた

ベベルとエンボスとは?

ベベルとは、平面を押し出して立体的にしたような効果をつける機能で、エンボスとは、紙や金属板などから図柄を浮き彫りにしたような効果をつける機能のことをいいます。
ベベル (内側) → エンボス
ベベル (押し出し) の主な設定は、適用するオブジェクトの輪郭から、どれくらいの幅で効果を適用するか…というものです。初期設定値からの調整で、ある程度の立体的な効果は出るでしょう。しかし、苦戦を強いられるのは「質感」を表現することです。これには、立体的な効果を演出する、陰影の設定が深く関係してきます。

窪んだ表面にデコボコをつくる

レイヤースタイルの [テクスチャ] オプションを活用して、[ベベルとエンボス] の効果に、ランダムなデコボコの質感を加えます。[レイヤースタイル] ダイアログで、[スタイル] メニューから、[テクスチャ] をクリックして有効にします。
[エレメント] セクションの [クリックでパターンピッカーを開く] をクリックします。
表示されたパターンピッカーの歯車アイコンをクリックします。
プリセットメニューから、[パターン] を選択します。
表示されたパターンピッカーから [雲模様] を選択します。
[雲模様] を選択
[エレメント] セクションの [比率] に「100」%、[深さ] に「+100」% を入力します (初期設定)。
[テクスチャ] を設定
[テクスチャ] を設定
窪んだ表面にデコボコをつくることができました。
[テクスチャ] 適用前 → [テクスチャ] 適用後

テクスチャとは?

[ベベルとエンボス] の [テクスチャ] オプションは、パターンピッカーにリストアップされたマップデータ (画像) から、[ベベルとエンボス] の [深さ] に影響を与えるもので、その強さはグレースケール (白黒) の階調で計算されています。[ベベルとエンボス] の [サイズ] により、マップデータが移動してハイライトやシャドウをつくり出します。

周囲に焼け焦げを広げる

焼印を表現する最大の見せ場は、周囲に広がる焼け焦げです。グラデーションの [シェイプバースト] は、それをカタチにする恰好の機能でしょう。[レイヤースタイル] ダイアログで、[スタイル] メニューから、[境界線] をクリックして有効にします。
[構造] セクションの [サイズ] に「32」px を入力します。[位置] に [外側] を選択します (初期設定)。[描画モード] に [乗算] を選択します。[不透明度] に「75」% を入力します。
[境界線] を設定
[境界線] を設定
[塗りつぶしタイプ] に [グラデーション] を選択します。[グラデーション :] の [クリックでグラデーションを編集] をクリックして、[グラデーションエディター] ダイアログを表示します。
[境界線] を設定
[境界線] を設定
[グラデーションエディター] ダイアログで、[プリセット] の [描画色から透明に] をクリックします。
[グラデーションエディター] を設定
[グラデーションエディター] を設定
カラーバー左側の [カラー分岐点] をクリックして、[暖色系のブラウン (暗い)] を設定します。右側の [カラー分岐点] をクリックして、[イエロー (純色)] を設定します。新しい [カラー分岐点] を追加して、[位置] に「50」% を設定します。[カラー分岐点] をクリックし、[イエローオレンジ (純色)] を設定します。
[位置 : 0%] [H : 34° / S : 68% / B : 46%]
[位置 : 50%] [H : 39° / S : 93% / B : 87%]
[位置 : 100%] [H : 57° / S : 100% / B : 100%]
グラデーションの設定ができたら、[グラデーションエディター] ダイアログの [OK] をクリックします。
[レイヤースタイル] ダイアログで、[グラデーション] の [逆方向] にチェックマークを入れます。
[スタイル] に [シェイプバースト] を選択します。
[境界線] を設定
[境界線] を設定
周囲に焼け焦げをつくることができました。
[境界線] 適用前 → [境界線] 適用後

シェイプバーストとは?

[シェイプバースト] は、オブジェクトの輪郭から爆発したように広がるグラデーションの種類です。[境界線] の初期設定では、グラデーションに [描画色から透明に] が設定されていて、外側から内側に向けて描画されます。グラデーションの向きは [逆方向] で切り替えます。[シェイプバースト] には [角度] が存在しません。
すべての項目が設定できたら、[レイヤースタイル] ダイアログの [OK] をクリックします。
[レイヤースタイル] ダイアログの [OK] をクリック
[レイヤースタイル] ダイアログの [OK] をクリック
[レイヤー] パネルで、[BRAND] シェイプレイヤーの文字、または図形にレイヤースタイルの効果が追加されたことを確認します。
レイヤースタイルの効果を確認
レイヤースタイルの効果を確認
焦げた焼印の文字が完成しました。
焦げた焼印の文字が完成した
焦げた焼印の文字が完成した

紙の焼け焦げにも応用できる!

[シェイプバースト] を活用すれば、紙の焼け焦げもバッチリ表現できます。
画像に入力したテキスト (拡大) → テキストを焼け焦げ風に加工 (拡大)

スポンサード リンク