グローバルナビゲーションの「溝」を簡単にカッコよく作るTips.
最近、Webデザインのトレンドとか言って、立体的なナビゲーションじゃなくて、平面でシンプルなナビゲーションがトレンド、なんて言う人が多いですね。
で、そうなりつつあるのはわかるんですが、だからといって、今の企業サイトもそうだし、クライアントが全てトレンドを求めてる訳ではなく、テイストは案件によって出し方を柔軟にする事が大事なんです、と思っています。
今回、アップルのサイトのグローバルナビゲーションをマネしてみましょう。 シンプルだけど、拡大してみると案外細かい線が凹凸感を出していて、心地よい立体感を演出してくれています。
ここで大事なのが、「溝」。だと感じました。
地味な存在で目立たないけど、ここもこだわってデザイナーとしてのクオリティを上げてみたいな、と。
新規レイヤーを作り、同じ大きさの「土台」を作ります、塗りはわかりやすく赤で、何でもいいんです。
選択範囲を残したまま「レイヤーマスクを追加」で「土台」の外は黒くマスキングされます。
レイヤースタイルでベベルとエンボスを設定。これだけでOKです。
ペンツールに持ち替え、黒い線で1pxの線を「溝」となる縦線を1本引いてください。
このレイヤーの「塗り」を0％へ。
場合によっては溝がキツすぎる、ということもあるので、そういう場合は、「ベベルとエンボス」の「テクニック」を「ジゼルハード」へ。だいぶ自然な「切り込まれた溝」の質感が出来ました。
