光沢のある綺麗なボタンを作る
今回も前回とよく似た光沢のあるボタンを作ってみる。
今回はボタンを作るのがメインではなく、光沢感を出すためのグラデーションの一つとしていつでも使えるようになってもらうのが目的。
ではどうぞ。。
１．ベースボタンを作る
説明するまでも無いがまずはボタンを作る。
矩形シェイプにドロップシャドウをかける。
色は今回は何でもよい。
２．光沢感を入れる
次にボタンに効果をつける。
ここが今回のメイン。
グラデーション効果を入れる。
Web2.0風ボタンのときに説明したけれど、
光沢感を出すには反射している感じを出すためにグラデーションの段階を途中で大きく変える。
説明しにくいのこんな感じ。
でもって、ボタンはこんな感じになる。
これだけでも光沢感があるけれど、今回はもう一手間加えよう。
直接当たる光のほかに反射してくる光の影響も考えるとちょっとリアルになる。
どういうことかというと、今回は上から光が当たっているので床からの反射を考えて反対側にちょっとだけ光を入れる。
こんな感じ。
で、それを反映したボタンがこれ。
わかりやすいように、並べてみた。
少しの違いだけれど大きな違い。
こういった微妙な部分が決定的な差になるのでぜひ身に着けよう。
３．おまけ
今回はいろんな色でグラデーションを作ってみた。
それがタイトルの画像。
さらに、それをグラデーションファイルとして保存したのでよかったらダウンロードして使ってください。
MaterialandExでボタンも配布しているのでよかったらどうぞ
