『デザインに困った時』
よくあるサイトデザインで、何となく少ない文字を画像で配置する際に、なんだか貧弱で味気ないってことがしばしばありませんか？
ボタンですね、これってサイトにとってはスゴく重要な位置づけで、ボタンの存在感だけで、見てもらえるページも見てもらえなくなる可能性も否めないと思います。
ここでは、自然にクリックしたくなる、そんなボタンを作ってみたいと思います。
今回はアクアアイコンに挑戦、デザイナーの皆さんがよく使うPhotoshopをわずか2レイヤーで、立体感があり、ツヤめいているような、そんなボタン、アイコンを目指します。
ポイントは「レイヤー効果」のグラデーションと光彩（内側）だと思ってます。
マックが急に英語をしゃべり始め、ボタンに触れたら枠線が付いて、再起動、システム終了が2つになります。
前回アイコンを作った訳ですが、今回、ソフトバンクからiPhoneが発売されるというニュースを聞いて、コレはぜひ、iPhone風のアイコンを考えてみなければ・・・と思って色々挑戦した、条件は相変わらずPhotoshopレイヤーを2つまで。
iPod Touchユーザの僕としては勝手に使命感にかられる。
前回のアクアアイコンに習って、よくあるWEBデザインの「サイドメニュー」のボタンをデザインしてみました。jpgですので、良かったら使ってみて下さい。
特に使っていただけるにあたり、許可はいらないです、ただ、一言メールにてご一報下さい、これらの画像を使って起こりうる問題等には一切責任はおうけ出来ません、ご了承下さい。
Vanishing Pointを使った事例
今までどうもFlashの話題で寄稿させてもらったんですが、今回はPhotoshopの補正テクニックについて紹介しています。
タイトルは『Vanidhing Pointで空間の奥行きを見せる』というもので、138ページに記載されているので、Photoshoperの人たち、そうでない人たちも、是非参考にしてみてください。
マニアックな機能だと思っていたのですが、撮影するとき構図を失敗したときなど、もしかしたら使えるテクニックで、意外と威力を発揮する場面に遭遇したので、そういった経験も基に記事に書かせていただきました。
これを使うと、スカスカの空間に奥行きを与える事が出来たり、ビルをもうちょっと高くする事も出来るんですが、結構慣れも必要なので、一度はコレをみて（笑）練習してみては？とおススメです。
しかし今回は校了まで手こずったな・・・
編集部の方、ご面倒おかけしました。
3ヶ月連続で記事を書かせていただきましたが勉強になりました！ありがとうございます。
最近、Webデザインのトレンドとか言って、立体的なナビゲーションじゃなくて、平面でシンプルなナビゲーションがトレンド、なんて言う人が多いですね。
で、そうなりつつあるのはわかるんですが、だからといって、今の企業サイトもそうだし、クライアントが全てトレンドを求めてる訳ではなく、テイストは案件によって出し方を柔軟にする事が大事なんです、と思っています。
今回、アップルのサイトのグローバルナビゲーションをマネしてみましょう。 シンプルだけど、拡大してみると案外細かい線が凹凸感を出していて、心地よい立体感を演出してくれています。
ここで大事なのが、「溝」。だと感じました。
地味な存在で目立たないけど、ここもこだわってデザイナーとしてのクオリティを上げてみたいな、と。
新規レイヤーを作り、同じ大きさの「土台」を作ります、塗りはわかりやすく赤で、何でもいいんです。
選択範囲を残したまま「レイヤーマスクを追加」で「土台」の外は黒くマスキングされます。
レイヤースタイルでベベルとエンボスを設定。これだけでOKです。
ペンツールに持ち替え、黒い線で1pxの線を「溝」となる縦線を1本引いてください。
このレイヤーの「塗り」を0％へ。
場合によっては溝がキツすぎる、ということもあるので、そういう場合は、「ベベルとエンボス」の「テクニック」を「ジゼルハード」へ。だいぶ自然な「切り込まれた溝」の質感が出来ました。
