過去の記事>2008年10月

2008年10月31日 金曜日  著者:

レイヤー効果

仕上げ前回はヌルヌルアイコンの土台を作るところまでを説明しました。今回は、Photoshopの「レイヤー効果」を使用して、よりそれっぽく仕上げていきます。

影をつける

前回作った土台に、影をつけてみましょう。「レイヤー効果」の「ドロップシャドウ」を使用すれば、お手軽簡単にサクっと作れてしまいますが、今回はそれにひと手間かけて、ドロップシャドウとはひと味違った影にしてみます。と、言いつつ、まずは「レイヤー効果」の「ドロップシャドウ」を使います。影の元を作るためです。
「ベース」レイヤーを右クリックし、「レイヤー効果」を選択して「レイヤースタイル」パネルを開き(図1.)、右のリストから「ドロップシャドウ」を選択します。
「不透明度」(影の濃さ)を"50 %"に。「距離」(レイヤーから影が離れる距離)を "0 px" にそれぞれ設定し、「OK」をクリックしてパネルを閉じます。
「ベース」レイヤーのまわりに黒い影がうっすらくっついたのが分かると思います。次は、この影を変形させるためにレイヤーとレイヤー効果を切り離します。

レイヤー効果の切り離しと変形

先ほどつけた影「ドロップシャドウ」は、「平べったいものを机の上に少し浮かせて置いた感じ」を表現するには最適ですが、「机の上に球体が置いてある」様な影をつけるのには不向きです。そこで、ここはひとつ自分で手を入れて、多少それっぽくしてみましょう。
平面っぽく見える最大の理由は、レイヤーと影の形が全く同じである、という部分が最大の原因です。まずはこれを解消してみましょう。
影を変形させるために、レイヤーと影を切り離します。影をつけた「ベース」レイヤーを右クリックし、「レイヤーを作成」を選択します。これはレイヤー効果を元にして新しいレイヤーを作成するという意味で、ドロップシャドウに限らず、そのレイヤーに適用されている全てのレイヤー効果が、それぞれ1枚のレイヤーに分離されます(1部2枚のレイヤーに分離される効果もあり)。
適用すると、『「ベース」のドロップシャドウ』というレイヤーが新しくできます(図4.)。このレイヤーを選択して、メニューバーから「編集」の「変形」(ctrl + t)を選択し、変形させます。

四隅と各辺にポインタのついた、変形ツールのケージが表示されます。このポインタをドラッグすることで、レイヤーの形を自由に変形させることができます。今回は上下方向に縮小したいので、上辺のポインタをつまみ、下へドラッグして影を縮めます(図5.)。大きさが決まったらenterキーを押して決定します。このままでも十分といえば十分ですが、せっかくなのでもうひと手間いれてみましょう。

室内の影

今このサイトをご覧になっている方は、おそらく自宅かオフィスか、いずれにしても室内におられると思います。そこで一度試していただきたいのですが、人差し指を机の上に垂直に立ててみてください。指の先で机を真上から押す感じです。で、影を見てみてください。机と指先が接している場所が最も影が濃く、遠くへいく程影は薄くなっていると思います。
太陽光等の強くて1方向からの光の場合はまた別なので、窓から入る太陽の光が机を照らしている様な場合はそうならないかもしれませんが、室内の場合、複数の照明や、壁や机等に反射された「回り込む光」によって影が照らされ、こういう現象になります。理屈はともかく、この「遠くへいく程薄くなる」影を再現してみましょう。

選択範囲をぼかす

