【Photoshop】木に焼印を施したテキストエフェクトの作り方

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

Photoshop（フォトショップ）で木に熱した焼き鏝で焼印を施したような質感のテキストエフェクトをゼロから作る方法をフォトショ初心者の方に詳しく解説します。

文字やオリジナルロゴなどを焼印の質感で表現できます。
Webサイトやバナーのロゴデザイン・見出しデザインやチラシなどDTPデザイン、更にはUIデザインなど、幅広い制作で活用できるPhotoshopテクニックが学習できます。

これからPhotoshopを始められる方にも再現できるよう、順を追って木に焼印を施したような質感のテキストエフェクトの作り方を解説いたします！

この記事の目次

何が作れるの？

上図のような木に焼印を施した質感のロゴデザインがPhotoshopで再現できます。
Webサイトやバナーなどのロゴや見出し、フライヤーデザイン等をはじめとしたDTP、そしてUIデザインなど、様々なクリエイティブに応用できますよ！

焼印風テキストエフェクトの作り方

Photoshopで木目テクスチャに焼印エフェクトをゼロから作る方法を解説していきます。
フォトショ初心者の方にも再現できるように順を追って解説いたします！

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はフォトプラン公式サイトから入手可能。（月額は最安の1,180円、7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

焼印エフェクトを作成する

STEP.1

新規ドキュメントにテクスチャを配置

新規ドキュメントを作成します。
サンプルのサイズは下記です。

幅：3000px
高さ：2000px
解像度：72px/inch

木目テクスチャを準備します。
サンプルはコチラの画像を使用しました。

STEP.2

ロゴや文字を準備

焼印テキストエフェクトを適用したいロゴや文字オブジェクトを作成します。

サンプルはIllustratorでロゴを作成、Photoshopで文字を入力。
※Illustratorの使い方はコチラで完全解説しています。

対象となるオブジェクトは [ スマートオブジェクト ] に変換。
ロゴ、文字など複数のオブジェクトがある場合はグループ化してからスマートオブジェクトに変換しましょう。

レイヤーパネル右上の塗りを0%に変更しておきます。

STEP.3

レイヤースタイルを追加①

レイヤーパネル下部の [ fx ] → [ 光彩(外側) ] をクリックします。

光彩(外側)の詳細設定です。
描画モード：焼き込みカラー
不透明度：35%　ノイズ：0%　色：#1b0d00
テクニック：さらにソフトに
スプレッド：0%　サイズ：40px
輪郭：線形　アンチエイリアスにチェック
範囲：50%　適用度：0%

レイヤースタイル左メニューから [ カラーオーバーレイ ] を追加します。
※見つからない場合は画面左下にある [ fx ] → [ カラーオーバーレイ ] で追加可能。

描画モード：焼き込み(リニア)
色：#000000　不透明度：35%

同様の手順で [ 光彩(内側) ] を追加します。

描画モード：焼き込みカラー
不透明度：10%　ノイズ：0%　色：#4d2f11
テクニック：さらにソフトに　ソース：エッジ
チョーク：0%　サイズ：15%
輪郭：線形　アンチエイリアスのチェック無し
範囲：50%　適用度：0%

すると左図のような質感が表現できます。
もう少しレイヤースタイルの追加が続きます。

STEP.4

レイヤースタイルを追加②

引き続き [ シャドウ(内側) ] を追加します。

描画モード：焼き込み(リニア)
色：#010101　不透明度：11%　角度：120°
距離：18px　チョーク：0%　サイズ：18px
輪郭：線形　アンチエイリアスのチェック無し
ノイズ：0%

最後に [ ベベルとエンボス ] を追加します。

スタイル：エンボス　テクニック：滑らかに
深さ：100%　方向：下へ　サイズ：11px　ソフト：0px
角度：120°　包括光源を使用のチェック無し　高度：30°
光沢輪郭：線形　アンチエイリアスのチェック無し
ハイライトのモード：覆い焼き(リニア) – 加算
色：#ffffff　不透明度：15%
シャドウのモード：焼き込みカラー
色：#010101　不透明度：15%

するとPhotoshopで左図のような焼印の質感が表現できます。

超高品質なテキストエフェクト

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

Photoshopで使える商用利用可能で高品質なテキストエフェクトです。お好きなフォントや文字に差し替えるだけでハイクオリティなロゴや見出しが作成できるチートアイテムですよ！

