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

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

スマホゲームのUI（ユーザーインターフェース）をPhotoshop(フォトショップ)で作る方法について後編です。完成までもう少しです！頑張って最後まで完成させましょう！

前編で画面全体の下絵づくり、中編でレイヤー効果を使った質感の付け方について解説しました。後編では残りのアイコンとバナーの制作について解説します。

では開始です！

この記事の目次

これまでで作成したところ

前編、中編までで作成した画面UIです。
右側のバナーとボタンが残っていますので、それらを作成していきます。

闘技場、ソーシャルを作成

闘技場のボタンアイコンを作成

STEP.1

フチを作成する

フチを作成します。ベースのシェイプにレイヤー効果のグラデーションオーバーレイで色を付けて境界線を追加します。
別レイヤーで角にハイライトを書き加えたらフチの完成です。

STEP.2

内側のベースを作成する

内側のベースをフチのシェイプをコピーして作成します。シャドウ（内側）を追加して落ち影を作ります。

STEP.3

背景の情報量を増やす

ベースの下地の情報量を増やします。コチラの無料素材を使っています。ゼロからこういう模様を作るのは結構面倒なので楽をします。
サイズと色調整をし、別レイヤーで赤みを加えたりします。同じ青系ばかり使うのではなく、別の色を差し色に使うと深みが増します。

STEP.4

アイコンを配置

アイコンを配置します。レイヤー効果の光彩（外側）を追加し、少し浮かび上がらせます。

FINISH

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

闘技場の文字に境界線を追加して完成です。

ソーシャルのボタンアイコンを作成

闘技場のアイコンと同様の手順で、色とアイコンを変えて作成します。

コピペして調整レイヤーの色相・彩度で調整すると簡単に色違いが作れます。

バナーを作成

バナー1「荒レ狂う怪神」のバナー

悪魔降臨イベントらしく赤黒いイメージで作りました。小寒いタイトルを付けて中二臭い内容のバナーにするとゲームっぽくなります。

STEP.1

フリーフォントの源界明朝

イベント名の「荒レ狂う怪神」で使っているフォント、特徴的ですよね。源界明朝というフリーフォントを利用しています。商用無料、素敵です。
イラストはメインキャラ同様に過去の没絵を再利用してみました。

STEP.2

フチの枠を作成

フチは中編で使い倒したレイヤー効果（レイヤースタイル）を使って質感を付けます。せっかくだから四隅に留め具的な素材も配置してみたり。
レイヤー効果だけでなく、新規レイヤーを追加してぼかしブラシでハイライトやシャドウを付け加えるのも良いと思います。

STEP.3

背景を作る

赤黒い悪魔チックな背景を作ります。SNAOさんの素材をベースに作りました。フリーで使えるなんて素敵です。ゼロベースだと作成が大変なのでフリー素材を活用すると時間短縮ができます。
調整レイヤーの色相・彩度で色を変えます。

STEP.4

左上の予告を作成

左上の「予告EVENT」の下地を作ります。レイヤー効果（レイヤースタイル）のグラデーションオーバーレイを適用し、グラデーションの角度を調整します。

STEP.5

文字を調整する

文字にグラデーションオーバーレイとドロップシャドウを追加して質感を付けます。

FINISH

調整して完成

背景が少し明るいので、レイヤーを追加してぼかしブラシで適当に黒く塗り、不透明度を調整したら完成です。

バナー2「ログインでジェムGET」のバナー

よくありますよね、「ログインすると〇〇プレゼント」的なバナー。
青色の宝石が映えるように透明感のあるバナーを作ってみましょう。

STEP.1

フチを作る

フチは先の「荒レ狂う怪神」と同じです。面倒なのでコピーしてサイズを変更しサクッと作ります。

STEP.2

下地のベースを作る

ベースのグラデーションをレイヤー効果を使って作ります。フチの落ち影はシャドウ(内側)で作成します。
ジェムはヘッダーの絵をコピペしています。

STEP.3

下地の情報量を増やす

中身の情報量を増やすために水智さんの素材を利用させていただきました。フリーで素敵すぎます。
描画モード：オーバーレイ、不透明度：65%にして重ねています。

STEP.4

