【PS】グラデーションマップを使ったカラフルなゲージの作り方

こんにちは。ゲームUIデザイナーのはなさくのです。

今回は、Photoshopで、グラデーションマップを使って、カラフルなゲージを作る方法についてご紹介します！

01｜ゲージの作り方

まずは、ゲージのカラバリを作る前に、元となるゲージをPhotoshopで作成します。

今回レイヤー構造はかなりシンプルです。

上記を見て分かる通り、オレンジ色のバーの部分は、1つのレイヤーで作成しています。まずは、ベースとなるオレンジ色のグラデーションを設定し、上部の光部分と下部の影部分は、シャドウ（内側）で表現しています。ドロップシャドウについては、ゲージの後ろに薄っすらとかけている程度で、ほんのり立体感が出るとよいなという気持ち程度でつけています。

本当であれば、上記のオレンジゲージのレイヤースタイルのところで、斜めのストライプのパターンをかけたかったのですが、レイヤースタイルの重ね順の関係で、

グラデーション
パターン

という並びになってしまい、上に来るレイヤー効果の方が優先されるため、同じレイヤースタイル内に設定しても、ストライプのパターンが表示されません。

そこで、オレンジ色のバーを単品でグループ化して、そのグループに対してレイヤー効果でストライプのパターンを設定するという方法をとっています。

また一番下にあるゲージのフレームについては、ほんのり半透明に見えるように、光彩を使って表現しています。

ちなみに、ストライプパターンについて、以前Twitterで紹介した下記の方法で自作しています。

Photoshopで簡単にストライプパターンを作る方法について紹介します（音声解説つき）📝

前は、斜めストライプは専用パターンで作ってましたが、今は角度設定でサクッと変えられますね👀#フォトショ1分講座 pic.twitter.com/wdmYGyDKVP

— はなさくの｜ゲームUIデザイナー｜デザニメ・ラボ所属 (@HanaSakuno) September 22, 2021