個別記事のページです

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

ボタンに溝があるように見せる方法

1pxの線2本だけで、ボタンにアクセントをつける方法をご紹介します。

例えばこのように、文字が2段になったボタンがあります。
ちょっと物足りない気がしますね。
0514_1.png

そこで、このように真ん中に1pxの線を2本、
上下くっつけておきます。
色はとりあえずわかりやすいように白と黒にしています。
0514_2.png
そして、配置した2本の線を、
上の線は濃い目のグレーにし、
オブジェクトのモードを乗算にします。
下の線は薄いグレーにし、
オブジェクトのモードをスクリーン、
不透明度を80%にしました。
このモードと不透明度は下に引いたオブジェクトに合わせて
調整してみてください。
0514_3.png
どうでしょう?これだけで少し引き締まった感じがしませんか?

ちなみに、なぜ上が暗い色で下が明るい色かというと、
今回ボタン自体の影が、下についているため、
光源が上にあり、配置した2本の線を溝だと見立てると、
これが自然に見えるからです。
逆にすると...
0514_4.png
なんだか違和感がありませんか?

こういったことも少し意識してデザインをしてみると、
より立体感を持たせることができるかもしれません。
知識としても、活用してみて下さい。
書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。
お問合せ