| chapter 1 modeling［立体感］ |
02 ボタンやバナーなどへグラデーションを施す
制作・文＝大須賀政裕（oskadesign）
technique1 グラデーションをかけたメニューボタン
グラデーションでメニューボタンに立体感とインパクトを出すことは、ビジュアルの向上だけでなくユーザビリティの観点からも有効な手段だ。デザインコンセプトに合わせ、インパクトとスマートのバランスをとることが重要だ。
【1】FireworksやPhotoshopを使って、グラデーションをかけたメニューボタンを作成しよう。まずは、ビビッドな水色の下地を作成する。次に、グラデーションの方向と範囲を決める。
【2】グラデーションの色を変えていく。ここでは、立体感を出すために、上部を明るめに下部を暗めにする。さらに、一味違ったインパクトを出すために、上部には若干の黄色を加えている。この際、HSBつまみで調整すると便利だ。
【3】グラデーションができたら、下地の上にテキストを記載しよう。ドロップシャドウなども合わせて使うとより立体感が増す。暗部をさりげなくするとスマートになる。同じ方法でほかのメニューも作成しよう。
［INDEX］
chapter1-02 ボタンやバナーなどへグラデーションを施す
>>> technique 1 グラデーションをかけたメニューボタン
>>> technique 2 アイコン入りのバナーに施すグラデーション
chapter3-05 バランスをとって文字や文章を並べる
>>> technique 1 行幅の制限や疑似的な段組みの表現
>>> technique 2 グリーキングで文章と余白のバランスを確認
