ホームページが浮き上がって見える影をつける-PS

ホームページでよく見かけると思いますがホームページが浮き上がって見えるような影をつけていきます。やり方はさまざまですので今回紹介する以外にも色んな作成方法が有ります。今回の作り方は影にする部分をグレー系の色にしてそれをフィルターのガウスと言うぼかしの機能を使い影を作って行くやり方をします。

前回作っておいたシェイプ1の所で右クリックしてレイヤーを複製をクリックします。

するとレイヤーを複製画面が出てきますのでそこの新規名称に影と入れておきましょう。ちなみに各レイヤーの名称は各レイヤーの名前の所をダブルクリックして変える事も出来ます。

レイヤー影のレイヤーサムネールをダブルクリックします。

するとベタ塗りする色を選択画面になりますので#555555ぐらいのグレーの色を選択してOKを押します

これでレイヤー影がグレー系の色に変わりました。ここで今回は次にするぼかしの変化が分かるように画像を拡大しておきます。ガイドラインが両端に10px分設けて有りますがそれが見えるぐらいにします。ズームツールを選んで300%ぐらいまで拡大すると見やすくなると思います。

それでは次に上部メニューのフィルター-ぼかし-ぼかし（ガウス）をクリックして下さい。

するとレイヤーをラスタライズしますか?と言う警告が出ます。OKを押してラスタライズしてください。ちなみにラスタライズにするとは画像は色んな形式で画像に見えるようになっているんですがドットと呼ばれる点の集合体が集まり画像化しているラスタライズ形式に変えて一つの画像に変換されます。

ぼかし（ガウス）でプレビューにチェックを入れ半径を3pxにします。すると影の端がぼかされます。OKを押してぼかし処理を完了します。ちなみにガイドラインを両サイドに10px設けてたのはガウス処理をした時このように影が少しはみ出すため10pxの余白を設けています。影をもっとハッキリしたい場合はグレーの色を濃くしたり10pxの余白部分を事前に広く設けたりすればもっとハッキリした影を作れます。

ズームツールで今度はピクセル等倍(100%)にして下さい。その画面が実際ホームページで見える画面になります。この時点では画面がグレーになっているだけでまだ浮き上がっているようには見えません。
次にレイヤーの移動を行います。今の時点ではレイヤーが下から背景・シェイプ1・影になってますが、これは下に背景の画像がありその上にシェイプ１の画像を載せて又その上に影の画像を載せているような感じになっているのです。影はシェイプ１の下にあったほうがいいので下に移動します。移動の仕方はレイヤー影をシェイプ1と背景の間にドラッグして移動するだけです。