-
【連載】デザイナー志望者必見！デザインをより良くするための1UPプチ講座【part07】
-
2015.12.03
-
投稿者： びすこ
-
皆様こんにちは、びすこです。
昨日は2015FNS歌謡祭が放送されていましたね！
平均視聴率は16.1%、瞬間最高は19年ぶり出演の中山美穂が「ただ泣きたくなるの」を熱唱するシーンと、
AKB48&谷村新司の「赤鼻のトナカイ」で20.2%を記録したそうです。
一方私はその時間帯に社員の皆さんとひと狩りしていました・・・
しかし！昨日のFNS歌謡祭が観れなかった・・・そんな方に朗報です！
今年は二日間放送があるそうで、次の放送は16日なんだそうです。
ライブ演出で放送されるそうなので、次こそは観たいですね！
さて、本題に入りますが！
今回は「ゲームUIデザイン制作」についてやっていきたいと思います。
UIとはUser Interface（ユーザーインタフェース）の略称で、
例えばサイトやゲーム画面などの全体のデザインのことを指します。
UIはゲームを作る上ではとても重要で、UIデザインで良ゲーかどうかが決まることもあると言っても過言ではないです。
海外ではUIデザイナーというUI専門でデザインをする職種もあるくらいなんです。
日本ではまだまだUIにかなり力を入れているところは少ないので、
今後日本でももっとUIに力を入れるところが増えてくるといいですね。
それでは、今回はこのようなスマホゲームのボタンを作ってみましょう。
こちらはホーム画面に出るような大きめのボタンを意識してデザインをしてみました。
「ダンジョン」のボタンがこのゲームのメインの要素で、「カード編成」や「デッキ編成」は「ダンジョン」の次に大事な要素になります。
まずは真ん中の「ダンジョン」ボタンを作成してみましょう！
使用ソフトはPhotoshopCS6、IllustratorCCになります。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
step1:ゲームにおいて一番目立つボタンを作る
まずは多角形ツールで正六角形を作ります。
次にこの六角形のレイヤーをダブルクリックしてレイヤースタイル画面を表示。
今回は境界線・光彩（内側）・グラデーションオーバーレイにチェックを入れて編集します。
それぞれの設定は以下のとおりです。
境界線の設定
光彩（内側）の設定
グラデーションオーバーレイの設定
これらを適用すると・・・
このような六角形ができます。
次に、今度はこの六角形のレイヤーを複製し、レイヤースタイルの境界線と光彩（内側）を外してスマートオブジェクトに変換します。
そしてレイヤーモードを乗算（不透明度・塗りは共に100%）にします。
そのあとにオブジェクトを60°回転させるとこのような形になります。
ここまでできたら今度はもう一度複製したレイヤーをさらにもうひとつ複製し、
レイヤーモード・オブジェクト回転を先程と同じように調整します。
こんな感じになりました。だんだん宝石っぽくなってきました！
次に、ベースの六角形より小さい六角形を作成します。
サイズはお好みでどうぞ。
こちらもレイヤースタイル画面を開き、グラデーションオーバーレイにのみチェックを入れ調整します。
設定は以下のとおりです。
グラデーションはベースで入れたものと同じ色味で入れます。
これを適用するとこのような感じになります。
あとは宝石の左上の方にハイライトを入れ、宝石っぽさをプラスします。
ハイライトレイヤーはモード通常、不透明度24%で他は何もいじっていません。
これでベースの方は大方完成です。次にIllustratorで作成した魔法陣をコピペで貼り付けます。
スクリーンショットでは見易いように灰色になっていますが、実物は白で作成しています。
この魔法陣にもまたレイヤースタイルを付け足します。
設定は以下のになります。
適用後はこちら。
これであとは文字を配置して全体をレイヤースタイルで調整して・・・
メインボタンの方は完成です！！！
さて、時間の方も迫ってまいりましたのでここまでのまとめです。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
まとめ
1：レイヤースタイルを最大限活用する
レイヤースタイルを上手く使いこなすことによって、
このように立体感のあるオブジェクトを作成することができます。
2：UIを制作する際にはPhotoshopとIllustrator両方があるとベスト
Photoshopでも細かいオブジェクトを作成することはできますが、
Illustratorの方が作りやすい場合もあるのでIllustratorもあると更にグッドです。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
いかがでしたでしょうか？
最後の方は少し駆け足になってしまいましたが、
次回は両サイドのボタンなどについてやっていきたいと思っております。
質問などがございましたら気軽に書き込みくださいませ！
次回講座にもこうご期待ください！引き続きよろしくお願いいたします！The following two tabs change content below.
びすこ
現在修行中の新人デザイナー。 いつかビッグでスーパーなデザイナーになることを夢見て日々奮闘中。 洋服と音楽とキャラクターグッズに囲まれて暮らしていて、 二次元アイドルガチ勢。実はてっくんの生みの親。最新記事 by びすこ (全て見る)
- 【再掲載】テクノアートデザイナーも胸キュン！変わりダネのバレンタインチョコ7選 - 2023年2月1日
- 【再掲載】デザイナー志望者必見！デザインをより良くするための1UPプチ講座【part09】 - 2022年6月13日
- 【再掲載】デザイナー初心者必見！びすこのデザインブログまとめ！ part1 - 2022年5月19日
