Phtooshopで綺麗な水滴をデザインする方法

Phtooshopで綺麗な水滴をデザインする方法


写真やイラストに雨などの水気や新鮮さ、みずみずしさの効果を加える
パーツとして用いられる「水滴」。この水滴を綺麗に、かつ簡単に
作成する方法をご紹介します。
自在に水滴を作ってデザインパーツにしましょう。

基本:楕円形の水滴を作成する

水滴を作成する、というと絵を描く技術が必要なのでは?と思われる
かも知れませんがレイヤースタイルを使えば好きな形を水滴にする
ことができます。

手順1.楕円形のレイヤーを作成する

ベーシックな水滴、楕円形の水滴を作成します。
楕円形の描画はシェイプやブラシなど任意の方法で構いません。
今回はブラシを使って作成する手順をご紹介します。

手順:
1.水滴の背景となる画像をPhotoshopで開き、開いた画面の上に
新規レイヤーを作成します。(Shift+Ctrl+N)
メニューバーの[ウィンドウ]からレイヤーパネルを表示して
おきます。
2.新規レイヤーをアクティブにし、ツールボックスのブラシを
クリックし、ハード円ブラシを選択します。
水滴のサイズに合わせ[直径]でサイズを調整し、不透明度100%の
黒(#000000)の円を描きます。

 

楕円形のレイヤーを作成する

手順2.レイヤースタイルで加工する

黒で表示された円を水滴に見せるためレイヤースタイルで加工します。
水滴の特徴である「透明」「球状の立体感」「(接地面との)影」
「みずみずしい輝き」の効果を加えていきます。

1.円を描いたレイヤーをアクティブにし、レイヤーパネルの
[レイヤースタイルを追加]をクリック、[レイヤー効果」を選択します。
[レイヤー効果]の[高度な合成]項目にある[塗りの不透明度]を0に
し、円を透明にします。(一時的に円が見えなくなってしまいますが
そのまま続けてください)

レイヤースタイルで加工する

2.「べベルとエンボス」をダブルクリックし、球状の立体感と光沢を
出します。構造は[べベル(内側)]を選びます。
[サイズ]はハイライトのサイズとなり、値が小さいほど光沢のラインが
細くなり平べったく、数値が大きいほど光沢が丸みを帯びます。
(度を越すとラインではなく円になってしまうので注意)
この光沢のラインの濃さや色は[陰影]の「ハイライトのモード」・色
不透明度が投影されます。
「シャドウのモード」は白の「スクリーン」にして影ではなく
ハイライトと向かい側の境界線にします。

レイヤースタイル(べベルとエンボス)

3.[シャドウ(内側)]をダブルクリックし、黒の「オーバーレイ」
にします。(背景色によっては黒や背景色の「乗算」の方がより
自然な場合もあります)

レイヤースタイル(シャドウ(内側))
4.[ドロップシャドウ]をダブルクリックし水滴と接地面に影を
作ります。水滴の内側に付けたシャドウと同様のモード・色の
設定に合わせます。(本例の場合、黒の「オーバーレイ」)

レイヤースタイル(ドロップシャドウ)
5.レイヤースタイルの設定が終わったら[OK]をクリックして
完成です。

レイヤースタイルの汎用化

水滴加工を行うレイヤースタイルを他のレイヤー、他の画像に適用
したい場合は「レイヤースタイルをコピー」や「アクション」保存が
便利です。

【レイヤースタイルをコピー】
加工を行ったレイヤーをPhotoshopに開いているのであれば、
レイヤーパネルでスタイルをコピーしたいレイヤーを右クリックし、
[レイヤースタイルをコピー]し、[レイヤースタイルをペースト]で
コピー先に適用できます。

レイヤースタイルをコピー

 

【アクション保存】
[ウィンドウ]→[アクション]パネルを開き、加工手順を記録しておけば
加工を行った画像が閉じた状態、または破棄をしても水滴加工用の
アクションとして同様の加工を行えます。

アクション保存

 

応用(1):たくさんの水滴が散っているようなデザイン

基本編では一つの楕円をレイヤーにし、レイヤースタイルで水滴
加工を行いましたが、ブラシでたくさんの楕円を散布させて
レイヤー化すればたくさんの水滴が散っているようなデザインに
することができます。
水滴化するレイヤースタイルは一つの楕円の時と同じ手順です。

散布ブラシで飛び散る水滴

応用(2):テキストレイヤーを水滴化するデザイン

フォントやシェイプも作成するとレイヤーとなりますので、
水滴加工のレイヤースタイルを適用すれば水滴加工することが
できます。
フォントを水滴デザイン

デザインするときのポイント
フォントは線種が丸く太めのものが使いやすいです。
「ゆがみ」などでアクセントを加えるとより水らしくなります。
※フォントやシェイプはそのままレイヤースタイルを適用することが
できますが、「ゆがみ」などの加工内容によってはラスタライズが
必要です。

まとめ

いかがでしたか?
水滴の加工はレイヤースタイルで加工を行っていますので好きな形で
行えて、直接背景となる画像に描画した訳ではないので動かしたり、
変形させたり、背景画像を変えたり、汎用性の高い加工です。
ぜひ、いろんなアレンジを加えてみてください。

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

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

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


Next ArticleWordPressでブログを始める20のメリット