個別記事のページです

2015年6月18日(木)
このエントリーをはてなブックマークに追加

シンプルなグラデーションのバリエーションについて

今回はシンプルな白とグレーでのグラデーションの
作り方をご紹介します。
まずはもっともスタンダードな形はこれでしょうか。
ドロップシャドウをかけてボタンっぽくしています。
スライダーはちょうど真ん中くらいで、柔らかくカーブしている立体感がでます。
0618_1.jpg

二つ目は、スライダーの色の位置だけ動かしています。
二つとも真ん中に寄せることで、中間色の部分がほぼなくなり、
シャープなイメージのボタンになります。
0618_2.jpg

3つ目は色のスライダーを一つ足しました。
Altキーを押しながらスライダーを動かすと、
コピーされて同じ色のスライダーを追加することができます。
中央部分に光が当たっているようなボタンになりました。
0618_3.jpg

こちらは上のものと色を反対にしました。
こうすると使っている色は同じですが、
光の当たり方が変わって見えてマットな感じに見えます。
0618_4.jpg

最後は、一番最初のグラデーションの色の上下を逆にして、
効果をドロップシャドウから光彩(内側)に変更しました。
地の部分からへこんでいるように見えます。
0618_5.jpg

簡単なグラデーションでも少し変えてみると
様々な立体感や効果を出すことができます。
これだけでもデザインの雰囲気が変わってきますので、
ぜひ色々と試してみてください!
書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。
お問合せ