個別記事のページです

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の常識
過度な営業は一切しておりません。

簡単無料お見積もり

問い合せ内容 見積り  相談  更新管理  PPC広告・SEO対策
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
内容
お問合せ