背景を調整する

より焼印エフェクトの質感を高めるために背景の調整を行いましょう。
なお、フォトショ未導入の方はフォトプラン公式サイト（月額は最安の1,180円）から入手しておきましょう。

STEP.1

CameraRawフィルターでテクスチャを編集

背景に使用している木目テクスチャのレイヤーをアクティブにします。

[ フィルター ] → [ CameraRawフィルター ] をクリック。
※ショートカットは [ Shift + Ctrl + A ] (Mac：Shift + ⌘ + A)

画面右側から [ 効果 ] → [ 周辺光量補正 ] → [ -30 ] に設定。

するとテクスチャの周辺を暗くできます。
お好みで暗さは調整してください。
最後にCameraRawフィルターの画面右下にある [ OK ] をクリックしましょう。

より詳しくCameraRawフィルターの使い方を学びたい方向けにコチラの記事で詳しく解説しています。

STEP.2

グラデーションを追加

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

グラデーション：詳細は次画像を参照
スタイル：線形　角度：90°　比率：100%
選択範囲内で作成にチェック
方法：クラシック

グラデーションの詳細です。
グラデ①　色：#000000　位置：0%　不透明度：100%
グラデ②　色：#ffffff　位置：100%　不透明度：100%

Photoshopのグラデーションの使い方はコチラの記事で詳しく解説しています。

レイヤーパネルで下記に設定変更します。

描画モード：ソフトライト
塗り：15%

FINISH

完成

以上で木目に焼印を施したような質感をPhotoshopで再現する事ができました。

Webサイトやバナー、フライヤー等のグラフィックデザイン用途など、様々な制作に活用できるテクニックですよ。

対象のスマートオブジェクトを編集

木目テクスチャに焼印の質感を適用しているスマートオブジェクトのレイヤーサムネールをダブルクリックすると文字やロゴなどの再編集ができます。

再度デザインを調整する際にお試しください。

更に高品質な焼き印エフェクト素材

先に紹介したエフェクトを更に発展させた超高品質な焼印エフェクトのPSD素材です。
全て商用利用可能な素材なので安心して活用できますよ。

#01 Burned Wood Texture Effect Mockup

4種類の焼き印エフェクトが収録されたPSD形式のテキストエフェクト素材です。焼き印を作りたい方はこの素材が超オススメですよ。

ダウンロードする

#02 Woodburner Text Effect Mockup

少し明るめの焼き印風のロゴが作れるテキストエフェクト素材です。レイヤー分けされたPSD素材内のスマートオブジェクトを編集するだけ、1分でサンプルの様な作品が作成可能ですよ。

ダウンロードする

#03 Wooden Surface with Burn Effect Mockup

細部まで非常にリアルな質感で再現された焼き印エフェクト素材です。長辺が6000pxもある高解像度素材なので大型の印刷物やビジュアルにも耐えられますよ。

ダウンロードする

#04 Wood Burn Text Effect Mockup

荒めの板に大雑把な焼印を施したような質感が再現できるテキストエフェクト素材です。超高解像度で高品質、そして商用利用可能なので安心して活用できます。

ダウンロードする

#05 Burnt Paper Photo Effect Mockup

先のエフェクトと雰囲気が似ていますが、焼かれてしまった場所が違います。表面のビニール層だけが焼けてしまったような質感が秀逸ですね。

ダウンロードする

焼き印や焼けた紙の表現ができるエフェクト素材

【Photoshop】焼けた質感の板や紙にできるエフェクトPSD素材

焼けた板や紙の表現が再現できるテキストエフェクトやフォトエフェクトのPSD素材を紹介しています。併せてチェックされてみませんか？

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

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

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

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

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

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

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

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

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

おわりに

以上、Photoshop（フォトショップ）で木目テクスチャに焼印の質感を付与するテキストエフェクトの作り方についてでした。

焼印系の表現はデザイン制作で度々行う方法の一つです。
Webサイトのメインビジュアルやバナーデザイン、フライヤー等のDTPデザイン等、幅広い制作で使える汎用テクニック。

上手く活用して表現の幅を広げるのに役立ててください！

なお、noteで当記事で作成したエフェクトPSDを配布しています。

ではまた！