【Photoshop】おしゃれなボタンを自分で作る方法|ブログやサイトで使える!?

DESIGN TOOL

こんにちは!nya(@nyaaalog99)です。

おんなのこ
おんなのこ

ゲームっぽいボタンを作りたい

本日はこんなお悩みを解決していきます。

今回はスマホゲームなどに出てきそうなボタンをPhotoshopを使って作る方法をご紹介していきます。

nya
nya

こんなやつです!

ブログのボタンやWebサイトのボタンに使えそうですね。

一見作るのが難しそうに感じるかもしれませんが、意外と簡単に作れちゃうのでチャレンジしていきましょう!

Photoshopでおしゃれなボタンを作る方法

今回は以下の環境で作成していきます。

  • OS:mac
  • ソフト:Adobe Photoshop

では早速ボタンを作っていきますね。

今回は以下の手順で作っていきます。

  • 新規ドキュメントで土台を作る
  • 飾り付けをする
nya
nya

2ステップです!

では一緒に作っていきましょう!

新規ドキュメントで土台を作る

まずはPhotoshopを開いて新規ドキュメントを作成します。

ボタンの土台となる「角丸長方形ツール」でシェイプを作ります。

色は後からでも変更できるのでとりあえずの色でもOKです。

次にグラデーションで色を重ねて立体感を作っていきます。ポイントは上が明るくなるようにすることです。この時に描画モードを「覆い焼きカラー」にしておきます。

さらにレイヤースタイルで「光彩(内側)」を適用します。

そして、グラデーションをもう一度「オーバーレイ」で重ねます。比率を下げて境目がくっきりするようにします。

本格的な本物のボタンはレイヤーをたくさん重ねて作っていきますが、今回はこのくらいにしておきます。

飾り付けをする

ボタンの土台ができたら次は装飾を作っていきましょう。

今回は、丸いシェイプを薄くのせます。

複雑なシェイプを作って重ねたい場合は下記記事を参考にしてみてください。

【Photoshop】おしゃれな飾りを自分で作る方法|様々な応用がきます
おしゃれな飾りをバナーやアイキャッチで使いたい人!実は、Photoshopでサクッと作ることができるんです。シェイプを使って作っていくのでWebデザイン初心者さんは曲線の練習にもなります。また、ゴージャスな飾り以外にも自分の好みの飾りを作ることもできるのでぜひ挑戦してみてくださいね。

今回は、上記の方法で作ったシェイプと角丸長方形を使って作った枠を重ねます。さらに、ゴールドカラーのグラデーションオーバレイとベベルとエンボスを追加します。

実際に使ってみるとこんな感じです。

nya
nya

ゲームのダウンロード画面を再現してみました

まとめ:Photoshopでおしゃれなボタンを作る方法

いかがだったでしょうか。

今回はゲームに出てきそうなボタンを自作してみました。

実際に押したくなるボタンを作るにはレイヤースタイルを重ねて重ねて・・という作業をしなければいけません。

ここら辺の感覚は慣れだと思うので練習してみてくださいね。

もちろん違うテイストのボタンを作ることも可能なので挑戦してみてくださいね。

コメント

タイトルとURLをコピーしました