この記事を読むのに必要な時間は約 20 分です。
スマホゲームのUI（ユーザーインターフェース）をPhotoshop(フォトショップ)で作る方法について中編です。ポートフォリオにゲーム画面を載せておくとゲーム会社の採用担当の目を惹く可能性が高まるかも！？
前編でシェイプツールや文字ツールを使って要素を全て配置する所まで解説しました。中編では各要素に質感を付けたいと思います。
では始めていきましょう！
この記事の目次
前編までで作ったスマホゲームのUI（マイページ画面）です。
まだ線画の状態なので、これらの要素にフォトショで質感を付けていきます。
なお、コチラでレイヤー効果（レイヤースタイル）の基本的な使い方を解説しています。レイヤー操作と併せてチェックしておくと良いと思います。
調整レイヤーは下記で解説しております。
【Photoshop】フォトショの調整レイヤーの使い方と写真補正の方法アイコンベースの具体的な作り方
アイコンに質感を付けてみたいと思います。
ジャンルにもよりますが、スマホゲームのボタン類はうっすらグラデーションがかかっていたり、金属的な表現のものが結構多いです。
難しくないので1つ作れば「なるほどね」ってな感じで慣れるかと思います。
レイヤーパネルの下部に[ fx ]と書かれた小さなアイコンを押すと表示されます。詳しくはコチラを参照してください。
サンプルは始点が（#f8f6f7）、中間に（#b1a499）、終点が（#beb2ac）です。
上から下にかけてグラデーションをかけたいので-90°にしています。
設定ができたら右上の[ OK ]をクリックします。
下地にグラデーションが追加されました！
硬貨アイコン（金素材）の作り方
硬貨のアイコンに質感を付けてみたいと思います。
こういう金っぽい質感表現はよく使います。先のアイコンベースと基本は同じです。
サンプルは始点を（#ddcca1）、中間を（#f6e5b1）、終点を（#a5804d）で設定しています。お好みで色は調整してください。
サンプルは始点が（#ac945a）、中間が（#967c51）、終点が（#492b13）です。
サンプルは色を（#050103）、不透明度35%、距離：0px、チョーク：14%、サイズ：13pxで設定しています。
fx上にカーソルを合わせ、[ Alt ]を押しながらGのレイヤー上にドラッグするとレイヤー効果をコピペできます。ドロップシャドウを落として立体感を追加すればよりいい感じになるかと思います。
下地の作り方
※角丸長方形ツールを使う必要はありません。
塗りの色は（#0d1419）で設定しています。
【Illustrator】イラレで編集しやすい角丸長方形を作る方法
白背景だと分かりづらいですが、うっすらと光彩をフチに入れておくと黒背景で目立つようになります。
他の要素も
機神ランクアイコンの作り方
機神ランクって何ってか？知りません。
ゼノブレイドの機神界フィールドのBGMが好きです。
サンプルは（#6e5a47）と（#656256）でグラデーションを作っています。好みで変えてください。
併せて黒色の境界線（4px）を追加します。
サンプルの設定は下記です。
境界線 ⇒ 色：#000000、線：1px、不透明度：55%
光彩（内側） ⇒ 色：#ffffff、不透明度：45%、チョーク：0%、サイズ：11px
グラデーションオーバーレイ：始点：#a59c99、終点：#462e2f
生命の石、宝箱アイコンも同様に作る
フッターは下部のボタン類のエリアを指しています。
下地を作成する
おまけで6つのボタンの下地に軽く明かりとシャドウを追加しています。
アイコンの処理
小さな新着表示にも質感を付けておきます。赤い吹き出しの境界線は濃い茶色を使って背景色と馴染ませています。
中央の文字類を調整
左右の矢印はグラデーションオーバーレイで色を付け、ドロップシャドウで影を落とします。
PSDを参考にしながら作り方を学ぶとより理解が深まるかと思います！
ここまで完成、質感を付けると全体像が見えてきましたね。
制作開始から約3.5時間程です。
レイヤースタイルを上手くコピペして時間短縮をしてみましょう。
中編の終了です、おつかれさまでした。
何となくゲームUI画面の仕上がりが見えてきたのではないでしょうか？
今回の内容はレイヤー効果 （レイヤースタイル） を使った質感の付け方についてでした。
意外とこの機能を知らない、使わない方が多いです。
使うと非常に便利な機能なので是非使い方をマスターしてください！
後編で残りのアイコンやバナーを作って完成まで持っていきたいと思います。
Photoshop（フォトショップ）を持っていない方は、下記から最安値で購入できます。
各種通販サイト等で取り扱われていますが、結局Adobe公式サイトが最安値かつ安全です。
オススメはコンプリートプラン
単品よりも圧倒的にお得で便利なCreative Cloudコンプリートプランがオススメです。
アプリ単体を2つ3つ使うと費用がコンプリートプランと同等かそれ以上になります。
制作はPhotoshop、Illustrator、Lightroom、InDesign、Acrobat、etc…複数のアプリを使い分けながら作る事が多いです。
Photoshopで作業をしている際に「Illustratorなら効率的に作れるのに…」、「完成したデザインをPDFで複数ページに冊子形式にしたいなぁ…」という事は頻繁にあります。
なのでデザイナーにとって最低限Photoshop、Illustrator、Acrobatは必要です。
それならいっそ初めからコンプリートプラン
を選択する方が断然便利でお得ですよ。
学生・教職員なら
学生や教職員の方にオススメなのが
65%OFFはデカイですね！
アプリ1本分の価格で全てが使えます。
Photoshop単品ならフォトプランが最安
Photoshopを使うならAdobe公式のフォトプラン
が一番お得です。
Photoshop単体の半分以下の価格で、尚且つLightroomもセットになっているのが嬉しいですね。
※アマゾンや他の通販サイトのフォトプランだと、不要なオンラインストレージが付いて倍くらいの価格なので気を付けてください。
Photoshopのオススメ書籍
ゼロから始めるPhotoshopのもくじです。
IllutratorとPhotoshopの使い方をゼロから解説する「ゼロから始めるIllustrator」と「ゼロから始めるPhotoshop」の目次リンクです。
本業が教えるイラレとフォトショ講座の目次は下記からどうぞ。
ファンティア始めました。
無料でAIやPSDを公開しています。
