![見出し画像](https://assets.st-note.com/production/uploads/images/76674242/rectangle_large_type_2_37c85dd9611cf2d19410e23f54365e2d.png?width=1200)
【PS】ファンタジー風ボタンの作り方
こんにちは。ゲームUIデザイナーのはなさくのです。
今回は、Photoshopでファンタジー風ボタンを作る方法についてご紹介します!
![](https://assets.st-note.com/img/1650180971034-NFu516EuuU.png?width=1200)
01|ファンタジー風ボタンの作り方
今回レイヤースタイルの重ねがけを多用しているので、それぞれの設定値はページ下のデータをダウンロードして確認してもらえればと思います。
その上で、ざっくりとした制作フローのみ記載しておきますね!
まずは、ボタンの形状を整え、青から水色のグラデーションをのせます。
![](https://assets.st-note.com/img/1650191798891-4Ic0jMRgpn.png?width=1200)
上記に対してレイヤースタイルで下記を追加します。
・ベベルとエンボス
・光彩(内側)
![](https://assets.st-note.com/img/1650192104807-WFFzBWgzGN.png?width=1200)
更に上記をグループ化して、それに対してベベルとエンボスを重ねがけします。
![](https://assets.st-note.com/img/1650192159296-XJxuSyPjay.png?width=1200)
同様に、上記をグループ化して、それに対してベベルとエンボスを重ねがけします。
![](https://assets.st-note.com/img/1650192214360-EZou5EHnwh.png?width=1200)
上記に対して、ブラシで光や影など色味を足していきます。
![](https://assets.st-note.com/img/1650192299833-NBFh055ZOS.png?width=1200)
上記をグループ化して、それに対して光彩(内側)を重ねて、発光させます。
![](https://assets.st-note.com/img/1650192346754-OWqeHG583Q.png?width=1200)
次に、下記のようなボタンのフレームを作成します。ベベルとエンボス、グラデーション、ドロップシャドウで味付けしています。
![](https://assets.st-note.com/img/1650181930742-CQjInv5OF9.png?width=1200)
上記と同様に、今度は一回り小さなボタンのフレームを作成して、内側に置きます。2重フレームにすることで、少しリッチに見えるようになるかと思います。
![](https://assets.st-note.com/img/1650181930715-wpTi5PG87k.png?width=1200)
ボタンのベース部分にフレームを重ねて、ブラシで多少色味を整えていきます。
![](https://assets.st-note.com/img/1650181931578-gT5azaPBY9.png?width=1200)
次にボタンの中に配置するための模様を作成します。
![](https://assets.st-note.com/img/1650191823915-FIr2M8W7Sg.png?width=1200)
上記の模様を、オーバーレイ40%にしてボタン上に重ねます。
![](https://assets.st-note.com/img/1650191829537-cvkmjJooqJ.png?width=1200)
最後に「出撃開始」の文字を上にのせて完成です。文字装飾はとても簡単で、グラデーションオーバーレイとドロップシャドウのみで作成しています。
![](https://assets.st-note.com/img/1650182058863-EdxO4UpZHZ.png?width=1200)
02|データダウンロード
02-01|許諾事項
データは、Adobe Photoshop 2022で作成したものになります。古いバージョンを使用している場合は、エラーが発生する場合がありますので、ご了承ください。
02-02|禁止事項
二次配布、再配布、素材の販売、無断転載、シェア利用等は禁止します。
個人・商用ともに、ご自由にお使いください。
著作権は放棄しておりませんので、素材データの複製譲渡や再配布、販売等著作権を侵害する行為は禁止します。
データ販売になりますので、返品返金はご遠慮ください。
ここから先は
¥ 800
この記事が気に入ったらサポートをしてみませんか?