【Photoshop】ハチミツのような質感のテキストエフェクトの作り方

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

Photoshop（フォトショップ）でハチミツキャンディのような質感をゼロから作る方法をフォトショ初心者の方に詳しく解説します。

レイヤー効果を組合わせて質感を再現するテキストエフェクトなので汎用性抜群！
テキストに適用させてロゴデザインや見出しデザイン、シェイプオブジェクトに適用して賑やかし用の素材作りなど、様々な用途に使えます。

レイヤースタイルの応用を実践し、より深くPhotoshopについて学んでみませんか？

この記事の目次

何が作れるの？

Photoshop（フォトショップ）を使ってハチミツ味のキャンディーのような質感を再現できます。
テキストや様々なオブジェクトなどへ適用可能なエフェクト。
平面的なデザインをあっという間に立体感でリアルな質感に変身させられますよ。

ハチミツの質感を再現

それではPhotoshopを使ってハチミツの質感を再現してみましょう。
フォトショ初心者の方にも再現できるよう、順を追ってメイキングを解説いたします！

Photoshopを導入しましょう

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

ハチミツ文字を作る

STEP.1

文字を入力

[ 文字ツール ] で文字を入力します。

サンプルで使用しているフォントは [ Merengue Script ] です。
フォントの色は何色でも構いません。

キャンバスサイズ：1920px x 1080px　72px/inch
文字サイズ：420px

入力した文字を [ Ctrl + J ] (Mac：Command + J) でコピーします。
コピーした方の [ 塗り ] を0%に変更。

ついでにレイヤー名を [ 文字① ] と [ 文字② ] に変更します。

STEP.2

文字①を調整

[ 文字① ] をアクティブにします。

[ レイヤースタイルを追加 ] → [ カラーオーバーレイ ] を追加。

描画モード：通常　色：#f48105
不透明度：100%

[ レイヤースタイルを追加 ] → [ ドロップシャドウ ] を追加。

描画モード：通常　色：#441200　不透明度：100%
角度：90°　距離：2px　スプレッド：0%　サイズ：3px

[ レイヤースタイルを追加 ] → [ 境界線 ] を追加。

サイズ：2px　位置：内側　描画モード：通常　不透明度：100%
塗りつぶしタイプ：グラデーション
グラデ①　色：#5f0000　位置：0%
グラデ②　色：#8c0200　位置：100%
スタイル：線形　レイヤーに整列にチェック
角度：90°　スケール：100%　方法：クラシック

[ レイヤースタイルを追加 ] → [ ベベルとエンボス ] を追加。

スタイル：ベベル（内側）　テクニック：滑らかに
深さ：72%　方向：上へ　サイズ：25px　ソフト：0px
角度：90°　高度：70°　光沢輪郭：カスタム
ハイライトのモード：覆い焼き(リニア) – 加算　色：#ffffff　不透明度：100%
シャドウのモード：覆い焼きカラー　色：#ffffff　不透明度：75%

[ レイヤースタイルを追加 ] → [ サテン ] を追加。

描画モード：オーバーレイ　不透明度：32%　角度：82°
距離：14px　サイズ：35px　輪郭：くぼみ – 深く
階調の反転にチェック

[ レイヤースタイルを追加 ] → [ 光彩(内側) ] を追加。

描画モード：乗算　不透明度：100%
ノイズ：0%　色：#721800
テクニック：さらにソフトに　ソース：エッジ
チョーク：3%　サイズ：17px
輪郭：線形　範囲：50%　適用度：0%

すると左図のようなハチミツキャンディー風の質感の基礎が作れました。

STEP.3

文字②を調整

[ 文字② ] をアクティブにします。

[ レイヤースタイルを追加 ] → [ ドロップシャドウ ] を追加。

描画モード：通常　色：#591d00
不透明度：75%　角度：90°
距離：5px　スプレッド：0%　サイズ：10px

[ レイヤースタイルを追加 ] → [ ベベルとエンボス ] を追加。

スタイル：ベベル（内側）　テクニック：滑らかに
深さ：100%　方法：下へ　サイズ：13px　ソフト：0px
角度：90°　高度：70°　光沢輪郭：カスタム
ハイライトのモード：覆い焼き　色：#ffffff　不透明度：60%
シャドウのモード：通常　色：#000000　不透明度：0%

ハチミツキャンディー文字のベースが完成しました。

レイヤー構造

現時点でのレイヤー構成です。複数のレイヤー効果が重なり合っている事が確認できますね。

気泡を作る

STEP.1

気泡のベースを作る

[ 楕円形ツール ] や [ ペンツール ] で気泡のベースを作成します。
少し形を崩しておくと自然な仕上がりになります。

ツールモードは [ シェイプ ] で作成。
塗り：お好きな色
線：無し

レイヤーの [ 塗り ] は0%にしておきます。

※テキストは [ Ctrl + G ] (Mac：Command + G) でグループ化しました。

STEP.2

気泡の質感を作る

[ レイヤースタイルを追加 ] → [ ドロップシャドウ ] を追加。

描画モード：焼き込み（リニア）　色：#0b0400
不透明度：30%　角度：82%
距離：2px　スプレッド：0%　サイズ：1px

[ レイヤースタイルを追加 ] → [ ベベルとエンボス ] を追加。

