この記事を読むのに必要な時間は約 18 分です。
スマホゲームのUI（ユーザーインターフェース）をPhotoshop(フォトショップ)で作る方法の後編です。
前編で画面全体の下絵づくり、中編でレイヤー効果を使った質感の付け方について解説しました。
後編では残りのアイコンとバナーの制作について解説します。
完成までもう少しです！
頑張って最後まで完成させましょう！
では開始です！
この記事の目次
前編、中編までで作成した画面UIです。
右側のバナーとボタンが残っていますので、それらを作成していきます。
闘技場のボタンアイコンを作成
ベースのシェイプにレイヤー効果のグラデーションオーバーレイで色を付けて境界線を追加します。
別レイヤーで角にハイライトを書き加えたらフチの完成です。
シャドウ（内側）を追加して落ち影を作ります。
コチラの無料素材を使っています。ゼロからこういう模様を作るのは結構面倒なので楽をします。
サイズと色調整をし、別レイヤーで赤みを加えたりします。同じ青系ばかり使うのではなく、別の色を差し色に使うと深みが増します。
レイヤー効果の光彩（外側）を追加し、少し浮かび上がらせます。
AIやPSDをはじめとした全Adobe製品のネイティブ形式の素材データが揃っています。
ダウンロードし、文字を編集するだけで高品質な作品が作成可能です。もちろん商用利用可能！
ソーシャルのボタンアイコンを作成
バナー1「荒レ狂う怪神」のバナー
悪魔降臨イベントらしく赤黒いイメージで作りました。
小寒いタイトルを付けて中二臭い内容のバナーにすると「ゲームっぽく」なります。
レイヤー効果だけでなく、新規レイヤーを追加してぼかしブラシでハイライトやシャドウを付け加えるのも良いと思います。
もちろんキャラクター以外にも簡単にアニメーションを加えられます。
【Live2D Cubism】
レイヤー効果（レイヤースタイル）のグラデーションオーバーレイを適用し、グラデーションの角度を調整します。
最後に不透明度を下げ、馴染ませるように調整を加えて完成です。
独学は時間がかかる割に非効率的な学習になりがちです。現役デザイナーのプロによる授業、転職を見据えた実践的なカリキュラム、手厚い転職サポートで短時間で転職を成功させましょう。
無料体験レッスンについて詳しく見る
バナー2「ログインでジェムGET」のバナー
よくありますよね、「ログインすると〇〇プレゼント」的なバナー。
青色の宝石が映えるように透明感のあるバナーを作ってみましょう。
ゼロから作るのは面倒なのでコピーしてサイズを変更し、サクッと作ります。
フチの落ち影はシャドウ(内側)で作成します。
ジェムはヘッダーの絵をコピペしています。
境界線を2重にしたい場合は文字レイヤーをコピーし、境界線の色を変えて太くすると2重にできます。
キラキラの落ち影も忘れずレイヤー効果で追加しておきましょう。
はマイナビクリエイターが提供している高品質なポートフォリオを無料で作成できるサービスです。作品とテキストを準備するだけで簡単にポートフォリオが作成できます。PDFに出力できるので紙媒体とWeb媒体の両方を超簡単に作成可能！
無料で使えるMATCHBOX
を活用し最短でポートフォリオ制作とクリエイティブ業界への転職を実現しましょう。
一通り完成しました。おつかれさまでした。
後編のバナー2つとボタン2つで1.5時間、画面全体で5時間程です。
使えそうな無料素材をガンガン活用すると時間短縮に繋がります。
UI要素だけ表示してみるこんな感じです。
スマホゲームでよく作りそうなパターンでマイページを作成してみました。
ブラシツールで塗るのもアリなのですが、レイヤー効果を使うと簡単に質感が付けられます。
意外と知られていない機能ですが、Photoshop（フォトショップ）では非常に便利な機能なので是非使ってみてください！
コンプリートプランが最強に便利ですが、Photoshop単品は次のリンクから入手できます。
以上、スマホゲームUI（ユーザーインターフェース）の作り方を前編、中編、後編で紹介しました。
当記事で紹介した他にも表現方法や作り方はいくらでもありますので、さらに発展させて素晴らしい作品作りの手助けになれば幸いです。
自身で考えたオリジナルゲームのマイページを形にすると、次は「ロゴ作ってみようかな」とか「編成画面を作ってみようかな」とか、いっそ「企画書を作ってみようかな」とかとか、妄想が広がります。
デザイナーとしてゲーム業界を目指されている方はキャラ絵だけでなく、キャラを素材として使い架空のゲームUI（ユーザーインターフェース）画面や企画書などを作ってみるのはいかがでしょうか？
ポートフォリオに載せるとより魅力的になり、採用担当者の目に留まる可能性が高まるかもしれません。
WEB業界系のポートフォリオはスッキリキレイ目の作品が多い傾向にあるので、ゲームのようなゴテっとした作品を載せておくと、他者と差別化できて目を惹かせる可能性があるかも？
ではまた！
ゲーム業界、デザイン業界を目指されている方には必要になるであろうポートフォリオの基礎知識から制作方法やコツについて解説しております。
A4サイズのテンプレートも無料で配布しておりますのでご活用ください。
オススメはコンプリートプラン
初めからコンプリートプランを選択する方が断然お得&便利ですよ。
学生・教職員なら
学生や教職員の方にオススメなのが
アプリ1本分の価格で全てのAdobe製品が使い放題！
Photoshop単品ならフォトプランが最安
Photoshopを使うならAdobe公式のフォトプランが一番お得です。
※アマゾンや他サイトのフォトプランは、1TBのオンラインストレージが付いて倍くらいの価格です。
制作を加速させる最強素材サイト
無料素材とは一味違うので手を加える手間が劇的に省けますよ。
ゼロから始めるPhotoshopのもくじです。
IllutratorとPhotoshopの使い方をゼロから解説する「ゼロから始めるIllustrator」と「ゼロから始めるPhotoshop」の目次リンクです。
本業が教えるイラレとフォトショ講座の目次は下記からどうぞ。
