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

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

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

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

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

この記事の目次

前編までで作ったところ

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

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
まだPhotoshopが未導入の方はAdobe公式サイトから入手しておきましょう。
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

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

上図のように質感をつけるにはレイヤー効果（レイヤースタイル）を活用します。
手描きによる質感は今回は使用しません。

調整レイヤーとレイヤー効果の基本操作を詳しく知りたい

下記記事で調整レイヤーとレイヤー効果の基本操作について詳しく解説しています。

【Photoshop】レイヤースタイル、レイヤー効果の使い方とコピペ方法

【Photoshop】調整レイヤーの使い方と写真補正の方法を解説

よく使うレイヤー効果

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

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

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

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

そんなに難しくないので、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のレイヤー上にドラッグするとレイヤー効果をコピペできます。

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

レイヤー効果（レイヤースタイル）を使ったサンプルを紹介

レイヤー効果を使った作例を紹介しているので併せてチェックしてください。

【Photoshop】フォトショでゴールド風（黄金風）効果の作り方

【Photoshop】ベベルとエンボスで金属表現を作る方法【レイヤー効果】

【Photoshop】レイヤースタイルだけで水滴や汗を作る方法【PSD有り】

【2021年度版】Photoshopの無料レイヤースタイル全447種まとめ

下地の作り方

STEP.1

ベースの塗りを設定する

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

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

【Illustrator】再編集しやすい角丸長方形を作る方法【後から角丸半径の変更可】
Illustratorを導入されていない方はコチラの公式サイトから入手できます。

STEP.2

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

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

他の要素も

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

本気でUI/UXを学ぶには？

UI/UXについて専門的に学ぶ方法は大きく分けて独学とスクールの2種類に大別できます。
未経験からの独学は非効率的で、途中で分からなくなりで嫌になって挫折する事も多々。。。
短時間で劇的に進歩し、プロとして活躍するにはスクールの活用が確実です。
TechAcademyのUI/UXデザインコースはUI/UXについて専門的に学べる数少ないスクールです。
社会人の方でも働きながら今の生活を維持し、プロからマンツーマンで学べますよ。

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

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

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

STEP.1

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

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

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

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

STEP.2

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

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

STEP.3

アイコンを配置します

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

FINISH

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

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

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

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

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

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

素材を有効活用して時短する

全ての要素を自作してゲームUIを制作、オリジナリティ100%でいいですね。
しかし素材を上手く活用して時短する事もプロにとって大切な事です。
2億点を超す高品質素材が存在するAdobeStockは文字通り最強の素材サイトです。
画像だけでなくPSDやAI形式のテンプレート素材を使うと…一瞬で商用可能な作品が出来上がります。

クリエイティブ業務で使える優良素材まとめ

フッターに質感を付ける

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

下地を作成する

フッター部分に下地を作成します。
微妙にグラデーションを加えています。
おまけで6つのボタンの下地に軽く明かりとシャドウを追加しています。

アイコンの処理

アイコンと文字にはドロップシャドウを軽く加えてうっすらと浮いたようなイメージにしています。
小さな新着表示にも質感を付けておきます。
赤い吹き出しの境界線は濃い茶色を使って背景色と馴染ませています。

中央の文字類を調整

白っぽい文字も完全な白（#ffffff）ではなく、若干グレーっぽい白にしてみたり、色を調整しておきます。

左右の矢印はグラデーションオーバーレイで色を付け、ドロップシャドウで影を落とします。

PSDを配布中です！

fantiaで当記事のPSDデータを配布しております。全ての要素をレイヤー分けして編集可能な状態になっていますよ。

PSDを参考にしながら作り方を学ぶと、より理解が深まるかと思います！

fantiaからダウンロードする

PSDを開くにはPhotoshopが必要

サンプルPSDを開くにはPhotoshopが必要です。
Adobe公式サイトからPhotoshopを導入しておきましょう。
なお、Photoshop単体はフォトプランが最もお得ですよ。

後編に続く

ここまで完成、質感を付けると全体像が見えてきましたね。

制作開始から約3.5時間程です。
レイヤースタイルを上手くコピペして時間短縮をしてみましょう。

中編の終了です、おつかれさまでした。
何となくゲームUI画面の仕上がりが見えてきたのではないでしょうか？

今回の内容はレイヤー効果（レイヤースタイル）を使った質感の付け方についてでした。
意外とこの機能を知らない、使わない方が多いです。
使うと非常に便利な機能なので是非使い方をマスターしてください！

