この記事を読むのに必要な時間は約 21 分です。
スマホゲームのUI（ユーザーインターフェース）をPhotoshop(フォトショップ)で作る方法について中編です。ポートフォリオにゲーム画面を載せておくとゲーム会社の採用担当の目を惹く可能性が高まるかも！？
前編でシェイプツールや文字ツールを使って要素を全て配置する所まで解説しました。中編では各要素に質感を付けたいと思います。
では始めていきましょう！
前編までで作ったところ
前編までで作ったスマホゲームのUI（マイページ画面）です。まだ線画の状態なので、これらの要素にフォトショで質感を付けていきます。
質感はレイヤー効果（レイヤースタイル）を活用する
MEMO
よく使うレイヤー効果（レイヤースタイル）が「グラデーションオーバーレイ」、「境界線」、「ドロップシャドウ」、「光彩（内側）」、「シャドウ（内側）」あたりです。これらを使えば大体それっぽく作れますよ。
ヘッダー部分に質感を付ける
アイコンベースの具体的な作り方
アイコンに質感を付けてみたいと思います。
ジャンルにもよりますが、スマホゲームのボタン類はうっすらグラデーションがかかっていたり、金属的な表現のものが結構多いです。
難しくないので1つ作れば「なるほどね」ってな感じで慣れるかと思います。
STEP.1
グラデーションオーバーレイを追加する
シェイプで作成したベース下地の正円にレイヤー効果のグラデーションオーバーレイを追加します。
レイヤーパネルの下部に[ fx ]と書かれた小さなアイコンを押すと表示されます。詳しくは
コチラを参照してください。
STEP.2
グラデーションオーバーレイの色を設定する
グラデーションをクリックし、色を決めます。
サンプルは始点が（#f8f6f7）、中間に（#b1a499）、終点が（#beb2ac）です。
STEP.3
グラデーションの向きを決める
角度でグラデーションの向きを変更します。上から下にかけてグラデーションをかけたいので-90°にしています。
設定ができたら右上の[ OK ]をクリックします。
下地にグラデーションが追加されました！
STEP.3
人アイコンも同様に
中身の人型アイコンも同様にグラデーションオーバーレイを適用します。始点の色が（#4c1e0e）、終点が（#160702）で設定しています。
FINISH
ドロップシャドウを追加して完成
最後にベース正円にレイヤー効果のドロップシャドウを追加して完成です。
硬貨アイコン（金素材）の作り方
硬貨のアイコンに質感を付けてみたいと思います。こういう金っぽい質感表現はよく使います。先のアイコンベースと基本は同じです。
STEP.1
ベースを作成する
ベースとなる下地をシェイプで作成し、グラデーションオーバーレイを適用します。グラデーションの向きは-90°です。
サンプルは始点を（#ddcca1）、中間を（#f6e5b1）、終点を（#a5804d）で設定しています。お好みで色は調整してください。
STEP.2
内側を作成する
一回り小さい正円をシェイプで作成し、グラデーションオーバーレイで色を付けます。サンプルは始点が（#ac945a）、中間が（#967c51）、終点が（#492b13）です。
STEP.3
ヘコミを表現する
レイヤー効果のシャドウ（内側）を追加してヘコミを表現します。サンプルは色を（#050103）、不透明度35%、距離：0px、チョーク：14%、サイズ：13pxで設定しています。
FINISH
Gにベースのレイヤー効果をコピーして完成
中身のGに対してベースのレイヤー効果をコピーして完成です。
fx上にカーソルを合わせ、[ Alt ]を押しながらGのレイヤー上にドラッグするとレイヤー効果をコピペできます。ドロップシャドウを落として立体感を追加すればよりいい感じになるかと思います。
下地の作り方
STEP.1
ベースの塗りを設定する
数値の下地となるパーツは長方形ツールで作成します。属性パネルから角丸に変形します。
※角丸長方形ツールを使う必要はありません。
塗りの色は（#0d1419）で設定しています。
STEP.2
フチに影とハイライトを追加する
シャドウ（内側）、光彩（外側）、ドロップシャドウを追加して完成です。
白背景だと分かりづらいですが、うっすらと光彩をフチに入れておくと黒背景で目立つようになります。
他の要素も
その他のアイコンもレイヤー効果（レイヤースタイル）を使って質感を付けます。新着通知の赤丸も面倒がらずにグラデーションで軽く質感を付けます。
なお、青色の宝石は
コチラの素材をベースに作成しています。
調整レイヤーで色味を変えたりハイライトや赤みを加えて質感に調整を入れてます。
左メニューに質感を付ける
機神ランクアイコンの作り方
機神ランクって何ってか？知りません。
ゼノブレイドの機神界フィールドのBGMが好きです。
STEP.1
ベースの土台にグラデーションオーバーレイを追加
ひし形のシェイプにレイヤー効果のグラデーションオーバーレイを追加します。サンプルは（#6e5a47）と（#656256）でグラデーションを作っています。好みで変えてください。
併せて黒色の境界線（4px）を追加します。
STEP.2
内側の土台にもレイヤー効果を追加する
コピペしたひし形を縮小し、レイヤー効果を追加します。
サンプルの設定は下記です。
境界線 ⇒ 色：#000000、線：1px、不透明度：55%
光彩（内側） ⇒ 色：#ffffff、不透明度：45%、チョーク：0%、サイズ：11px
グラデーションオーバーレイ：始点：#a59c99、終点：#462e2f
STEP.3
アイコンを配置します
アイコンを配置します。サンプルは過去の没絵を切り抜いて配置しました。
FINISH
文字に境界線を追加して完成
文字にレイヤー効果の境界線（太さ：5px、色：#000000）を追加したら完成です。
生命の石、宝箱アイコンも同様に作る
生命の石、宝箱のアイコンも先程の機神ランクアイコンと同じ手順で作成します。コピペすると簡単に作れます。
新着表示、UPの小さなパーツにもグラデーションオーバーレイ、ドロップシャドウ、光彩（内側）を使って質感を付けておきます。
宝石のイラストはコチラ、宝箱のイラストはコチラの素材を利用しています。使える素材は使って時間短縮を図ります。そのまま使わず調整レイヤーを使って調整を入れます。
フッターに質感を付ける
フッターは下部のボタン類のエリアを指しています。
下地を作成する
フッター部分に下地を作成します。微妙にグラデーションを加えています。おまけで6つのボタンの下地に軽く明かりとシャドウを追加しています。
アイコンの処理
アイコンと文字にはドロップシャドウを軽く加えてうっすらと浮いたようなイメージにしています。
小さな新着表示にも質感を付けておきます。赤い吹き出しの境界線は濃い茶色を使って背景色と馴染ませています。
中央の文字類を調整
白っぽい文字も完全な白（#ffffff）ではなく、若干グレーっぽい白にしてみたり、色を調整しておきます。
左右の矢印はグラデーションオーバーレイで色を付け、ドロップシャドウで影を落とします。
PSDを無料配布中です！
fantiaで当記事のPSDデータを無料配布しております。全ての要素をレイヤー分けして編集可能な状態になっていますよ。
PSDを参考にしながら作り方を学ぶとより理解が深まるかと思います！
後編に続く
ここまで完成、質感を付けると全体像が見えてきましたね。
制作開始から約3.5時間程です。レイヤースタイルを上手くコピペして時間短縮をしてみましょう。
中編の終了です、おつかれさまでした。
何となくゲームUI画面の仕上がりが見えてきたのではないでしょうか？今回の内容はレイヤー効果 （レイヤースタイル） を使った質感の付け方についてでした。
意外とこの機能を知らない方がいらっしゃいます。使うと非常に便利な機能なので是非使い方をマスターしてください！
後編で残りのアイコンやバナーを作って完成まで持っていきたいと思います。
併せて読んでみませんか？
下記記事でポートフォリオについて解説しております。ゲーム業界、デザイン業界を目指されている方には必要になるであろうポートフォリオの基礎知識から制作方法やコツについて解説しております。A4サイズのテンプレートも無料で配布しておりますのでご活用ください。
目次一覧
ゼロから始めるシリーズ目次
IllutratorとPhotoshopの使い方をゼロから解説する「ゼロから始めるIllustrator」と「ゼロから始めるPhotoshop」の目次リンクです。
本業が教えるイラレとフォトショ講座の目次は下記から。
【Photoshop】フォトショの調整レイヤーを徹底解説
