クリエイターなら絶対に登録しておきたい転職エージェント5選!

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

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

スマホゲームのUI(ユーザーインターフェース)をPhotoshop(フォトショップ)で作る方法について詳しく解説します。

ゲーム会社に応募する際にオリジナルキャラを使ったスマホゲームのUI(ユーザーインターフェース)をポートフォリオに載せておくと、イラスト単体を載せるより採用担当者の目に留まる可能性が高まります。

初心者の方にも分かりやすいように順を追ってゲームUIの作り方を解説いたします。
ゲーム業界への就職を考えられている学生さんにオススメの内容です。

「ぼくのかんがえたスマホゲーム」のマイページ画面を作ってみましょう!

ゲームのUI

ゲームのUI(ユーザーインターフェース)にはキャラクターをはじめ、背景、文字、アイコン、レイアウト等、様々な要素を組み合わせて構成されています。

よって作るにはソコソコの労力を必要とします。
でもコツコツと進めていけば必ず完成します。根気が命!

当UI制作にはどの程度のPhotoshop知識が必要?
当記事はある程度のフォトショ知識がある事を前提としております。
クリスタで絵を描くのは得意たけどフォトショは…という方は左のバナーを作れるくらいの知識があれば必要十分です。
バナー制作未経験でも作っていくうちに慣れてきますよ!
なお、ゼロから始めるバナー制作はコチラで解説しています。

最低限Photoshopが必須

Photoshopを導入しましょう
当記事の内容を実践するにはPhotoshopが必須です。
Adobe公式サイトから導入しておきましょう。Photoshop単体はフォトプランが最もお得です。

なおゲーム系のUIはIllustrator(イラストレーター)でも作れますが、個人的にはPhotoshop(フォトショップ)の方が圧倒的に作りやすいです
特にUI(ユーザーインターフェース)に質感を付けたい場合はPhotoshopが断然オススメ。

フラットデザインならIllustrator、Photoshopどちらでも。
基本的に当サイトではPhotoshopでの制作を推奨します。

本気でデザインをするならコンプリートプラン一択
PhotoshopだけでもゲームUIは制作可能です。
ただ本気で行うならIllustratorでアイコン素材を作成し、PhotoshopへインポートしUI作成。
PSDをAcrobatで変換など、本気で制作を行うのであればコンプリートプランは必須です。
なお、学生さんや教職員の方は学割コンプリートプランが最安・最強です。

制作する画面の仕様

今回は横幅1920px、高さ1080px、解像度72、RGBカラーで作成してみたいと思います。
フォトショの新規作成や保存方法は下記から確認できます。【Photoshop】ファイル形式の種類と特徴について徹底解説

ゲームのネタを想像する

どんなゲームにしたいか、何となくイメージしてみます。自身で作ってみたいゲームを想像しながら考えてみましょう。

メモ帳やA4用紙にアイディアを書き出します。
最初は適当でOK!
しかしきったねぇ字だなぁ…

超ざっくりなメモですが、私の場合は剣と魔法の世界のRPGみたいな感じで作ってみたいと思います。

絵を用意する

キャラクターの絵を準備します。
背景透過のPNGで書き出しておくと便利です。
無い場合はフリーの素材でOKです。

今回作るサンプルは私が学生時代に作成した没キャラを再利用しています。
今回のUI制作は5時間を目安に作成、キャラの作画を含めると工数が増えるので楽をします。

「note:ノート」黒魔術師的な設定です。そしてカラスが本体、キルバーンみたいな設定ですね。
なので女性部分を攻撃しても再生します。
素材は土くれ。
「れんぞくま」が使えます。わたくし、フレアが得意ですの、ほほっ。カァー!カァー!

背景はジャン・ポポさんの作品を利用させていただきました。最高です!
クリスタを使った差分イラストの描き方は左記で解説しています。興味がある方は併せてチェックしてください!

画面構成を考える

ざっくりとレイアウトを考える

スマホゲーっぽく要素を置きましょう。

Photoshopがまだ未導入の方はAdobe公式サイトから入手しておきましょう。

今回作るのはマイページだけなので他のページの事は考えずに作ります。
まずはペイントソフト等で適当に好き勝手に要素を置きましょう!

黒に塗りつぶしたレイヤーの不透明度を下げて、キャラと背景を暗くし、手前に白で要素をラクガキするとラフが見やすくなります。

実際のスマホゲームの画面を作る時はAdobe Xd等で遷移先を含めたワイヤーフレームをキッチリ作成してから進めます。でも今回は単品画面なので必要ありません。

こまけぇこたぁ考えずに好きに要素を置きましょう!

ワイヤー作成とデザイン制作に便利なAdobeXD
Adobe Xdはワイヤーフレームやプロトタイプをサクッと制作する上で非常に便利なツールです。
まだ導入されていない方は是非入れておきましょう!

文字列も含め、要素を全て書き出す

