WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： デザイン >Photoshop

バナーや背景デザインで、クリームが画面の上からとろ～っと垂れてきているような装飾を見たことがありませんか？

今回はPhotoshopで「とろ～っとした装飾」を作る方法をご紹介します！

チョコレート風装飾を作る

まずは適当なデザインを用意します。
チョコレートスイーツのバナーのイメージで、背景や写真、文字を配置します。

「とろ～り」のベースを作る

「Chocolate」の文字の下に空の透明レイヤーを新規作成します。そこにブラシツールで太い横線を引きます。
色は後から変えられますが、イメージがつきやすいように最初からチョコレートらしい色にしておいたほうが作りやすいです。

線はできるだけ端がぼやけないように「硬さ」を「100％」にしておきましょう。
ただし「鉛筆ツール」だとカクカクしてしまうので、硬めの線といっても基本的には「ブラシツール」で描いていきます。

フリーハンドだと真っ直ぐに線を引くのは難しいですが、あまり真っ直ぐ過ぎると不自然になってしまうので、多少ゆがんでいて大丈夫です！

ここから、とろ～っとチョコレートが垂れてきているイメージにしていきます。

先に引いた横線よりも細めの縦線を、横線を起点にして何本か描いていきます。
線が引けたら、消しゴムツールで削って整えます。

細かい注意点は次のような点です。

• 線の間は丸く削る
  柔らかい液体なので、全体的に角がないように描いていきます。
• 下の方をぷっくりと太めにする
  重力で少し液体が下に溜まるイメージで、線の下部を少し太くします。
• 線の太さや線同士の間隔はそろえず、ランダムに
  バラバラと流れていく感じにすると自然です。

「とろ～り」のベースができました！
実はここが一番苦労するところかもしれません。

あとはレイヤー効果を使って質感を出していきます。

チョコレートの質感を作る

先ほど作ったベースに、レイヤー効果をかけていきます。効果については、今回は次のように設定しました。

• 境界線
  ・サイズ：2
  ・描画モード：通常
  ・カラー：ベースの色
• シャドウ（内側）
  ・描画モード：オーバーレイ
  ・カラー：白
  ・不透明度：90
  ・角度：135度
  ・距離：7
  ・サイズ：1
• ドロップシャドウ
  ・描画モード：乗算
  ・カラー：黒
  ・不透明度：25
  ・角度：135度
  ・距離：4
  ・サイズ：3

チョコレートっぽい質感になりました！
もっとこだわればさらにリアルにもできそうですが、今回作りたいのは「チョコレート自体」ではなく「チョコレートっぽい装飾」なので、このくらいの処理で良いかと思います。

生クリーム風装飾を作る

次は、生クリームのような装飾を作ってみます。

適当にケーキのバナーっぽいデザインを用意したら、先ほどチョコレートの装飾で作ったようなベースを作ります。

形はチョコレートと同じで大丈夫です。色については、真っ白ではなく少しだけ暖色寄りの薄いグレーにしたほうが優しい仕上がりになります。

ここから、チョコレートの時のように質感を出すためのレイヤー効果をかけていきます。

• 境界線
  ・サイズ：2
  ・描画モード：通常
  ・カラー：ベースの色
• シャドウ（内側）
  ・描画モード：オーバーレイ
  ・カラー：白
  ・不透明度：90
  ・角度：135度
  ・距離：7
  ・サイズ：1
• グラデーションオーバーレイ
  ・描画モード：スクリーン
  ・不透明度：100
  ・グラデーション：白を0→100％
  ・角度：90度
• ドロップシャドウ
  ・描画モード：乗算
  ・カラー：黒
  ・不透明度：15
  ・角度：135度
  ・距離：4
  ・サイズ：3

白い生クリームっぽい質感になりました！

はちみつ風装飾を作る

最後に、はちみつ装飾を作っていきます。ベースの色は先ほどの生クリームの要領でつけていきます。色は少し黄色寄りのオレンジが良いですね。

ベースの色が決まったら、質感を出すためのレイヤー効果をかけていきます。

• 境界線
  ・サイズ：1
  ・描画モード：通常
  ・カラー：ベースの色
• シャドウ（内側）1
  ・描画モード：オーバーレイ
  ・カラー：白
  ・不透明度：20
  ・角度：135度
  ・距離：20
  ・サイズ：10
• シャドウ（内側）2
  ・描画モード：通常
  ・カラー：白
  ・不透明度：40
  ・角度：135度
  ・距離：7
  ・サイズ：1
• グラデーションオーバーレイ
  ・描画モード：オーバーレイ
  ・不透明度：30
  ・グラデーション：黒→白100％
  ・角度：90度
• ドロップシャドウ
  ・描画モード：乗算
  ・カラー：黒
  ・不透明度：20
  ・角度：135度
  ・距離：4
  ・サイズ：3

3パターンともにテカリを出すために「シャドウ（内側）」をしっかりつけていますが、はちみつにはもう1つ「シャドウ（内側）」を設定し、輝くようなツヤを足しています。

そして、はちみつは透明な液体ですので、ここからさらにレイヤーの「塗り」のみ「不透明度：60％」とします。

はちみつっぽい質感になりました！

スイーツ系のデザインに取り入れてみよう

今回は比較的簡単に「とろ～り」とした装飾を作る方法をご紹介しました。

とろ～りとした食材を使ったスイーツの紹介デザインに取り入れるとクオリティが上がりますし、実際に甘くクリーミーな何かを食べているような気分になり、購買意欲も湧きそうです。

イラスト素材を探せばもっとリアルで質の高いものもありますが、自分で作れると調整がしやすく使いやすいので、ぜひ一度作ってみてくださいね。