WEB制作、マーケティングに関する情報をお届けします。ホームページ制作会社、テラのブログ

水滴をPhotoshopだけで作る方法。

Photoshopで水滴を作る方法

Photoshopで水滴を表現する方法です。わかりやすいようにかなり大きな水滴にしてますが実際に描くときはサイズを考えてリアルなサイズにしましょう。

1.今回のサンプルの背景を頂戴する。

今回はコチラ→BEIZ Graphics様から背景素材を頂戴致しました。商用問わず完全無料です。

背景素材のBEIZ Graphics様

2.画像をPhotoshopに取り込む

まずダウンロードした画像をPhotoshopに貼付けます。初期の白バックの背景は捨ててください。で新しく取り込んだ背景のレイヤー名をダブルクリックして[背景]と名前をつけてください。

背景として設定

3.水滴用のレイヤーを作成する

右下のボタンで新規レイヤーを作成します。新しいレイヤーの描写モードは乗算にします。で、背景レイヤーは当分、使わないのでロックしましょう。

水滴レイヤーを作成

4.水滴のベースになる楕円をつくる

楕円ツールで楕円の選択範囲を作成します。

楕円を作る

選択範囲を白で塗りつぶしします。上のバーから編集→塗りつぶしで塗りつぶしボックスが出ます。画像と同じように使用を[ホワイト]にして描写モードを[通常]、不透明度を[100]%にしておっけオッケーを押すと塗りつぶし出来ます。※描写モードが乗算なので色は見えません!

塗りつぶしボックス

5.水滴を描写する

レイヤーの画像をダブルクリックor右クリック+レイヤーの効果でレイヤースタイルを表示させます。

レイヤースタイルの調整

6.水滴を作り込む

今回使用するレイヤースタイルは[ドロップシャドウ][シャドウ(内側)][光彩(内側)]です。まずはドロップシャドウのレイヤースタイルから

ドロップシャドウを調整

次にシャドウ(内側)の設定

シャドウ(内側)

次に光彩(内側)の設定

光彩内側の設定

上記の設定は水滴が大きさが変われば変わってきます。水滴の画像を実際に見ながら調整しましょう。

7.背景の水滴部分を膨張させる

水滴レイヤーの画像部分をcommand(Windowsはctrl)+クリックで水滴と同じ形の選択範囲を作成します。背景レイヤーを選択しておきます。水滴レイヤーはもう使わないのでロックします。

水滴レイヤーをクリック

背景レイヤーが選択されている状態で、フィルター→変形→球面をクリックします。

背景レイヤーを変形

球面ボックスが出てくるのでボックス内のプレビュー画面を見ながら調整してください

球面加工

8.水滴にハイライトを入れる

ハイライトを入れていきます。新しくハイライトというレイヤーを一番上に作ってください。背景レイヤーはもう使いませんのでレイヤーロックしてください。

レイヤーを新しく作る

楕円形ツールを使ってハイライトが入りそうな部分に楕円の選択範囲を作成します。

ハイライト

白で塗りつぶします。

塗りつぶし

フィルター→ぼかし→ぼかし(ガウス)てなじませる。

ぼかし

プレビューを見ながらぼかし具合を調整してください。

ぼかし具合を調整

9.完成

完成です。

完成

10.まとめ

水滴を作ることはあまりないかもしれませんが、今回使ったぼかしツール等は人物等のレタッチでも使ったりしますし、レイヤースタイルのドロップシャドウ等はPhotoshopで作るタイプのロゴではよく使います。「コレをこうしたらこうなる」というように慣れることは作業効率を上げることですごく大事なことです。水滴なんて作らないなんて言わないで試してみてください!

テラ合同会社(東京都)

テラは2014年に東京都でスタートアップしたホームページ制作会社です。ホームページ制作以外にも広告運用、マーケティング、ブランディング、印刷物など幅広い領域をサポートしています。
コーポレートサイトはこちらをご覧ください。