後編で残りのアイコンやバナーを作って完成まで持っていきたいと思います。

ゲームUI制作もくじ

【Photoshop】ゲームUIのバナーやボタンのメイキングと作例

【Photoshop】ゲームのUIの作り方【PSD有り】

ワンランク上のゲームUI素材

ゲームUI制作を加速させるワンランク上の素材を厳選して紹介します。
全て商用利用可能！
手間のかかるゲームUI制作の手間と劇的に軽減できます。

全48点の厳選ゲームUI素材はコチラで紹介しておりますので、是非ご覧ください！

Illustration of the fairy forest at night with flashlights and e

妖精の森がテーマのUIテンプレートです。
ウィンドウ、ボタン、アイコン、ゲージなど、UI制作でよく使う素材は一通り含まれているので初心者の方にもオススメ！

ダウンロード
※この作者のその他ゲームUI素材はコチラ。

User interface the playing field for a computer game

タイトルロゴだけ追加したらグラフィックの仕事は終わり！みたいなUIテンプレート一式です。
そのままパズルゲームとして使えるレベルですね。

ダウンロード
※この作者のその他ゲームUI素材はコチラ。

Steampunk Game GUI

スチームパンク風のUIテンプレートです。
形状、質感共にハイレベルな仕上がりでそのまま使えます。

ダウンロード

Sci-fi Game GUI Pack

カジュアルなSF系ゲームに適したUIテンプレートです。
ウィンドウ、アイコン、ボタン、ゲージ等、よく使う素材は網羅されているので使い勝手が抜群！

ダウンロード
※この作者のその他ゲームUI素材はコチラ。

Mobile game graphical user Interface GUI. Design, buttons and icons. Vector illustration.

ボタンやアイコン、枠など、一式セットになったUIテンプレートです。
要素の視認性も良く、様々なテイストの絵に合うUIキットです。

ダウンロード
※この作者のその他ゲームUI素材はコチラ。

set of black and white infographic elements. Head-up display elements for the web and app. Futuristic user interface.

UIキットの絵が既にカッコいいSF系UIテンプレートです。正面に映ったUIを両手で触るようなシーンでありそうな絵ですね。

ダウンロード

Set of vector icons, objects, things, item. Game concept and design. Design element. Magical magic. Game assets and tile. Fantasy, fiction style.

剣や盾、兜にポーションなど、ファンタジー系のゲームでよく使うアイコン素材です。
汎用性が高い素材です。

ダウンロード
※この作者のその他ゲームUI素材はコチラ。

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.

よく使う宝箱の素材一式です。
閉じた宝箱、開いた宝箱はもちろん、宝箱の中身も豊富で使い勝手バツグン！

ダウンロード
※この作者のその他ゲームUI素材はコチラ。

Interface buttons set for space games or apps

カジュアルなSFゲームに適したUIキットです。
SFSFしていなく、適度に可愛さがあるのが良いですね。

ダウンロード
※この作者のその他ゲームUI素材はコチラ。

ゲームUI制作を300%加速させるテンプレート

下記でゲームUI制作を劇的に加速させるテンプレート素材を紹介しています！

【商用可】ゲームUIで使える高品質なテンプレート素材48選

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

併せて読んでみませんか？

下記記事でポートフォリオについて解説しております。
ゲーム業界、デザイン業界を目指されている方には必要になるであろうポートフォリオの基礎知識から制作方法やコツについて解説しております。

A4サイズのテンプレートも無料で配布しておりますのでご活用ください。

就活生必見！ポートフォリオって何？詳しく解説します。

【サンプル有り】ポートフォリオの作り方をゼロから徹底解説

【Illustrator】イラレのポートフォリオ用テンプレートとレイアウトサンプル

【就活対策】惜しいポートフォリオの例と改善方法を解説

【就活生向け】業界別ポートフォリオの作例ゲーム業界・WEB業界・イラストレーター

初心者にもよくわかる！UI・UXとは？違いは？具体例を交えて解説！

InDesignは活用されていますか？

Photoshopだけでなく、InDesign（インデザイン）も活用されていますか？
ポートフォリオ制作はイラレよりInDesignの方が効率的に作成できます。
まだInDesignを導入されていない方はAdobe公式サイトから入手できます。
InDesign用の商用利用可能なポートフォリオテンプレート77選はコチラ！

ゼロから始めるPhotoshop目次

フォトショ基本操作