Web制作

デザイン初心者が感動する!Photoshopロールオーバーボタンの作り方

  • このエントリーをはてなブックマークに追加
  • LINEで送る

はじめまして。

最初に使ったPhotoshopのバージョンは5.5。
それから大いなるブランクを経て、Webデザイン歴3年目の松下です。

最近、新人教育を始めたんですが、自分が初心者だった頃の新鮮な感動を思い出す場面もたくさんあります。
今回は、そんな作って感動できるデザイン代表、ロールオーバーボタンの作り方をご紹介します。

設定の数値なども参考に書きますが、自分流にアレンジしながら楽しく作ってみて下さい。

(1) 角丸長方形のシェイプを作る


サイズはこれくらい。(100%表示)
w:240px、h:60px、角丸:6px で作成しました。

(2) レイヤースタイルを追加していく


こんな感じにするため、レイヤースタイルをつけていきます。
レイヤースタイルを適用するには、レイヤーパネル下部にある「fx」をクリック!
これです
今回設定するレイヤースタイルは以下の通り。

  1. グラデーションオーバーレイ

    「グラデーション:」の色の部分をクリックすると

    グラデーションが作れます。
    下の段のスライダーをクリックで選択すると「カラー:」の項目に色が入り、さらにその色をクリックで色の変更ができます。
  2. 境界線
    少し濃いめの1pxがおすすめ。
  3. ドロップシャドウ
    角度は90度が個人的に好き。

レイヤースタイルは、慣れるまでは試行錯誤するだけでけっこう時間がかかります。
今回のボタンはさりげない立体感にしたかったので明度のグラデーションにして、ボタン自体の色が濃いのでくどくならないようシャドウは薄めにぼわんとしてみました。

(3) テキストをのせる


クセのないフォントがおすすめ。
サイズは18ptにしました。

(4) 矢印アイコンを作る


今回は、●に>をのせました。

さてボタンができました。

押したいですよね?
押せるようにしましょう。

(5) マウスオーバー時のボタンを作る

今作ったボタンの各レイヤーはひとつのフォルダにまとめ、まるごと複製します。分かりやすい名前を付けましょう。
片方のフォルダを非表示にして、もう一方を編集していきます。
こちらを編集。

まず、角丸長方形のレイヤースタイルを

  • グラデーションオーバーレイ:逆方向
  • ドロップシャドウ:非表示もしくはなし

にし、
次にテキストと矢印アイコンのレイヤーを1px下に移動します。

これをそれぞれフォルダごとに書き出し、
ロールオーバーさせると・・・

(6) 完成!


押せた!
普段何気なく使っているUIでも自分で作れると感動ですよね。

今回作ったのはコテコテのボタンですが、最近はもっとシンプルでスマートなボタンが当たり前になっています。
フラットなものやゴーストボタン、マテリアルデザインなど・・・
デザインは変わっても、「押してみたい」と思わせるボタンを作り続けたいものです。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

ブリッジコーポレーションへの
お問い合わせはこちらから

この記事を書いた人

松下

デザイナー。 デザイン以外にも動画、DTP、コーディングなど少しずつかじってます。 Webのかっこよさやワクワク感をお届けしていきたいです!