この記事を読むのに必要な時間は約 24 分です。
スマホゲームのUI（ユーザーインターフェース）をPhotoshop(フォトショップ)で作る方法の中編です。
ポートフォリオにゲーム画面を載せておくとゲーム会社の採用担当の目を惹く可能性が高まるかも！？
前編でシェイプツールや文字ツールを使って要素を全て配置する所まで解説しました。
中編では各要素に質感を付けたいと思います。
では始めていきましょう！
この記事の目次
前編までで作ったスマホゲームのUI（マイページ画面）です。
まだ線画の状態なので、これらの要素にフォトショで質感を付けていきます。
まだPhotoshopが未導入の方はAdobe公式サイトから入手しておきましょう。
なお、AdobeCCのプランはコチラの記事で徹底解説しています。
上図のように質感をつけるにはレイヤー効果（レイヤースタイル）を活用します。
手描きによる質感は今回は使用しません。
下記記事で調整レイヤーとレイヤー効果の基本操作について詳しく解説しています。
これらを使えば大体それっぽく作れますよ。
アイコンに質感を付けてみたいと思います。
ジャンルにもよりますが、スマホゲームのボタン類はうっすらグラデーションがかかっていたり、金属的な表現のものが結構多いです。
そんなに難しくないので、1つ作れば「なるほどね」ってな感じで慣れるかと思います。
レイヤーパネルの下部に [ fx ] と書かれた小さなアイコンを押すと表示されます。
詳しくはコチラを参照してください。
サンプルは始点が（#f8f6f7）、中間に（#b1a499）、終点が（#beb2ac）です。
上から下にかけてグラデーションをかけたいので-90°にしています。
設定ができたら右上の [ OK ] をクリックします。
下地にグラデーションが追加されました！
硬貨アイコン（金素材）の作り方
硬貨のアイコンに質感を付けてみたいと思います。
こういう金っぽい質感表現はよく使います。先のアイコンベースと基本は同じです。
グラデーションの向きは-90°です。
サンプルは始点を（#ddcca1）、中間を（#f6e5b1）、終点を（#a5804d）で設定しています。お好みで色は調整してください。
サンプルは始点が（#ac945a）、中間が（#967c51）、終点が（#492b13）です。
サンプルは色を（#050103）、不透明度35%、距離：0px、チョーク：14%、サイズ：13pxで設定しています。
fx上にカーソルを合わせ、[ Alt ] を押しながらGのレイヤー上にドラッグするとレイヤー効果をコピペできます。
ドロップシャドウを落として立体感を追加すればよりいい感じになるかと思います。
レイヤー効果を使った作例を紹介しているので併せてチェックしてください。
下地の作り方
※角丸長方形ツールを使う必要はありません。
塗りの色は（#0d1419）で設定しています。
【Illustrator】再編集しやすい角丸長方形を作る方法【後から角丸半径の変更可】Illustratorを導入されていない方はコチラの公式サイトから入手できます。
白背景だと分かりづらいですが、うっすらと光彩をフチに入れておくと黒背景で目立つようになります。
他の要素も
未経験からの独学は非効率的で、途中で分からなくなりで嫌になって挫折する事も多々。。。
短時間で劇的に進歩し、プロとして活躍するにはスクールの活用が確実です。
TechAcademyのUI/UXデザインコース
社会人の方でも働きながら今の生活を維持し、プロからマンツーマンで学べますよ。
機神ランクって何ってか？知りません。
ゼノブレイドの機神界フィールドのBGMが好きです。
サンプルは（#6e5a47）と（#656256）でグラデーションを作っています。好みで変えてください。
併せて黒色の境界線（4px）を追加します。
サンプルの設定は下記です。
境界線 ⇒ 色：#000000、線：1px、不透明度：55%
光彩（内側） ⇒ 色：#ffffff、不透明度：45%、チョーク：0%、サイズ：11px
グラデーションオーバーレイ：始点：#a59c99、終点：#462e2f
サンプルは過去の没絵を切り抜いて配置しました。
生命の石、宝箱アイコンも同様に作る
しかし素材を上手く活用して時短する事もプロにとって大切な事です。
2億点を超す高品質素材が存在するAdobeStockは文字通り最強の素材サイトです。
画像だけでなくPSDやAI形式のテンプレート素材を使うと…一瞬で商用可能な作品が出来上がります。
クリエイティブ業務で使える優良素材まとめフッターは下部のボタン類のエリアを指しています。
微妙にグラデーションを加えています。
おまけで6つのボタンの下地に軽く明かりとシャドウを追加しています。
アイコンの処理
小さな新着表示にも質感を付けておきます。
赤い吹き出しの境界線は濃い茶色を使って背景色と馴染ませています。
中央の文字類を調整
左右の矢印はグラデーションオーバーレイで色を付け、ドロップシャドウで影を落とします。
ここまで完成、質感を付けると全体像が見えてきましたね。
制作開始から約3.5時間程です。
レイヤースタイルを上手くコピペして時間短縮をしてみましょう。
中編の終了です、おつかれさまでした。
何となくゲームUI画面の仕上がりが見えてきたのではないでしょうか？
今回の内容はレイヤー効果 （レイヤースタイル） を使った質感の付け方についてでした。
意外とこの機能を知らない、使わない方が多いです。
使うと非常に便利な機能なので是非使い方をマスターしてください！
後編で残りのアイコンやバナーを作って完成まで持っていきたいと思います。
ゲームUI制作を加速させるワンランク上の素材を厳選して紹介します。
全て商用利用可能！
手間のかかるゲームUI制作の手間と劇的に軽減できます。
全48点の厳選ゲームUI素材はコチラで紹介しておりますので、是非ご覧ください！
Illustration of the fairy forest at night with flashlights and e
User interface the playing field for a computer game
Steampunk Game GUI
Sci-fi Game GUI Pack
Mobile game graphical user Interface GUI. Design, buttons and icons. Vector illustration.
set of black and white infographic elements. Head-up display elements for the web and app. Futuristic user interface.
Set of vector icons, objects, things, item. Game concept and design. Design element. Magical magic. Game assets and tile. Fantasy, fiction style.
Set cartoon wooden isometric chests decorated silver with golden trophies, elixirs, potions, skull, money, coins and gems for computer game. Vector illustration on gray background.
Interface buttons set for space games or apps
ゲーム業界、デザイン業界を目指されている方には必要になるであろうポートフォリオの基礎知識から制作方法やコツについて解説しております。
A4サイズのテンプレートも無料で配布しておりますのでご活用ください。
まだIllustratorを導入されていない方はAdobe公式サイトから入手できます。
なお、学生や教職員の方は公式サイトの学割コンプリートプランが最強にお得！
Illustratorの使い方はゼロから始めるIllustratorで徹底解説しています。
現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう！
