【Photoshop】ゲームUIの制作例レイヤー効果でUIに質感を付ける方法

この記事を読むのに必要な時間は約 21 分です。

スマホゲームのUI（ユーザーインターフェース）をPhotoshop(フォトショップ)で作る方法の中編です。
ポートフォリオにゲーム画面を載せておくとゲーム会社の採用担当の目を惹く可能性が高まるかも！？

前編でシェイプツールや文字ツールを使って要素を全て配置する所まで解説しました。
中編では各要素に質感を付けたいと思います。

では始めていきましょう！

この記事の目次

前編までで作ったところ

前編までで作ったスマホゲームのUI（マイページ画面）です。
まだ線画の状態なので、これらの要素にフォトショで質感を付けていきます。

質感はレイヤー効果（レイヤースタイル）を活用する

左図のように質感をつけるにはレイヤー効果（レイヤースタイル）を活用します。
なお、コチラでレイヤー効果（レイヤースタイル）の基本的な使い方を解説しています。レイヤー操作と併せてチェックしておくと良いと思います。
調整レイヤーは下記で解説しております。

【Photoshop】フォトショの調整レイヤーの使い方と写真補正の方法

MEMO

よく使うレイヤー効果（レイヤースタイル）が「グラデーションオーバーレイ」、「境界線」、「ドロップシャドウ」、「光彩（内側）」、「シャドウ（内側）」あたりです。
これらを使えば大体それっぽく作れますよ。

ヘッダー部分に質感を付ける

アイコンベースの具体的な作り方

アイコンに質感を付けてみたいと思います。
ジャンルにもよりますが、スマホゲームのボタン類はうっすらグラデーションがかかっていたり、金属的な表現のものが結構多いです。

そんなに難しくないので、1つ作れば「なるほどね」ってな感じで慣れるかと思います。

STEP.1

グラデーションオーバーレイを追加する

シェイプで作成したベース下地の正円にレイヤー効果のグラデーションオーバーレイを追加します。
レイヤーパネルの下部に [ fx ] と書かれた小さなアイコンを押すと表示されます。
詳しくはコチラを参照してください。

STEP.2

グラデーションオーバーレイの色を設定する

グラデーションをクリックし、色を決めます。
サンプルは始点が（#f8f6f7）、中間に（#b1a499）、終点が（#beb2ac）です。

STEP.3

グラデーションの向きを決める

角度でグラデーションの向きを変更します。
上から下にかけてグラデーションをかけたいので-90°にしています。

設定ができたら右上の [ OK ] をクリックします。
下地にグラデーションが追加されました！

STEP.3

人アイコンも同様に

中身の人型アイコンも同様にグラデーションオーバーレイを適用します。始点の色が（#4c1e0e）、終点が（#160702）で設定しています。

FINISH

ドロップシャドウを追加して完成

最後にベース正円にレイヤー効果のドロップシャドウを追加して完成です。

MATCHBOX

ポートフォリオ制作&転職を最速で実現

MATCHBOX はマイナビクリエイターが提供している高品質なポートフォリオを無料で作成できるサービスです。

作品とテキストを準備するだけで簡単にポートフォリオが作成できます。PDFに出力できるので紙媒体とWeb媒体の両方を超簡単に作成可能！

無料で使えるMATCHBOX を活用し最短でポートフォリオ制作とクリエイティブ業界への転職を実現しましょう。

硬貨アイコン（金素材）の作り方

硬貨のアイコンに質感を付けてみたいと思います。
こういう金っぽい質感表現はよく使います。先のアイコンベースと基本は同じです。

STEP.1

ベースを作成する

ベースとなる下地をシェイプで作成し、グラデーションオーバーレイを適用します。
グラデーションの向きは-90°です。

サンプルは始点を（#ddcca1）、中間を（#f6e5b1）、終点を（#a5804d）で設定しています。お好みで色は調整してください。

STEP.2

内側を作成する

一回り小さい正円をシェイプで作成し、グラデーションオーバーレイで色を付けます。

サンプルは始点が（#ac945a）、中間が（#967c51）、終点が（#492b13）です。

STEP.3

ヘコミを表現する

レイヤー効果のシャドウ（内側）を追加してヘコミを表現します。

