ポートフォリオの作り方をゼロから徹底解説

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

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

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

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

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

前編までで作ったところ

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

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

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

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

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

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

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

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

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

そんなに難しくないので、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)で設定しています。

【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素材

ゲーム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制作を劇的に加速させるテンプレート素材を紹介しています!
併せて読んでみませんか?
下記記事でポートフォリオについて解説しております。
ゲーム業界、デザイン業界を目指されている方には必要になるであろうポートフォリオの基礎知識から制作方法やコツについて解説しております。

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

Illustratorは活用されていますか?
Photoshopだけでなく、Illustratorも活用されているでしょうか?
まだIllustratorを導入されていない方はAdobe公式サイトから入手できます。
なお、学生や教職員の方は公式サイトの学割コンプリートプランが最強にお得!
Illustratorの使い方はゼロから始めるIllustratorで徹底解説しています。
ゼロから始めるPhotoshop目次

フォトショ基本操作

【導入編】ゼロから始めるPhotoshop
Adobe Creative Cloudの料金プランやオススメプランを徹底解説
フォトショの全ショートカットまとめ
Photoshopとは・DTPの基礎知識
操作画面、新規作成と保存、各種ファイル形式
フォトショでよく使う基本操作
レイヤーの作成・レイヤーの操作
ブラシツールの基本的な使い方と応用操作を徹底解説
各種カラーモードについて
【遠近法の切り抜きツール】斜めから撮った写真を正面に補正する方法と応用
切り抜きツールの使い方と解像度・サイズの変更方法を徹底解説
文字ツールの基本的な使い方
文字パネルの機能と使い方を徹底解説
段落パネルの機能と使い方を徹底解説
グラデーションツールとグラデーションオーバーレイの違いと使い方
整列と分布を使ったレイアウト方法
レイヤースタイル、レイヤー効果の基本的な使い方
ドロップシャドウをさりげなく使ってキレイ目デザインを作る方法
作業効率化に繋がるPhotoshop特有の色々なコピペ方法
調整レイヤーを徹底解説
シェイプツールの使い方・編集方法を徹底解説
共通パーツをインクルードする方法

フォトショ応用操作

Photoshopでバナー広告を作る方法を完全解説
Photoshopで人物の表情を簡単に変える方法
【前編】スマホゲームのUIを作ってみよう(構成~下絵まで)
【中編】スマホゲームのUIを作ってみよう(文字やアイコンに質感を付ける)
【後編】スマホゲームのUIを作ってみよう(バナーやボタンの作り方)
Photoshopで黄金風の効果を付ける方法を詳しく解説
ベベルとエンボスで金属表現を作る方法
GDNで有効的なサイズのバナー広告の作り方を完全解説
複数サイズのバナーを効率的に作成する方法
Photoshopで写真をインスタグラム風に加工する方法
レイヤースタイルを使って水滴や汗を描く方法
コンテンツに応じた塗りつぶしで不要な要素を消す方法
斜めから撮影した画面に画像や文字をはめ込む方法
ニュートラルフィルターで肌を一瞬でキレイにする方法
「空を置き換え」で曇り空を1分で修整する方法
スマートポートレイトをイラストに適用する方法と検証
3分で髪の毛を簡単に切り抜く方法(境界線調整ブラシツール)
レンズフレアを追加して印象的な写真に仕上げる方法
RGBずらし(色ずれ)を使ったTikTok風ロゴや印象的な画像の作り方
写真をアメコミ風のイラストにする方法を徹底解説
【間違い探し動画】初心者向けアハ体験動画の作り方
昼間の写真を夜に変更する方法を徹底解説
【チルトシフト】風景写真をミニチュア風に加工する方法
写真を水彩画風に加工する方法を徹底解説

商用可能なフォトショ用素材

文字に高品質なエフェクトを追加するモックアップ
写真を様々なグラフィックに変えられるエフェクト50選
写真を短時間で大変身させる高クオリティなエフェクト51選
画像をヴィンテージ風にできるエフェクトモックアップ50選
人物が煙になる表現ができるエフェクトモックアップ

フォトショップのお困りごと

「最近使用したもの」を非表示にする方法
ブラシのポインタが十字になった時の対処法
突然画面がグレーになってしまった時の対処法
「変形」の仕様をCC2018以前に戻す方法

目次一覧を見る
SCROLL
目次一覧
ゼロから始めるシリーズ

現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう!