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