ラフを元にフォトショップでシェイプツールと文字ツールでレイアウトをします。

画面内に載せる要素を全て書き出します。
アイコン類も「ico」みたいな感じでブラシでザクっと適当に書いて配置します。

メールとかの「新着表示」を入れておくと、より「っぽさ」が出ます。
小さな要素ですが大事です。

名称は好き勝手入れてOKです。
貴方だけのゲーム画面、中二病を炸裂させちゃいましょう!

こまめなレイヤー整理は超大事
レイヤー整理を怠らないようにしておきましょう。
要素が多くなるので随時整理しておかないと「制作中に訳が分からなく」なってきます。
今回は大きく分けて「ヘッダー」、「フッター」、「左ボタン」、「右ボタン」、「バナー1」、「バナー2」で親グループを作成し、各グループの中に細かい要素をグループ化して作成しています。
レイヤー操作の基礎はコチラで解説しています。

アイコンを作成する

色んなアイコン類が必要になります。アイコン類を作成していきましょう。

ロゴやアイコン類の制作はイラレが強い

フラットなアイコン類(フッターや右側のボタン、ヘッダーの右端)はIllustrator(イラストレーター)での作成がオススメです。
ペンツール図形ツールパスファインダ等を使って左図のようにイラレで単色で作成しておきます。

イラレが無ければPhotoshop(フォトショップ)でも作れますが、イラレが断然便利です。

イラレの使い方は下記で解説しております。
(随時追加予定)ゼロから始めるIllustrator イラレ初心者からプロを目指す!
Illustratorが無い方はAdobe公式サイトから導入しておきましょう。

イラレからフォトショにインポート可能

Illustrator(イラストレーター)で作成したアイコンをPhotoshop(フォトショップ)へ簡単に持っていく事ができます。

STEP.1
イラレで対象アイコンをコピー
イラレの画面でフォトショに持っていきたいアイコンを [ 選択ツール(V) ] で選択し、[ Ctrl + C ] でコピーします。

Adobe公式サイトからIllustratorを導入できます。
STEP.2
フォトショでペースト
フォトショを開いて [ Ctrl + V ] でペーストします。
STEP.3
シェイプレイヤーを選択
ペースト形式が問われるので一番下の [ シェイプレイヤー ] を選択します。
FINISH
コピペ完了
イラレからフォトショへアイコンをシェイプレイヤーとしてコピペする事ができました。シェイプなので拡大縮小をしても劣化が起こりません。

この機能はよく使うので覚えておくと便利ですよ。

現役デザイナー推薦!未経験からプロを目指せるデザインスクール5選
コチラの記事 現役デザイナーの私がオススメするデザインスクールを5つ厳選し、徹底解説!
もちろん学生さんだけでなく、社会人の方も仕事をしながら生活を崩さず学習可能です。
独学に限界を感じている方、本気でプロを目指されている方にオススメのコンテンツですよ。

アイコンの配置とサイズを調整

UIの下絵が完成

先の方法でイラレからフォトショへアイコンをコピペして配置します。

入力した「だけ」の文字だと面白くないので、世界観に合うフォントを選びます。
フォント、サイズの調整、文字間調整を少し入れるだけで「っぽく」なってきた気がしませんか?

ここまでの制作でおよそ2時間程です。

下記記事で最強素材サイトのAdobeStockやフリーで使える素敵なフォントを紹介しております。
ちょこっとフォントを変えるだけでもオシャレになりますよ!

一通りサイズ調整を行い全ての要素を配置しました。
イラスト制作で例えるなら「線画」が完成した感じでしょうか。
UI(ユーザーインターフェース)の下絵が完成しました。

何となく全体像が見えてきましたね。

実機端末での確認
さらにこだわりたい方は、実機のスマホで要素のサイズを確認してみると良いでしょう。
PC画面で見るのとスマホの小さな画面で見るのとでは印象が変わってきます。
細かく作る前に要素のサイズを実機確認して整えておくと後の修正が少なくなります。

UIだけ表示させてみると…

キャラと背景を非表示にしてUI(ユーザーインターフェース)だけを表示させてみました。
単色なので地味ですね。線画の状態です。

次は質感を付けていきましょう。

PSDを配布中です!

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

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

fantiaからダウンロードする

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

中編に続く

前編の終了です、おつかれさまでした。

今回の内容は文字ツールとシェイプツールの使い方がミソです。

なお、入力した「だけ」のデフォルト文字をそのまま使うのはあまりよろしくないので、調整を入れるクセを付けておく事をオススメします。

入力した「だけ」の文字は「デザインされていない」ので気を付けてください。
もし入力した「だけ」の状態で完成として作品集に載せると「おっ、ラフかな?ほいでほいで?」となってしまうかもしれません。

フォントを変える、サイズを変える、文字間を変える、ちょっと触るだけでイメージがガラッと変わりますので文字パネルをガンガン触ってみましょう!

中編で質感の付け方について解説します。

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

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

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

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