読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

グラデーションツールでボタン作成

グラデーションツールを使う前に、なぜわざわざグラデーションツールを使って色を塗るのかを理解しましょう。

グラデーション=光と影

ディスプレイという平面の世界に、立体感や質感を出すために光の当たっている部分とそうでない部分(影の部分)をグラデーションの濃淡を使って表現します。これはイラストや絵画を描く場合に、背景の奥行きを出す為に暗い色を乗せて、その部分が奥に向かっていることを表現したりするのと同じです。

しかし、強いグラデーションを付けると却って不自然に見えてしまうので、気をつけて使いましょう。

たまに作例である、違和感のあるボタン
f:id:yachin29:20160202025215p:plain

f:id:yachin29:20160202025210p:plain
上の例は光が当たっている箇所は光が100%=白、当たっていない箇所は0%=黒という極端なグラデーションを使っている例です。このような光の当たり方は実際にはあり得ないので、不自然なボタンに見えてしまいます。
グラデーションツールは使い方が比較的難しいツールなので、しっかりと使い方を覚えましょう。


ただ、現在ではタッチパネルが浸透し、ボタンにあえて立体感を出さなくてもユーザーはボタンを認識してくれる為、フラットデザインやゴーストボタンなどといった、あえて立体感の無いボタンデザインが主流です。

フラットデザインのボタン
f:id:yachin29:20140108104417j:plain

ゴーストボタン
f:id:yachin29:20160202031316p:plain


http://yachin29.webcrow.jp/ps_style.zip