メニュー

【Photoshop CC】Webサイトのボタン素材の作り方

ブログ_メインビジュアル

こんにちは。
昨年は中吉、今年は大吉をひいたwebデザイナーの山本です。
金運がよい年だそうです。本気だします。

さて、今回はPhotoshop CC(2017)を使ったボタン素材の作り方を2つご紹介します。

フラット系

btn_sample_01

まずはフラット系からご紹介。
制作過程を簡単に表すと以下の画像のようになります。

blog_btn01_gif

過程がわかったところで、詳しくは文章でどうぞ。

  1. 300 × 70pxの白シェイプを作成
  2. 5pxの角丸を設定
  3. レイヤースタイルを設定(パターンはこちら。個人・商用利用可)
  4. 別の300px × 100pxの白シェイプを用意
  5. 塗りを25%に設定
  6. レイヤーマスクを追加し、グラデーションツール(白黒・線形)で右側を透過させる
  7. 斜めに傾ける
  8. 最初に作成したシェイプにクリッピングマスク
  9. 文字を追加する

横にグラデーションをつけることで、立体感は出さずに色鮮やかなデザインに仕上げました。
また、境界線も単色ではなくグラデーションを使って、ボタンが埋もれないようかつ浮きすぎないように気をつけています。

続いてポップ系デザインの作り方をご紹介します。

ポップ系

btn_sample_02

まずは作り方のざっくりとした画像をどうぞ。

blog_btn02_gif

そして説明をどうぞ。

  1. 300 × 80pxの白シェイプを作成
  2. 40pxの角丸を設定
  3. レイヤースタイルを設定(パターンはこちら。個人・商用利用可)
  4. 別で白円シェイプを用意
  5. ぼかし(ガウス)1.5px程度でぼかす
  6. 配置
  7. 文字を追加する

こちらに関しては、先ほどのフラット系のボタンとは逆で、グラデーションを縦に入れて立体感が出るように仕上げました。
さらに明るい境界線や光の玉を加えて、よりプルッとした感じを表現。

光の玉があるのとないのでは大きく違って見えますね。
btn_sample_02_2

余談ですが、レイヤースタイルの中でグラデーションオーバーレイの下にもう一つグラデーションオーバレイの単色を置いていますが、これはパターン画像の色を変更するために追加しています。

btn_hosoku

オブジェクトを塗り0%にしてパターンを追加してラスタライズしてクリッピングマスク…というやり方等もありますが、今回はレイヤーを増やさず作成する方法にしています。
もしかすると、この方法よりもっといい方法があるかもしれませんのであくまで一つの作り方として参考にして頂けると幸いです。


どちらのボタンもそうですが、Photoshop CCになってから境界線やシャドウ、ドロップシャドウ等が複数設定できるようになったので、装飾するのがとても便利になりました。
今までボタンの枠や文字をデザインするのに、オブジェクトをいくつか重ねて作っていた方もこの機能は重宝しているのではないでしょうか。

弊社のWeb部門では最近ゲームサイトやキャンペーンサイト等も作成すること多いので大変重宝しております。

ただ、Photoshop CCで作成したデータをお渡しすることがある場合は、相手がCCをもっていないと表示崩れが起こる可能性もあるので気を付けてくださいね。

ちなみに、以前作成したボタンの記事もありますので、ぜひこちらも挑戦してみてください。

以上、いかがでしたでしょうか。
さらにアレンジでも加えて頂ければ、今度はそれを私が参考にさせて頂くことで世の中うまく回るかと思いますのでぜひご活用頂ければと存じます。

閲覧頂きありがとうございました。

この記事をシェアする

  • twitter
  • facebook
  • Google+
  • B!はてブ
  • pocket
トップへ戻る

CONTACT

ゲーム開発、Webサイト制作に関するご相談等ございましたら、お気軽にお問い合わせください。

ゲーム開発に関する
お問い合わせはこちら

Webサイト制作に関する
お問い合わせはこちら