文字を彩る

文字に色を載せます。グラデーションオーバーレイ、境界線を使って表現します。
境界線を2重にしたい場合は文字レイヤーをコピーし、境界線の色を変えて太くすると2重にできます。

STEP.5

ジェムに落ち影を追加

ジェムに白の細い境界線と白のドロップシャドウを追加して浮かび上がらせます。

FINISH

キラキラを追加して完成

仕上げにイラレで作ったキラキラ素材をフォトショにコピペして飾れば完成です。キラキラの落ち影も忘れずレイヤー効果で追加します。

完成！

一通り完成しました。おつかれさまでした。

後編のバナー2つとボタン2つで1.5時間、画面全体で5時間程です。
使えそうな無料素材を活用すると時間短縮に繋がります。

UI要素だけ表示してみるこんな感じです。

スマホゲームでよく作りそうなパターンでマイページを作成してみました。
ブラシツールで塗るのもアリなのですが、レイヤー効果を使うと簡単に質感が付けられます。

意外と知られていない機能ですが、Photoshop（フォトショップ）では非常に便利な機能なので是非使ってみてください！

PSDを無料配布中です！

fantiaで当記事のPSDデータを無料配布しております。全ての要素をレイヤー分けして編集可能な状態になっていますよ。
PSDを参考にしながら作り方を学ぶとより理解が深まるかと思います！

まとめ

以上、スマホゲームUI（ユーザーインターフェース）の作り方を前編、中編、後編で紹介しました。
当記事で紹介した他にも表現方法や作り方はいくらでもありますので、さらに発展させて素晴らしい作品作りの手助けになれば幸いです。

自身で考えたオリジナルゲームのマイページを形にすると次は「ロゴ作ってみようかな」とか「編成画面を作ってみようかな」とか、いっそ「企画書を作ってみようかな」とかとか、妄想が広がります。

デザイナーとしてゲーム業界を目指されている方はキャラ絵だけでなく、キャラを素材として使い架空のゲームUI（ユーザーインターフェース）画面や企画書などを作ってポートフォリオに載せるとより魅力的になり、採用担当者の目に留まる可能性がさらに高まるかもしれません。

WEB業界系のポートフォリオはスッキリキレイ目の作品が多い傾向にあるので、ゲームのようなゴテっとした作品を載せておくと他者と差別化できて目を惹かせる可能性があるかも？

ではまた！

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

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

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

下記記事でポートフォリオについて解説しております。ゲーム業界、デザイン業界を目指されている方には必要になるであろうポートフォリオの基礎知識から制作方法やコツについて解説しております。A4サイズのテンプレートも無料で配布しておりますのでご活用ください。

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

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

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

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

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

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

Photoshopを最安で導入するには

Photoshop（フォトショップ）を持っていない方は、下記から最安値で購入できます。
各種通販サイト等で取り扱われていますが、結局Adobe公式サイトが最安値かつ安全です。

オススメはコンプリートプラン

単品よりも圧倒的にお得で便利なCreative Cloudコンプリートプランがオススメです。
アプリ単体を2つ3つ使うと費用がコンプリートプランと同等かそれ以上になります。

制作はPhotoshop、Illustrator、Lightroom、InDesign、Acrobat、etc…複数のアプリを使い分けながら作る事が多いです。
Photoshopで作業をしている際に「Illustratorなら効率的に作れるのに…」、「完成したデザインをPDFで複数ページに冊子形式にしたいなぁ…」という事は頻繁にあります。
なのでデザイナーにとって最低限Photoshop、Illustrator、Acrobatは必要です。

それならいっそ初めからコンプリートプランを選択する方が断然便利でお得ですよ。

学生・教職員なら

学生や教職員の方にオススメなのが
65%OFFはデカイですね！
アプリ1本分の価格で全てが使えます。

Photoshop単品ならフォトプランが最安

Photoshopを使うならAdobe公式のフォトプランが一番お得です。
Photoshop単体の半分以下の価格で、尚且つLightroomもセットになっているのが嬉しいですね。

※アマゾンや他の通販サイトのフォトプランだと、不要なオンラインストレージが付いて倍くらいの価格なので気を付けてください。