この記事を読むのに必要な時間は約 21 分です。
スマホゲームのUI(ユーザーインターフェース)をPhotoshop(フォトショップ)で作る方法の中編です。
ポートフォリオにゲーム画面を載せておくとゲーム会社の採用担当の目を惹く可能性が高まるかも!?
前編でシェイプツールや文字ツールを使って要素を全て配置する所まで解説しました。
中編では各要素に質感を付けたいと思います。
では始めていきましょう!
この記事の目次

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

なお、コチラでレイヤー効果(レイヤースタイル)の基本的な使い方を解説しています。レイヤー操作と併せてチェックしておくと良いと思います。
調整レイヤーは下記で解説しております。

これらを使えば大体それっぽく作れますよ。
アイコンベースの具体的な作り方
アイコンに質感を付けてみたいと思います。
ジャンルにもよりますが、スマホゲームのボタン類はうっすらグラデーションがかかっていたり、金属的な表現のものが結構多いです。
そんなに難しくないので、1つ作れば「なるほどね」ってな感じで慣れるかと思います。

レイヤーパネルの下部に [ fx ] と書かれた小さなアイコンを押すと表示されます。
詳しくはコチラを参照してください。

サンプルは始点が(#f8f6f7)、中間に(#b1a499)、終点が(#beb2ac)です。

上から下にかけてグラデーションをかけたいので-90°にしています。
設定ができたら右上の [ OK ] をクリックします。
下地にグラデーションが追加されました!



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

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

グラデーションの向きは-90°です。
サンプルは始点を(#ddcca1)、中間を(#f6e5b1)、終点を(#a5804d)で設定しています。お好みで色は調整してください。

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

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

fx上にカーソルを合わせ、[ Alt ] を押しながらGのレイヤー上にドラッグするとレイヤー効果をコピペできます。
ドロップシャドウを落として立体感を追加すればよりいい感じになるかと思います。
圧倒的な描き心地だけでなく、クリスタだけで使える星の数ほどの無料素材は制作を加速させますよ。
CLIP STUDIO PAINT EX

下地の作り方

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


白背景だと分かりづらいですが、うっすらと光彩をフチに入れておくと黒背景で目立つようになります。
しかもそれがお金になれば…さらに良くないですか?
SKIMAでは著作権を自身に保持したままイラストを販売する事ができますよ。
SKIMAで自分のイラストを販売してみる

他の要素も

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

サンプルは(#6e5a47)と(#656256)でグラデーションを作っています。好みで変えてください。
併せて黒色の境界線(4px)を追加します。

サンプルの設定は下記です。
境界線 ⇒ 色:#000000、線:1px、不透明度:55%
光彩(内側) ⇒ 色:#ffffff、不透明度:45%、チョーク:0%、サイズ:11px
グラデーションオーバーレイ:始点:#a59c99、終点:#462e2f

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

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

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

フッターは下部のボタン類のエリアを指しています。
下地を作成する

微妙にグラデーションを加えています。
おまけで6つのボタンの下地に軽く明かりとシャドウを追加しています。
アイコンの処理

小さな新着表示にも質感を付けておきます。
赤い吹き出しの境界線は濃い茶色を使って背景色と馴染ませています。
中央の文字類を調整

左右の矢印はグラデーションオーバーレイで色を付け、ドロップシャドウで影を落とします。
コンプリートプランが最強に便利ですが、Photoshop単品は次のリンクから入手できます。

ここまで完成、質感を付けると全体像が見えてきましたね。
制作開始から約3.5時間程です。
レイヤースタイルを上手くコピペして時間短縮をしてみましょう。
中編の終了です、おつかれさまでした。
何となくゲームUI画面の仕上がりが見えてきたのではないでしょうか?
今回の内容はレイヤー効果 (レイヤースタイル) を使った質感の付け方についてでした。
意外とこの機能を知らない、使わない方が多いです。
使うと非常に便利な機能なので是非使い方をマスターしてください!
後編で残りのアイコンやバナーを作って完成まで持っていきたいと思います。
ゲーム業界、デザイン業界を目指されている方には必要になるであろうポートフォリオの基礎知識から制作方法やコツについて解説しております。
A4サイズのテンプレートも無料で配布しておりますのでご活用ください。
オススメはコンプリートプラン
初めからコンプリートプランを選択する方が断然お得&便利ですよ。
学生・教職員なら

学生や教職員の方にオススメなのが
アプリ1本分の価格で全てのAdobe製品が使い放題!
Photoshop単品ならフォトプランが最安
Photoshopを使うならAdobe公式のフォトプランが一番お得です。
※アマゾンや他サイトのフォトプランは、1TBのオンラインストレージが付いて倍くらいの価格です。
制作を加速させる最強素材サイト
無料素材とは一味違うので手を加える手間が劇的に省けますよ。
ゼロから始めるPhotoshopのもくじです。


















