PhotoshopやIllustratorを使ってオリジナルゲームUI制作に挑戦してみましょう。
この記事の目次
当ゲームUI画面制作についての授業概要とゲームUIの作例について解説します。
何をする授業？
当授業では自身のキャラクターイラストを使ってゲームUIの制作に挑戦します。
以前の授業でバナー制作等を行いましたが、基本的にはその時同様PhotoshopやIllustratorを活用してゲームUIを作成します。
なお、UI制作にはみなさんが想像されている以上に時間と手間がかかります。
授業回数は10回ですが時間的余裕はありません。
なるべく効率的に制作を進めていくよう授業に取り組んでいきましょう。
制作に手間はかかりますが、ポートフォリオに載せる素材として活用できます。
皆さん是非力の入った作品を作成してください。
ゲームUIの作例
下記はみなさんの先輩方が作られたゲームUIの作例です。
ゲームジャンル、縦画面、横画面など、ゲームUIであれば自由です。
授業のスケジュールや作品の仕様・提出形式について記載しています。
授業スケジュール
当授業のスケジュールです。
全9回を予定していますが、制作物する要素が多い内容なので余裕はありません。
各回で進めておくべきフェーズを解説しますが、進捗が芳しくない方は時間を作ってなるべく自主的に進るようにしてください。
| 日程 | 内容 |
|---|---|
| ① 2023/01/17 | 授業概要、ゲームUIのネタを練る～ラフ作成① |
| ② 2023/01/24 | ラフ作成② |
| ③ 2023/01/31 | 画面制作 線画① |
| ④ 2023/02/07 | 画面制作 線画② |
| ⑤ 2023/02/14 | 画面制作 線画③ |
| ⑥ 2023/02/21 | 画面制作 質感付与① |
| ⑦ 2023/02/28 | 画面制作 質感付与② |
| ⑧ 2023/03/07 | 画面制作 質感付与③＆調整 |
| ⑨ 2023/03/14 | 提出日、プレゼン |
画面制作が早く終わった方はタイトル画面やその他画面など、別画面の制作に挑戦してみましょう。
作品の仕様と提出形式
- オリジナルキャラを使用（新規作品の必要無し、既存のオリジナルキャラクター）
- ドキュメントサイズ：1920x1080px 72px/inch
- 画面の向き：縦、横どちらでもOK
- 作成画面数：1画面以上（複数でも可）
- 提出ファイル①：JPEGで書き出した画像
- 提出ファイル②：元のPSDファイル（解像度は元々作成していた状態で、レイヤーは整理）
- 提出期限：2023/03/28の授業終了まで
※作成する画面は要素の多い「ホーム画面」を基本とします。
当授業では素材の使用について制限は設けておりません。
商用利用可能な素材であれば自由に活用してください。
例えば背景など、作成に時間と手間が掛かる素材は積極的に活用していただいて構いません。
ライセンスを気にせず活用ができるのでオススメですよ。
実際にゲームUIを作成する流れについて解説します。使用ツールは主にPhotoshopでデザイン・レイアウト・質感付与を行い、Illustratorでアイコンやロゴなどの元素材を作成します。
両ツールを併用しながら効率的にゲームUIを作成しましょう！
ゲームUIの作り方まとめ
デザインの引き出しが少ないまま完全オリジナルデザインで作ろうとすると、どうしてもクオリティの面で物足りない作品に仕上がりがちです。作画同様、まずは良質なデザインを参考にしつつ、オリジナル要素を加えてみましょう。
Google検索だけでなくピンタレスト等で「ゲームUI」等のキーワードで検索し、自身の作りたいゲームUIのサンプルを数点探しておきましょう。
① ネタとラフを考える
まずは作成するゲーム画面のネタを考えましょう。
剣と魔法のRPG、SF系シューティング、現代世界の推理モノ、戦国時代モノ、学園モノ…etc、自身が好きなネタを考えます。
※ラフ作成のスケジュール感としては1/24中に完成させるのが望ましいです。
上記が今回の課題で作るゲーム画面のサイズです。
Photoshopで作成し、背景とキャラクターを配置しましょう。
Photoshopで新規レイヤーを作成し、黒で塗りつぶして不透明度を少し下げる。
その上に新規レイヤーを追加し、白のブラシでラフを追記する、等。方法は問いません。
アナログ、デジタル、自身が進めやすい方法で行ってください。
キャラ、背景のイメージとズレない世界観のゲームUIを目指しましょう。
要素の名称は作風に合うようにアレンジを加えてみるのも良いでしょう。（例：ガチャ→召喚）
ペタッとしたフラットデザインのような作風ならIllustratorでも構わないのですが、質感のある表現をしたい場合は断然Photoshopに軍配が上がります。
Illustratorはアイコンやロゴ等のベース素材作成に使うのが便利ですよ。
② 線画を作る
先に作成したラフを元に、ゲームUIの線画作成を行います。
アイコンなどのベースはIllustratorで作成すると効率的ですよ。
※線画作成のスケジュール感としては2/7、遅くとも2/14中に完成させるのが望ましいです。
クリスタ、Photoshop、紙にペンで書いたものをスキャン、お好きな方法で作成してください。
フリーのアイコン素材を活用するのもアリですが、自作する方がより作品に適した世界観を再現できますよ。
サンプルは塗りを黒、線は無しに設定しています。
アイコン制作はそれなりに労力が必要な作業ですが、頑張って作成してください。
全てベクターイラストなのでIllustratorやPhotoshopで活用できる素材です。
ペースト形式は [ スマートオブジェクト ] がオススメです。
イラレからフォトショへコピペする詳しい方法はコチラの記事で詳しく解説しています。
この段階では色を付けず、白黒で作成しておくのがオススメ。
複雑な形状のアイコンはIllustratorで作成、バナーやアイコンの下地となる長方形や丸形などはPhotoshopのシェイプで作成すると効率的ですよ。
オリジナルロゴの場合はアイコン同様にIllustratorで作成し、スマートオブジェクト形式でPhotoshopにペーストしておくと便利。
スマホゲームならスマホで、コンシューマーゲームならテレビなどのモニタ等、実際にプレイする実機端末で確認する事が重要です。白黒の線画状態で直しておく方が後々の修正が楽ですよ。