サンプルは色を（#050103）、不透明度35%、距離：0px、チョーク：14%、サイズ：13pxで設定しています。

FINISH

Gにベースのレイヤー効果をコピーして完成

中身のGに対してベースのレイヤー効果をコピーして完成です。

fx上にカーソルを合わせ、[ Alt ] を押しながらGのレイヤー上にドラッグするとレイヤー効果をコピペできます。

ドロップシャドウを落として立体感を追加すればよりいい感じになるかと思います。

CLIP STUDIO PAINT

クリスタを使ってデザイン制作に変化を付ける

CLIP STUDIO PAINTを知らずにPhotoshopやIllustratorだけでデザイン制作を終わらせてしまうのは非常に勿体ないです。

圧倒的な描き心地だけでなく、クリスタだけで使える星の数ほどの無料素材は制作を加速させますよ。

CLIP STUDIO PAINT EX

下地の作り方

STEP.1

ベースの塗りを設定する

数値の下地となるパーツは長方形ツールで作成します。属性パネルから角丸に変形します。

※角丸長方形ツールを使う必要はありません。
塗りの色は（#0d1419）で設定しています。

【Illustrator】イラレで編集しやすい角丸長方形を作る方法

STEP.2

フチに影とハイライトを追加する

シャドウ（内側）、光彩（外側）、ドロップシャドウを追加して完成です。
白背景だと分かりづらいですが、うっすらと光彩をフチに入れておくと黒背景で目立つようになります。

SKIMA

SKIMAで自分のデザインやイラストを販売してみよう

せっかく制作した作品、どうせなら色んな人に見て欲しいですよね。
しかもそれがお金になれば…さらに良くないですか？

SKIMAでは著作権を自身に保持したままイラストを販売する事ができますよ。

SKIMAで自分のイラストを販売してみる

他の要素も

その他のアイコンもレイヤー効果（レイヤースタイル）を使って質感を付けます。新着通知の赤丸も面倒がらずにグラデーションで軽く質感を付けます。
なお、青色の宝石はコチラの素材をベースに作成しています。調整レイヤーで色味を変えたりハイライトや赤みを加えて質感に調整を入れてます。

左メニューに質感を付ける

機神ランクアイコンの作り方

機神ランクって何ってか？知りません。
ゼノブレイドの機神界フィールドのBGMが好きです。

STEP.1

ベースの土台にグラデーションオーバーレイを追加

ひし形のシェイプにレイヤー効果のグラデーションオーバーレイを追加します。

サンプルは（#6e5a47）と（#656256）でグラデーションを作っています。好みで変えてください。

併せて黒色の境界線（4px）を追加します。

STEP.2

内側の土台にもレイヤー効果を追加する

コピペしたひし形を縮小し、レイヤー効果を追加します。
サンプルの設定は下記です。
境界線 ⇒ 色：#000000、線：1px、不透明度：55%
光彩（内側） ⇒ 色：#ffffff、不透明度：45%、チョーク：0%、サイズ：11px
グラデーションオーバーレイ：始点：#a59c99、終点：#462e2f

STEP.3

アイコンを配置します

アイコンを配置します。
サンプルは過去の没絵を切り抜いて配置しました。

FINISH

文字に境界線を追加して完成

文字にレイヤー効果の境界線（太さ：5px、色：#000000）を追加したら完成です。

Live2D Cubism

Live2Dで自分の作品にアニメーションを付ける

自身で作成したキャラをLive2Dで動かしてみませんか？VTuver用のキャラクター作成、映像作品、Webサイトなど用途は無限大ですよ。

もちろんキャラクター以外にも簡単にアニメーションを加えられます。

【Live2D Cubism】

生命の石、宝箱アイコンも同様に作る

生命の石、宝箱のアイコンも先程の機神ランクアイコンと同じ手順で作成します。コピペすると簡単に作れます。
新着表示、UPの小さなパーツにもグラデーションオーバーレイ、ドロップシャドウ、光彩（内側）を使って質感を付けておきます。

宝石のイラストはコチラ、宝箱のイラストはコチラの素材を利用しています。

使える素材は使って時間短縮を図ります。
そのまま使わず調整レイヤーを使って調整を入れておきましょう。