スタイル：ベベル（内側）　テクニック：滑らかに
深さ：1000px　方向：上へ
サイズ：40px　ソフト：0px
角度：-100°　高度：50°
光沢輪郭：線形　アンチエイリアスにチェック
ハイライトのモード：覆い焼き(リニア) – 加算　色：#ffffff　不透明度：30%
シャドウのモード：乗算　色：#0b0400　不透明度：40%

[ レイヤースタイルを追加 ] → [ サテン ] を追加。

描画モード：オーバーレイ　色：#ffffff
不透明度：10%　角度：20°
距離：1px　サイズ：22p
輪郭：くぼみ – 深く　階調の反転にチェック

[ レイヤースタイルを追加 ] → [ シャドウ(内側) ] を追加。

描画モード：オーバーレイ　色：#0b0400
不透明度：30%　角度：80°
距離：7px　チョーク：0%　サイズ：0px

[ レイヤースタイルを追加 ] → [ 光彩(内側) ] を追加。

描画モード：焼き込み（リニア）　不透明度：12%
ノイズ：0%　色：#0b0400
エレメント：さらにソフトに　ソース：エッジ
チョーク：0%　サイズ：2px
輪郭：線形　範囲：50%　適用度：0%

以上で気泡のベースが完成しました。

FINISH

コピーし、散らして完成

[ 移動ツール + Alt ] で気泡をコピーし、[ Ctrl + T ] でサイズ調整を行えば完成です。
※Macの場合は [ 移動ツール + Option ] → [ Command + T ]お好みで背景を追加してください。

拡大した状態です。
ハチミツキャンディーのようなこってりした質感が再現できましたね。

Photoshopのレイヤースタイルを使えば文字やオブジェクトの変える事ができます。フォトショ未導入の方はAdobe公式サイトから入手できますよ。

レイヤースタイルのコピー方法

別のオブジェクトにハチミツエフェクトを適用したい際、ゼロから作り直すのは手間ですよね。レイヤーパネルに表示されている [ fx ] をコピーしたいレイヤー上へ [ Alt ] (Mac：Option) を押しながらドラッグ＆ドロップでコピペできます。詳しくはコチラの記事で解説しています。

更に高品質な表現ができるエフェクトPSD

上記で解説したハチミツエフェクトと違う高品質なエフェクトPSDです。
全て商用可能！
フォトショ初心者の方でも一瞬でサンプルのようなプロ品質が出せるチートアイテムですよ。

#01 Realistic Water Text Effect Mockup

透明感のある水の表現ができるエフェクトPSDです。ロゴデザイン、見出し、各種デザイン素材に活用できる便利なテンプレートです。

ダウンロードする

#02 Holographic Texture Text Effect Mockup Bundle

流行のホログラム表現が複数収録されたテキストエフェクトです。もちろんテキストだけでなく、シェイプやブラシで描いたオブジェクトにも適用できますよ。

ダウンロードする

#03 Smoking Text Effect

非常に複雑な煙の表現が一瞬で出来るテキストエフェクトです。煙や湯気などの不定形を表現するのは難しいのですが、当PSDを使えばフォトショ初心者の方でも一瞬でサンプルのような仕上がりにできます。

ダウンロードする

#04 Comic Text Effect Mockup Bundle with Graphic Elements

アメコミのセリフなどで使われる表現ができるテキストエフェクトです。多くのフキダシ素材も収録されており、アメコミ表現をされたい方にピッタリの素材ですよ。

ダウンロードする

#05 Realistic 3D Golden Text Effect Mockup

非常に高級感のあるゴールド表現ができるテキストエフェクトPSDです。立体感のある質感でワンランク上の黄金を作りたい方にオススメです。

ダウンロードする

#06 Paper Cut Editable Text Effect

紙を切り抜いたような表現ができるテキストエフェクトです。まるで本当に厚紙を切り抜いたような質感が秀逸ですね。

ダウンロードする

#07 Realistic Burning Fire Text Effect Mockup

燃えさかるリアルな炎が表現できるテキストエフェクトです。煙同様、こういった不定形のエフェクト表現を作るのは力量を必要としますが、当PSDを使えば誰でも一瞬でプロ品質が再現可能！

ダウンロードする

ワンランク上のテンプレート素材

PhotoshopやIllustratorなどで編集できる、高品質なデザインテンプレートを紹介します。
ポートフォリオや名刺、バナーなどの制作に役立つ素材を厳選！
プロが制作したテンプレートを活用すれば、作業時間の短縮だけでなく、レイアウトや文字組みなどのデザインテクニックも効率よく学べますよ。

例えばクリエイターの就職・転職活動に役立つポートフォリオ。プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性がアップしますよ！
厳選！ポートフォリオ用テンプレート46選

デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作ると仕上がりに悩むこともありますが、良質なテンプレートを元に作るだけでレイアウトや文字組みを効率よく学べます。
相手に好印象を与える名刺テンプレート50選

バナーはPhotoshopの操作を学ぶうえで良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選

紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利ですよ。他者と差を付けてより高みを目指しましょう！
デジタル媒体向けポートフォリオテンプレ素材38選

制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬！
様々なモックアップテンプレート58選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しています。あわせてチェックしてみてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

おわりに

以上、Photoshop（フォトショップ）のレイヤー効果を使ってハチミツのような質感のテキストエフェクトを再現する方法についてでした。

ブラシツールなどで描くのは非常に大変ですが、レイヤー効果を使えば簡単かつ汎用性の高いエフェクトが作れます。色や影の濃さなどを微調整し、お好みのハチミツ表現をしてみてください。

ではまた！

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

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