グラデーションとドロップシャドウ

   

Macを使っている人は、業界の人(芸能界じゃありません)の人が多いので、私のようなド素人が解説するのは恥ずかしいのですが、Photoshopとか、PhotoshopElementとかを使い始めた人の参考になればいいなと思って書きます。


今回、blogのリニューアルで一番悩んだのが、タイトルを表示するbackgroundのバーでした。
久しくPhotoshopを使い込んでいなかったので大変でした。(^^ゞ

タイトルバー
どういうものにしようか、なかなか良いイメージが浮かばずにネットサーフィンしながらAppleのサイトを見ていたところ、この部分が目にとまりました。

Appleサイト
立体感と透明感のあるバーですね。

拡大図
観察したところ、こういう風に、色の濃い部分と白い部分がミックスされて作られているのが判りました。
あとは、試行錯誤を繰り返して、グラデーションをかける、失敗するの繰り返し・・・


Webの世界は、言うまでもなく平面です。
それを立体的に見せるには、目の錯覚を利用します。
その代表的なのがドロップシャドウですね。
最近少しずつサイトをリニューアルされているAppleStyleさんから拝借学んでみましょう。
Apple-Style
左右どちらかの縁を見ると解ると思いますが、こういう風に影を付けることで中央を浮き上がらせて立体感を演出しています。
つまり、自然界では、光が当たる上の部分は明るく、光が当たらない下の部分は暗くなっています。
ですから人間の脳は、明るい部分=上、暗い部分=下と認識します。
これは、太陽の光が常に上から注いでいることに起因します。
そういう錯覚というか、経験則上の脳の働きを利用して浮き上がらせて見せているわけです。
(根拠はありません、多分そうだと思って書きました)


映画や写真でもそうですが、光と影をどう表現するかに勢力を注ぎます。
その光と影を操(あやつる)るのが、こういうフォトレタッチの楽しみでしょうね。
無の世界から何かを創り出す・・・平面から立体を創り出す。
そういう楽しみを教えてくれるPersonal ComputerがMacです。

黒のバー
この黒いのは、iPod nanoに刺激されて、同じような黒の質感を表現したいと思って作ってみました。
気になっているのは、整備済み商品の丸い玉・・・もっと真面目に作らなくては・・・(^^ゞ

 - Appleを語る