Photoshopでキラゴテ小技集 〜 レイヤースタイルで水の表現編 〜

Photoshopでキラゴテ小技集〜 レイヤースタイルで水の表現編 〜

Miyako Toda

  • line
  • はてなブックマーク
  • x

デザイン

  • #Photoshop

こんにちは、暑さにも寒さにも弱いデザイナーの戸田です。
毎日暑いですね。(これを書いてる時は真夏)暑いと冷たい飲み物やプールやシャワーやアイス、とにかく水関係のものを体が欲します。
ということで、レイヤースタイルで簡単に水の表現を作ってみることにしましょう。

「普通の水」を作ってみよう

「水(液体)」とひとことで言ってもいろんな水(液体)がありますよね?
水道水のようにさらさらなもの、ジュースのように鮮やかな色合いのもの、スープのようにトロトロしたもの、水銀のような硬質な液体等々。
まずは基本となる「普通の水」にチャレンジです。

1.背景は明るめのものを用意
理由は背景暗いと水が目立たないので。無地か模様が少ないテクスチャがいいです。

2.別レイヤーでスタイルを調整
背景とは別の新規レイヤーに水の表現をしていきます。よりリアルな表現にするため様々なレイヤースタイル(効果)を使います。
[図1]〜[図3]のようにそれぞれ数字を入れ込んでください。(web用を想定してますので解像度は72dpiです)

Photoshopでキラゴテ小技集〜 レイヤースタイルで水の表現編 〜
[図1]
Photoshopでキラゴテ小技集〜 レイヤースタイルで水の表現編 〜
[図2]
Photoshopでキラゴテ小技集〜 レイヤースタイルで水の表現編 〜
[図3]

3.ブラシツールで描いてみましょう
普通の水は本来透明ですが、わかりやすくするために水色(#7ecef4)にします。
ブラシは「ハード円ブラシ」。大きさは任意で。大きければ広範囲で水浸しにできますし、小さければ可愛い水滴が作れます。[図4]

[図4]

いろんな液体を作ってみよう

さらっとした水の表現をご紹介しましたが、もっとどろっとさせてみたり、派手な色にしてみたりと、調整してみましょう。
[図5]はレイヤーごとに別々のスタイルを反映させて描いた動画です。
左から
・水銀のような液体
・泡のような液体
・金属のような液体
・水飴のような液体液体
・レジンのような液体

[図5]

水の表現の用途としましては、webだとこんな感じでしょうか。

Photoshopでキラゴテ小技集〜 レイヤースタイルで水の表現編 〜
[図6]

化粧品やシャンプーの成分・効能を表現するのに液体表現はもってこいです。
清潔感や透明感、潤い感が出せますので。

フリーのデータも探しておこう

ネットではブラシやテクスチャだけでなく、今回のようなレイヤースタイルのフリー素材も存在します。
製作者に感謝しつつ、自分なりにアレンジを加えて、新しいスタイルを作るのも楽しさの一つです。
下記は参考までに、レイヤースタイルをまとめたサイトです。(フリーもあれば有償もあるのでサイトをよく読んでからお使いください)

■PHOTOSHOPVIP
https://photoshopvip.net/tag/layerstyle

■S.Design.Labo
https://sdesignlabo.com/photoshop/ps-free-layerstyle/

■NEXTist Skill Box
https://nextist.net/adobe-photoshop-layer-style-asl/

インコ(デザイナー)

Miyako Toda

とにかく手の早いエリートデザイナー。早すぎて見えない。チャームポイントは尾骶骨。

日々更新中! Bit Beans、
Xもやってます!
  1. TOP
  2. ブログ
  3. Photoshopでキラゴテ小技集〜 レイヤースタイルで水の表現編 〜