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

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

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

スマホゲームのUI(ユーザーインターフェース)をPhotoshop(フォトショップ)で作る方法の後編です。

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

完成までもう少しです!
頑張って最後まで完成させましょう!

では開始です!

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

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

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

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

STEP.1
フチを作成する
フチを作成します。
ベースのシェイプにレイヤー効果のグラデーションオーバーレイで色を付けて境界線を追加します。

別レイヤーで角にハイライトを書き加えたらフチの完成です。
STEP.2
内側のベースを作成する
内側のベースをフチのシェイプをコピーして作成します。

シャドウ(内側)を追加して落ち影を作ります。
STEP.3
背景の情報量を増やす
ベースの下地の情報量を増やします。
コチラの無料素材を使っています。ゼロからこういう模様を作るのは結構面倒なので楽をします。

サイズと色調整をし、別レイヤーで赤みを加えたりします。同じ青系ばかり使うのではなく、別の色を差し色に使うと深みが増します。
STEP.4
アイコンを配置
アイコンを配置します。

レイヤー効果の光彩(外側)を追加し、少し浮かび上がらせます。
FINISH
文字に境界線を追加して完成
闘技場の文字に境界線を追加して完成です。
AdobeStock
高クオリティ素材サイトのAdobeStockで制作を加速させよう
無料の素材サイトとは比較にならないクオリティのAdobeStockは導入されているでしょうか?

AIやPSDをはじめとした全Adobe製品のネイティブ形式の素材データが揃っています。
ダウンロードし、文字を編集するだけで高品質な作品が作成可能です。もちろん商用利用可能!

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

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

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

バナーを作成

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

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

STEP.1
フリーフォントの源界明朝
イベント名の「荒レ狂う怪神」で使っているフォント、特徴的ですよね。源界明朝というフリーフォントを利用しています。商用無料、素敵です。
イラストはメインキャラ同様に過去の没絵を再利用してみました。
STEP.2
フチの枠を作成
フチは中編で使い倒したレイヤー効果(レイヤースタイル)を使って質感を付けます。せっかくだから四隅に留め具的な素材も配置してみたり。
レイヤー効果だけでなく、新規レイヤーを追加してぼかしブラシでハイライトやシャドウを付け加えるのも良いと思います。
STEP.3
背景を作る
赤黒い悪魔チックな背景を作ります。SNAOさんの素材をベースに作りました。フリーで使えるなんて素敵です。ゼロベースだと作成が大変なのでフリー素材を活用すると時間短縮ができます。
調整レイヤーの色相・彩度で色を変えます。
Live2D Cubism
Live2Dで自分の作品にアニメーションを付ける
自身で作成したキャラをLive2Dで動かしてみませんか?VTuver用のキャラクター作成、映像作品、Webサイトなど用途は無限大ですよ。

もちろんキャラクター以外にも簡単にアニメーションを加えられます。

【Live2D Cubism】
STEP.4
左上の予告を作成
左上の「予告EVENT」の下地を作ります。
レイヤー効果(レイヤースタイル)のグラデーションオーバーレイを適用し、グラデーションの角度を調整します。
STEP.5
文字を調整する
文字にグラデーションオーバーレイとドロップシャドウを追加して質感を付けます。
FINISH
調整して完成
背景が少し明るいので、レイヤーを追加してぼかしブラシで適当に黒く塗ります。

最後に不透明度を下げ、馴染ませるように調整を加えて完成です。
CodeCamp(コードキャンプ)
デザインをオンラインで効率的に学習
本気で未経験からプロのデザイナーに転職を考えられている方は CodeCamp(コードキャンプ) がおすすめです。

独学は時間がかかる割に非効率的な学習になりがちです。現役デザイナーのプロによる授業、転職を見据えた実践的なカリキュラム、手厚い転職サポートで短時間で転職を成功させましょう。

無料体験レッスンについて詳しく見る

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

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

STEP.1
フチを作る
フチは先の「荒レ狂う怪神」と同じです。

ゼロから作るのは面倒なのでコピーしてサイズを変更し、サクッと作ります。

STEP.2
下地のベースを作る
ベースのグラデーションはレイヤー効果を使って作ります。

フチの落ち影はシャドウ(内側)で作成します。
ジェムはヘッダーの絵をコピペしています。

STEP.3
下地の情報量を増やす
中身の情報量を増やすために水智さんの素材を利用させていただきました。フリーで素敵すぎます。

描画モード:オーバーレイ、不透明度:65%にして重ねています。

STEP.4
文字を彩る
文字に色を載せます。グラデーションオーバーレイ、境界線を使って表現します。

境界線を2重にしたい場合は文字レイヤーをコピーし、境界線の色を変えて太くすると2重にできます。

STEP.5
ジェムに落ち影を追加
ジェムに白の細い境界線と白のドロップシャドウを追加して浮かび上がらせます。
FINISH
キラキラを追加して完成
仕上げにイラレで作ったキラキラ素材をフォトショにコピペして飾れば完成です。

キラキラの落ち影も忘れずレイヤー効果で追加しておきましょう。

MATCHBOX
ポートフォリオ制作&転職を最速で実現
MATCHBOX はマイナビクリエイターが提供している高品質なポートフォリオを無料で作成できるサービスです。

作品とテキストを準備するだけで簡単にポートフォリオが作成できます。PDFに出力できるので紙媒体とWeb媒体の両方を超簡単に作成可能!

無料で使えるMATCHBOX を活用し最短でポートフォリオ制作とクリエイティブ業界への転職を実現しましょう。

完成!

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

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

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

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

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

PSDを無料配布中です!

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

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

fantiaからダウンロードする

Photoshopが必須
PSDを編集するにはAdobe Photoshop(アドビ フォトショップ)が必須です。公式サイトからダウンロードしておきましょう。
コンプリートプランが最強に便利ですが、Photoshop単品は次のリンクから入手できます。

まとめ

以上、スマホゲームUI(ユーザーインターフェース)の作り方を前編、中編、後編で紹介しました。

当記事で紹介した他にも表現方法や作り方はいくらでもありますので、さらに発展させて素晴らしい作品作りの手助けになれば幸いです。

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

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

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

ではまた!

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

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

Photoshopを最安で導入しよう

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

単品よりも圧倒的にお得で便利なCreative Cloudコンプリートプランがオススメです。Photoshop、Illustrator、Acrobatを単体で使うと、費用がコンプリートプランと同等かそれ以上になります。
初めからコンプリートプランを選択する方が断然お得&便利ですよ。

学生・教職員なら

学生や教職員の方にオススメなのが
アプリ1本分の価格で全てのAdobe製品が使い放題!

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

Photoshopを使うならAdobe公式のフォトプランが一番お得です。

アマゾンや他サイトのフォトプランは、1TBのオンラインストレージが付いて倍くらいの価格です。

制作を加速させる最強素材サイト

最強素材サイトであるAdobeStockがあると制作の効率性、品質がさらに高まります。
無料素材とは一味違うので手を加える手間が劇的に省けますよ。

ゼロフォトもくじ

ゼロから始めるPhotoshopのもくじです。

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

IllutratorとPhotoshopの使い方をゼロから解説する「ゼロから始めるIllustrator」と「ゼロから始めるPhotoshop」の目次リンクです。
本業が教えるイラレとフォトショ講座の目次は下記からどうぞ。