Photoshopでいろんな影を作ってみた。～基本編～

2014/10/29 webデザインやってみた , Photoshop

WEBデザインは平面の世界。
そんな平面の世界で「浮き上がっているように見せたい」とか「ポチッと押したくなる立体的なボタンにしたい」とか、ワンポイントを加える際にとっても効果的な"影"。

今回作成してみたこちらの画像、ろうそくやキャンディが浮き出ているように見えたり、こうもりが飛んでいるように見えたりする…と思います。
この画像もいくつかの"影"を使ってメリハリを付けてみました。

今回は"影"の付け方～基本編～と題して、Photoshopでの"影"の付け方について書いていきたいと思います！

【"影"の付け方その1】ドロップシャドウで付ける！

THE！"影"界のプリンス「ドロップシャドウ」。
一番簡単！で早い！影の付け方の1つです。

まずはベースとなる画像。
角丸長方形を4個配置しています。
それぞれの角丸長方形にドロップシャドウを付けて、立体的にしようと思います。

紫の角丸長方形にドロップシャドウを付けます。
レイヤーパレットから「紫のシェイプ」を選択し、右クリックします。

「レイヤー効果」をクリックします。
クリックすると、下図の「レイヤースタイル」ウィンドウが開きます。

左の一覧から「ドロップシャドウ」を選択し、ドロップシャドウの各種設定を行います。
各種設定が完了したら、「OK」をクリックします。

※今回はデフォルト値で設定することとします。
※右列下にある「プレビュー」にチェックを入れておくことで、作業画面にて設定過程の確認ができます。

■ドロップシャドウの詳細設定
①：描画モードと不透明度の設定ができます。
ドロップシャドウの色味を変更するには、描画モード右の四角の部分（上図では黒の四角）をダブルクリックします。

②：ドロップシャドウの角度（左下や右上など）や画像とドロップシャドウの距離、サイズなどを設定できます。

③：ドロップシャドウの画質設定を行います。

…すると…！じゃじゃん！
紫の角丸長方形にドロップシャドウが付きました。
他の3つの角丸長方形も上記の作業を繰り返して行ってドロップシャドウを設定していくと下図のように全ての画像にドロップシャドウが付きます。

↓　↓　↓

角丸長方形全てにドロップシャドウが付き、立体感が出ました。

「紫以外の角丸長方形にドロップシャドウを付けるには、紫の角丸四角形と同じ作業を繰り返す」と先述しましたが、実はもっと簡単な方法で紫の角丸長方形と同じドロップシャドウを付けることができるので補足します。
この手法はドロップシャドウだけではなく、他のレイヤー効果適用時にも使用できますので、覚えておくと便利です！

■レイヤー効果の複製方法…1