Photoshop水面

ゆらゆらゆれる水面をPhotoshopで表現してみよう!


イラストの背景や、ちょっとしたアクセントに使える、
ゆらゆらきらめく水面の表現方法です。
色を変えるだけで色んなシーンに使えて汎用が効きますよ!
様々なフィルターを重ねるのでちょっと難しいように思えますが、
どんどん波紋の形が出来ていく工程が楽しいです!

まずは背景の色を決めよう!

それでは実際に描いていきましょう。
(Photoshop CS6を使用)

Photoshopを開き、ファイル→新規で、画像のような設定にします。

01

700×700ピクセル 解像度 72ピクセル
解像度は印刷物の場合は300程度あったほうが安心です。
72は主にWEB画像などに使われています。

今は透明のキャンバスなので、水面の背景となる色を決めます。
今回は水色~青っぽいグラデーションにします。
砂浜っぽさを出す場合は、肌色~水色のグラデーションにするとそれっぽくなります。

02

グラデーションツールで青のグラデーションを作ったら
新しいレイヤーを作り、描画色と背景色を白と黒に変更し

フィルタ→描画→雲模様1 をかけます。
ここの模様で波紋の形が決まりますので、色々と試してみてくださいね!

フィルターを重ねていこう!

ここからどんどんフィルターを重ねていきます。

フィルター→フィルターギャラリー→アーティスティック→パレットナイフ
設定は画像の通りです。

17

ストロークの大きさ50
ストロークの正確さ3
線のやわらかさ0

適用するとこんな感じになります。

04

まだこの時点ではぼんやり…ですね。
ですが、この後から水面の模様が出てきますよ!

次に、フィルター→表現手法→輪郭検出。

05

すると…波紋が出来てきました!
まだまだ続きます。

自動選択ツールで、許容値0、アンチエイリアスのみチェックし、
波紋の白い部分をクリック、Deleteキーで白の部分を消します。
許容値を上げると薄い線が消えるので、大きめの波紋になります。

06

何か気持ちが悪いですが…この後きちんと処理します!

イメージ→色調補正→レベル補正で、画像のような設定にします。

07

すると、真っ白な波紋になりました!
(一部黒いですが、目立たないのでそのままにしています。)
このままだとギザギザが目立つので…
指先ツールを使い、~~~~ と、波線を描くように、上から下までぼかしていきます。
設定は画像の通りです。

08

大き目のブラシで、硬さは0%。強さは10%~20%くらいのお好みで!
今回は150px、硬さ0%、強さは10%に設定しています。
~~~~と横にぼかしても、縦にぼかしてもまた雰囲気が違いますので
自分好みに色々と試してみてくださいね!

 

だんだん水面っぽくなってきました!あと少しです!
消しゴムツールで、直径100px(目安)、硬さ0で、所々ポンポンと消していきます。

09

レイヤーモードを変更しよう!

ずっと波紋を描いてきたレイヤー2の

レイヤーモード「通常」「オーバーレイ」に変更します。

10
これだけだとまだ寂しいので…
レイヤー2を、新規レイヤーのボタンのところにドラッグし、
同じレイヤーを作ります。(レイヤー2のコピーと出ます)

18

波紋の色が濃くなりました!

次は波紋の下の影を作ります。
再度同じレイヤーを作ります。(レイヤー2のコピー2)

波紋の下の影なので、レイヤーをドラッグし、
グラデーションの上(下から2番目)にレイヤーを移動
します。

イメージ→色調補正→階調の反転。

そのまま続けて、編集→変形→90度回転(時計回り)。

11

影が出来ました!このままだと上が暗すぎるので、
消しゴムツールで少し上の部分を消します。
これでもまだ影が強い感じがしましたので、
フィルターぼかし(ガウス)で3.0pxくらいぼかします。

12

これでゆらめく水面の完成です!

 

この後はお好みですが…、
画像を統合し、自由変形遠近法 を使うと、より奥行きの出る水面が出来ます!
フィルターのジグザグを合わせて使うと、リアルな水面の出来上がりです♪

14

フィルターの回数や、レイヤーの数を増やしてみたり…
よりリアルな水面を目指してみて下さいね!

グラデーションを肌色~青にしたものや、エメラルドグリーンに変更したもの。
色を変えるだけで随分と雰囲気が変わりますよ!

1519

 

まとめ

フィルターを何度も重ねるこの作り方は、
フィルターの適用回数、各ツールの設定数値によって
全く違う形の波紋が出来ていきます。
今回の記事通りに作っても、雲模様のパターンが適用ごとに違うので
オリジナルな水面が出来上がります。
色々と設定を変えてみるのも、この作り方の醍醐味です。ぜひ作ってみてくださいね!

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


shica

写真加工でのグラフィックデザインを得意としています。 通販の広告代理店に4年ほど勤務。現在は本職看護師、副職デザイナーとしてコツコツ制作しています。http://shicaweb.com/

Next Article視線をキャッチ!人目を引くバナーをデザインするコツまとめ