ネットショップを運営するに当たって、サイトのページ作りは欠かせません。
そこで、現在、良く使われているデザイン手法を取り上げ、奇麗に見えるセオリーをご紹介したいと思います。
今回はドロップシャドウ編です。使用したソフトはFireworks（CS3）ですが、他のアプリケーションでも考え方は同じです。

ドロップシャドウの付け方

ドロップシャドウは簡単に文字を見やすくする手法としてよく使われます。
しかしながら、Fireworksの初期値は、「真っ黒の幅7」と、物によってはかかりすぎる傾向にあります。
そこで微調整をする方法を考えてみましょう。

まずは下の画像を見て下さい。上の画像が初期値そのままです。下が微調整した物。

上の画像では影に目が行ってしまいます。あくまでも主役はテキスト部分なので、見ている人に「影」の存在を意識させる必要はありません。
基本的なかけ方は、「影」が気にならない程度に、テキスト部分を見やすくする事です。

１：色を変える

テキスト部分を選択したら、プロパティボックスからフィルタ：を選択します。

シャドウとグロー　→　ドロップシャドウを選択して、調整するためのボックスを開いて下さい。（図1）

まずは真っ黒な色を変更します。色の考え方は背景色そのものを「暗く」すると考えて下さい。これで黒より、より馴染みます。
図1の黒色をクリックします。マウスポインタがスポイトになりますので、画面の「基本的なかけ方」の後ろにある四角形のオレンジ色の濃い部分をクリックして下さい。
これで図2の状態になりました。

もう一度、色の設定を行います。今度は変更したオレンジ色をクリックして下さい。すると図3が現れますので、右上の丸い所をクリックして下さい。
図4の「色の設定」ウインドウが現れます。
ここで、背景色であるオレンジを調整します。
暗くするには2つの方法があります。まず鮮やかさを落とします。様子を見ながら大体40～60くらい落として下さい。ここでは40落として200とします。
もうひとつは明るさです。これも確認しながら40～80くらいの間で落としてみて下さい。ここでは64落として80にしました。

この色を色の追加で左のパレットに追加し(省略可能)、ダブルクリックすると適用されます。適用されたものが図5です。少しぼやけた感じですね。

２：適用範囲を変える

ぼやけた感じを引き締めると、自然な感じに近づきます。さりげない感じにするために、ぼかしの範囲を狭くして、幅も小さくします。
また、選んだ色を見た目通りにするため、透明度を100％に設定しました。

これで出来上がりです！さりげない影が出来ました。

ドロップシャドウだけで、あまり効果が出ない場合は、一緒にグロー(外側)か、ストローク(ふち)をつけると効果的です。
色の考え方は同じで、背景色を暗めにした色で、適用範囲を少なめに調整します。
あくまでもさりげなくさりげなく！文章を主役に！を意識して下さい。

トラックバックURL