ファンタジーっぽいボタンの作り方【 UI制作 】

ファンタジーっぽいボタンの作り方【 UI制作 】 Photoshop
さくらもち
気分転換にブログでゲームっぽいボタンを使ってみたいな~
ウサギさん
ファンタジーゲームにありそうなボタンとかかっこいいよね……♪
モチ
こねこね、こねこね
ウサギさん
モチは何作ってるのかなぁ?
モチ
ぼたもちつくってるよっ
ウサギさん
……ぼたんもち……

こんにちは、かがみ( @cony_tas )です!

昨今のWebデザインといえばフラットやマテリアルデザインが多く採用されていますが、たまにはゲームっぽい立体感のあるボタンを作ってみませんか?

本記事ではゲームの中でもファンタジーっぽいボタンの作り方をご紹介しようと思います!

 記事でわかること

  • ・ファンタジーっぽいボタンの作り方

 記事の信頼性

筆者のかがみ@cony_tas )はWeb/UIデザイナー歴8年になります。
ゲーム会社でさまざまなWebサイトやゲームUIを制作しています。

ファンタジーっぽいボタンの作り方

それでは早速ファンタジーっぽいボタンの制作工程を、画像を交えて説明していきます!

装飾デザインやディテールに時間をかければかけるほど良いものはできますが、今回は割とさくっとできる作り方なので画像の通りに一緒に作ってみましょう♪

ボタンのベースを作る

Photoshopで新規ドキュメントを作り、ボタンのベースになる角丸のシェイプを作成してください。

ベースの色は後で変更できるので、とりあえず適当で大丈夫です。

ボタンのベースを作る

次にボタンのベースの上部からグラデーションで色を重ねて少し発光させます。

この時、描画モードは「覆い焼きカラー」にします。発光具合は色や透明度で調整してみてください。

ボタンのベースにグラデーションを重ねる

ボタンのベースシェイプを選択し、レイヤースタイルで「光彩(内側)」を適用して下の画像のようにオーバーレイで光彩をいれます。

ボタンのベースに光彩を入れる

続けてボタンのベースの上からグラデーションをオーバーレイで重ね、ボタンの中央でカラーの彩度や明度が切り替わるような感じにします。

ボタンのベースにさらにグラデーションを重ねる

さらにボタンの下からグラデーションを覆い焼きで重ねます。笑

ボタンの下からグラデーションを重ねる
さくらもち
なるほど~、沢山レイヤーを重ねて作るんだね!

これはまだまだ少ない方で、本格的に作るならボタンの質感をアップするためにさらに何枚もレイヤーを重ねていきますね。

でも今回は一旦このくらいにしておきます。笑

装飾を加える

ボタンのベースができたら、次に装飾を作っていきましょう。

まずは、ボタンの中にオーバーレイやソフトライトで装飾をうっすら重ねます。

ボタンの中に装飾を重ねる

ここで使う装飾はフリー素材を使ってもいいですし、自前で制作する場合は下記の記事もご覧ください。

飾り枠の素材を簡単に作る方法!

飾り枠の素材を簡単に作る方法!【 Photoshop 】

2020年3月27日

次にボタンの外側にボーダーを加えます

ボーダーを加える方法はいくつかありますが、簡単なのはレイヤースタイルの境界線です。ボタンのベースに境界線を3~4px加えましょう。

その際、塗りつぶしタイプを金色のグラデーションにすると下の画像のようなボーダーになります。

ボタンの外側にボーダーを加える

そろそろ完成も近づいてきました。

今度はボーダーの上に重ねるように、装飾を加えます。装飾の配置で見た目がけっこう変わりますが、今回はボタンを囲むように4墨に配置します。

ボタンの外側に装飾を加える

最後に質感アップのためにテクスチャや色をうっすら追加して、キラキラのエフェクトも入れてみます。

ボタンの仕上げ

ファンタジーっぽいボタンの完成です!

短時間で作りましたが、なかなか良い感じに出来上がりました。笑

完成

せっかくなので、ファンタジーっぽい背景にボタンを配置してみます♪

ボタンの完成

ブログの中で使うにはちょっと違和感があるかもしれませんが……ファンタジーっぽいボタンを作りたいなと思った時に、参考にしていただければ幸いです。

最後に:ファンタジーっぽいボタンの作り方

今回は、ファンタジーっぽいボタンの作り方をご紹介しました!

普通のWebサイト制作ではなかなかこういったボタンは作らないかもしれませんが、ゲーム系サイトならマッチするかもしれませんので、もし制作することがあれば参考にしてみてください♪

今後もUI制作シリーズとして、色々なUIパーツの作り方をご紹介しようと思っています。

それでは、今回はこの辺で!

モチ
いつも遊びにきていただいて、ありがとうございますっ