まず、先ほど変形させた『「ベース」のドロップシャドウ』レイヤーを選択し、ツールバーから「長方形選択ツール」を選択します。
「長方形選択ツール」で、カンバスの一番上から、影のちょうど真ん中あたりまで選択します。左右は幅いっぱいまでです(図6.)。
選択したら、メニューバーの「選択範囲」の「境界線を調整」を選択し、「境界線を調整」パネルを開きます(ctrl + alt + r)。CS3以前のバージョンにはこの機能がついていませんので、「選択範囲」の「境界線をぼかす」(ctrl + alt + d)を選択して、こちらを使ってください。全く同じ効果が得られます。CS3にもこの機能は残っていますが、適用した結果が以前のバージョンとは違う結果になってしまうので、今回は使わない様にしてください。
ここで、「ぼかし」を"4px"から"5px"に設定します。こうすることで、先ほど作った選択範囲がくっきりしたものでなく、4~5pxぼけた選択範囲になります。
選択範囲をぼかしたら、deleteキーで選択した部分の影を消去します。これで奥へいく程薄くなる影になりました。
先ほどぼかした選択範囲を使用して、メニューバーの「フィルタ」「ぼかし(ガウス)」あるいは「ぼかし(レンズ)」等を使って、奥の影程ぼける状況を作ってもおもしろいかもしれません。

ここでふと気づくと、少し影が左右に大きすぎる気がします。幅をすこし縮めてみましょう。
手順は、先ほど影を上下に縮めた時と全く同じですが、左右に縮めた結果、影が左に寄ったり右に寄ったりするのは都合が悪いので、影の中心から左右に同じ距離だけ縮小してみましょう。先ほどは上辺のポインタをつまんで下へドラッグしただけでしたが、今度は右辺(左辺でもOK)のポインタをつまんで、altキーを押しながらドラッグしてみましょう。するとつまんでいない方の反対側のポインタも、中心から見て同じ分だけ移動すると思います。この手順で左右に少しだけしたら、enterキーを押して決定します。

ところで、「alt」と「中心」、この組み合わせに覚えはありませんか?気づいた方もおられると思いますが、円形の選択範囲を作る時も、中心から選択する場合はaltキーを押しましたね。altキーには「中心」というキーワードが割り振られていると思ってください。また、shiftキーには「直線」というキーワードが割り振られています。移動や変形をする際、このキーワードを頭に入れておくと、どのキーを押しながらドラッグすればどうなるか、直感的に分かる様になると思います。

ベベルとエンボス

ようやく影はつきましたが、まだ全く立体には見えません。ここで「ベース」レイヤーに少し立体感をつけてみましょう。
ここでもやはりレイヤー効果を使います。「ベース」レイヤーを右クリックし、「レイヤー効果」パネルを開きます。左のリストから「ベベルとエンボス」を選択し、各種設定をしていきます(図8.)。「ベベル」というのは押し出すことで、「エンボス」というのは「エンボス加工」の事です。と言っちゃうと身もふたもないのですが、クレジットカードの番号だとか、お札の透かしだとか、あぁいったデコボコの事だと思ってください。「レイヤー効果」の「ベベルとエンボス」も、その名の通り、レイヤーを押し出したりへこませたりしてデコボコを作ります。
設定の内容を見てみましょう。今回は全体的に丸く前面に押し出したいので、「スタイル」を「ベベル(内側)」にします。スタイルを決定したら、次に「サイズ」のスライーダーを右に動かして、全体が丸く見える様になるところで止めます。その次に、「深さ」のスライダーで、出っ張り具合を調節します。あまりしつこくない程度にとどめましょう。
ベベルとエンボスここまで設定すると、浮き出した様に見えると思いますが、前回せっかく作った、底辺の「光だまり」がベベルの影で消えてしまいます。そこでパネル最下部の「シャドウのモード」の下にある「不透明度」スライドバーで、影がほとんど見えないくらいまで下げましょう。同様に、「ハイライトのモード」の下の「不透明度」スライドバーも少し下げて、ハイライトがしつこすぎないようにします。ツルツルのてかりは、こことはまた別に作成するので、ここではあまりハイライトが強くならない様にします。

ここまできたらもう一息です。次回はこれに「てかり」をつけて完成させます。

人気ブログランキング にほんブログ村 デザインブログへ