-
【連載】デザイナー志望者必見！デザインをより良くするための1UPプチ講座【part10】
-
2016.07.27
-
投稿者： びすこ
-
みなさまこんにちは、びすこです。
全国高等学校野球選手権大会、西東京大会がいよいよ今日行われるそうですね！
13時からなので、この記事が投稿される頃には決着がついているかもしれませんね。
今年は東海大菅生VS八王子。
果たして決勝戦常連の東海大菅生が勝つのか、
それとも早稲田実業を破った期待の八王子が勝つのか！？
結果が待ち遠しいですね！
さて、今回も前回に引き続き、「ゲームUIデザイン制作」をやっていきたいと思います。
ついにこの連載も２桁突入ですね！
前回でヘッダーの制作まで終わりました。
今回も前回のおさらいは割愛させていただきます。
まだ見てない！前回の内容を思い出したい！という方は
もしよければこちらを見てみてくださいね。
ではでは制作に入りましょう。
今回はヘッダー部分の作成です。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
step4：メニューボタンを作る
今回のメニュー部分はこちらになります。
ボタンの形が以前製作したダンジョンボタンに似ていますが、
ダンジョンボタンよりも作り方は簡単です！
まずは六角形を作成し、内側に光彩と銀のグラデーションで
境界線のレイヤースタイルを設定します。
次に、一回り小さい六角形を作成。こちらは塗りなし枠線のみの図形です。
これを銀の境界線の内側に乗せます。
そしたらボタンのハイライトを図形ツールなどで作成し、
不透明度を45%に設定。
ただし、この時クリッピングしてしまうと
銀の境界線にはハイライトがかからなくなってしまうので、
クリッピングせず自動選択で図形または背景を選択してマスクを作成しましょう。
反転が必要な場合は反転しましょう。
次に、魔法陣や文字を乗せ、ボタンをフォルダにまとめ、
フォルダ自体に境界線とドロップシャドウを適用。
これでボタンが一つ完成しました！
色違いも一つ作成して、同じデザインのボタンを合計で5つ作りましょう。
一つ作ってしまえばあとは文字を変えるだけなのですぐに終わるはずです。
というわけで、同じデザインのボタンを５つ作成しました。
次に、ボタンの下の座布団ですが
まず適当な長方形を図形ツールで作成し、
こちらもレイヤースタイルで境界線、グラデーション、外側光彩を適用。
あとはサイドのオブジェを作成します。
最初に図形ツールでシルエットを作成し、
上からピンクのラインなどをペンツールやブラシで描きこみます。
次に、こちらも境界線と外側光彩を適用して完成です。
完成したら、複製して反転し、右側にも配置します。
（スクショが用意できず文章のみの説明で申し訳ありません・・・）
これで座布団が完成したので、あとはボタンを表示させて
メニューの完成です。
他のバナーの矢印や上のメニューボタン、ミッションも作り方は同じなので割愛します。
これでゲーム風UIの完成です！
長かったですね、お疲れ様でした！！！！！
・・・で、枠が予想通り少し余ってしまったので
ところどころに使用している魔法陣素材の作り方をさらっと説明します。
（案外特別なことは何もしてないかもしれませんが・・・）
まずは黒と白の丸を作成します。
大きい方が黒、小さい方が白です。
そして２つとも選択した状態でパスファインダーの分割を選択。
すると分割されるので、小さい丸のみ選択して削除します。
これで外縁ができました。
ちなみに別の方法でも作成は可能で、
塗りを透明にし、黒線の円を作成したら
線の太さを調整→パスのアウトラインを作成、でもできます。
次に、大まかに魔法陣の中身を描きこんでいきます。
円と四角を拡大縮小したり、回転させたりするだけでわりとそれっぽくなります。
そしてさらに描きこんでいきます。
月のマークを８方に配置したり、
外縁は「Magic Ring」を使用しています。
こちらのフォントはフリーフォントなのですが、
とてもファンタジーっぽくなるのでオススメです！
気になる！という方はダウンロードはこちらからどうぞ。
さて、このままでも十分魔法陣ぽいのですが、
もう少し欲しいと感じたのでさらに描きこみました。
これで魔法陣の完成です。
まとめ
これでゲームUI編は終わりですが、いかがでしたか？
ほんの少しでも参考になっていたら、嬉しいです！
こちらのUIサンプルも実は作ったのがかなり前なので、
今見ると「ここはもう少しこうしたかった」などなどいっぱい出てきます。
私自身も成長しているということでしょうか・・・成長しているといいですね！
実はこの連載も残りがあと２回なのですが、
まだ内容が決まっていないので、何かためになる記事が書けたらいいな〜と思います。
ということで、次回は普段私が使用している素材サイトや、
フリーフォントをダウンロードできるサイトの紹介をする予定です！
質問などがございましたらお気軽に書き込みくださいませ！
最終回までお付き合いいただけたら嬉しいです！次回もよろしくお願いいたします！The following two tabs change content below.
びすこ
現在修行中の新人デザイナー。 いつかビッグでスーパーなデザイナーになることを夢見て日々奮闘中。 洋服と音楽とキャラクターグッズに囲まれて暮らしていて、 二次元アイドルガチ勢。実はてっくんの生みの親。最新記事 by びすこ (全て見る)
- 【再掲載】テクノアートデザイナーも胸キュン！変わりダネのバレンタインチョコ7選 - 2023年2月1日
- 【再掲載】デザイナー志望者必見！デザインをより良くするための1UPプチ講座【part09】 - 2022年6月13日
- 【再掲載】デザイナー初心者必見！びすこのデザインブログまとめ！ part1 - 2022年5月19日
