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

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

今回は、夏らしいバナーやチラシなどに使えそうな「気泡」をPhotoshopで作成する方法をご紹介します！

写真素材を使ったほうがリアルな気泡を表現できますが、ポップなデザインにはリアルすぎる気泡イメージが合わなかったり、思った通りの気泡写真素材が見つからない時に、Photoshopで自作ができると便利なことがあります。

少し手間はかかりますが、Photoshopのブラシツールを駆使すれば、特別な技術がなくても気泡イメージイラストが作れます。

まずは背景を用意

気泡の背景を用意します。今回はビールのイメージです。山吹色をベースに少しグラデーションをかけて深みを出しました。

散布ブラシで気泡のベースを作る

「ブラシ設定」ウィンドウで散布ブラシの形状を設定します。

「ブラシ設定」ウィンドウが出ていない方は、Photoshopの上部メニューから「ウィンドウ＞ブラシ設定」を開きます。

背景の上に新規レイヤーを追加したら、そこに気泡を描いていきます！

ブラシツール（ショートカット【B】）にすると「ブラシ設定」がアクティブになります。

何も設定をしなければ、べた塗りができる状態になっていると思いますが、ここから「ブラシ設定＞散布」にチェックを入れます。

「散布」項目の中の「散布」の数値を、最大値の1000％にします。
他の項目はそのままでOKです。

次に「シェイプ」項目を設定します。

「〇〇のジッター」という項目がいくつかありますが、「サイズ、角度などをどれくらいバラつかせるか」という設定ができます。
ここはお好みもあると思うので、プレビューを見ながら実際に数値を変えてみて、適切な加減に調整してください。

今回は次のように設定します。

最後に、一番上の「ブラシ先端のシェイプ」を設定します。
「間隔」は気泡同士の間隔を設定できるのですが、あまり気泡同士がくっつかないほうが良いので100％に近い数値が良いです。

実際にブラシで気泡を描いてみましょう。炭酸の泡が立ち上っているイメージなので、縦方向にブラシを塗ります。ここでも、できるだけ気泡同士が重ならないように塗ると良いです（少し重なっても大丈夫です）。

これで、気泡のベースができました！

気泡に質感を足していく

デザインによってはここで終わっても良いものもありますが、今回はさらに実際の気泡らしくなるように、「レイヤー効果」を使って加工をしていきます。

気泡を描いたレイヤーは、レイヤー上を右クリック→「スマートオブジェクトに変換」でスマートオブジェクトに変換し、「塗り」を0％にしておきます。

ここから、次のようにレイヤー効果をかけていきます。

気泡のサイズやお好みによって数値は調整してください。

気泡に光と影をつけて、より立体的でリアルな質感を出しました。

さらに、奥行きを出していきます。
作成した気泡のレイヤーをコピーして元の気泡レイヤーの下に配置し、上部メニューから「フィルター＞ぼかし＞ぼかし（ガウス）」でぼかしをかけます。

そのレイヤーを移動させたり、左右または上下に反転するなどして元の気泡からずらして配置し、不透明度を下げます。

より炭酸ドリンクらしさが出たのではないでしょうか。

もっとリアルにしようと思うと手書きで細部まで書き込むか、写真素材を使ったほうが良いですが、Photoshopで手軽に作成するなら今回ご紹介したやり方が使えると思います！

バナーやチラシに清涼感を出したい時に

今回ご紹介した方法で、例えばバナーやチラシ、メインビジュアルなどの背景に炭酸イメージの気泡を取り入れることで、サイダーやビールを飲んだ時のような清涼感が出て、暑い夏にピッタリなシズル感を付加できそうです。

手順は少なくはありませんが、特別なスキルがなくても取り入れることのできる方法なので、ぜひ作ってみてくださいね！