【連載】デザイナー志望者必見!デザインをより良くするための1UPプチ講座【part07】

投稿者: 


皆様こんにちは、びすこです。
昨日は2015FNS歌謡祭が放送されていましたね!
平均視聴率は16.1%、瞬間最高は19年ぶり出演の中山美穂が「ただ泣きたくなるの」を熱唱するシーンと、
AKB48&谷村新司の「赤鼻のトナカイ」で20.2%を記録したそうです。
一方私はその時間帯に社員の皆さんとひと狩りしていました・・・
しかし!昨日のFNS歌謡祭が観れなかった・・・そんな方に朗報です!
今年は二日間放送があるそうで、次の放送は16日なんだそうです。
ライブ演出で放送されるそうなので、次こそは観たいですね!

さて、本題に入りますが!
今回は「ゲームUIデザイン制作」についてやっていきたいと思います。
UIとはUser Interface(ユーザーインタフェース)の略称で、
例えばサイトやゲーム画面などの全体のデザインのことを指します。
UIはゲームを作る上ではとても重要で、UIデザインで良ゲーかどうかが決まることもあると言っても過言ではないです。
海外ではUIデザイナーというUI専門でデザインをする職種もあるくらいなんです。
日本ではまだまだUIにかなり力を入れているところは少ないので、
今後日本でももっとUIに力を入れるところが増えてくるといいですね。

それでは、今回はこのようなスマホゲームのボタンを作ってみましょう。
スクリーンショット 2015-12-03 15.03.05
こちらはホーム画面に出るような大きめのボタンを意識してデザインをしてみました。
「ダンジョン」のボタンがこのゲームのメインの要素で、「カード編成」や「デッキ編成」は「ダンジョン」の次に大事な要素になります。
まずは真ん中の「ダンジョン」ボタンを作成してみましょう!
使用ソフトはPhotoshopCS6、IllustratorCCになります。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

step1:ゲームにおいて一番目立つボタンを作る

まずは多角形ツールで正六角形を作ります。
151203_1
次にこの六角形のレイヤーをダブルクリックしてレイヤースタイル画面を表示。
今回は境界線・光彩(内側)・グラデーションオーバーレイにチェックを入れて編集します。
それぞれの設定は以下のとおりです。

境界線の設定
スクリーンショット 2015-12-03 15.11.52

光彩(内側)の設定
スクリーンショット 2015-12-03 15.13.55

グラデーションオーバーレイの設定
スクリーンショット 2015-12-03 15.14.35
スクリーンショット 2015-12-03 15.15.17

これらを適用すると・・・
151203_2
このような六角形ができます。

次に、今度はこの六角形のレイヤーを複製し、レイヤースタイルの境界線と光彩(内側)を外してスマートオブジェクトに変換します。
そしてレイヤーモードを乗算(不透明度・塗りは共に100%)にします。
そのあとにオブジェクトを60°回転させるとこのような形になります。
151203_3
ここまでできたら今度はもう一度複製したレイヤーをさらにもうひとつ複製し、
レイヤーモード・オブジェクト回転を先程と同じように調整します。
151203_4
こんな感じになりました。だんだん宝石っぽくなってきました!

次に、ベースの六角形より小さい六角形を作成します。
サイズはお好みでどうぞ。
151203_5
こちらもレイヤースタイル画面を開き、グラデーションオーバーレイにのみチェックを入れ調整します。
設定は以下のとおりです。
スクリーンショット 2015-12-03 15.28.17
グラデーションはベースで入れたものと同じ色味で入れます。

これを適用するとこのような感じになります。
151203_6
あとは宝石の左上の方にハイライトを入れ、宝石っぽさをプラスします。
151203_7
ハイライトレイヤーはモード通常、不透明度24%で他は何もいじっていません。

これでベースの方は大方完成です。次にIllustratorで作成した魔法陣をコピペで貼り付けます。
151203_8
スクリーンショットでは見易いように灰色になっていますが、実物は白で作成しています。
この魔法陣にもまたレイヤースタイルを付け足します。
設定は以下のになります。
スクリーンショット 2015-12-03 15.39.07
スクリーンショット 2015-12-03 15.40.11
適用後はこちら。
151203_9

これであとは文字を配置して全体をレイヤースタイルで調整して・・・
151203_10
メインボタンの方は完成です!!!

さて、時間の方も迫ってまいりましたのでここまでのまとめです。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
まとめ
1:レイヤースタイルを最大限活用する
レイヤースタイルを上手く使いこなすことによって、
このように立体感のあるオブジェクトを作成することができます。

2:UIを制作する際にはPhotoshopとIllustrator両方があるとベスト
Photoshopでも細かいオブジェクトを作成することはできますが、
Illustratorの方が作りやすい場合もあるのでIllustratorもあると更にグッドです。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

いかがでしたでしょうか?
最後の方は少し駆け足になってしまいましたが、
次回は両サイドのボタンなどについてやっていきたいと思っております。
質問などがございましたら気軽に書き込みくださいませ!
次回講座にもこうご期待ください!引き続きよろしくお願いいたします!
The following two tabs change content below.
びすこ

びすこ

現在修行中の新人デザイナー。 いつかビッグでスーパーなデザイナーになることを夢見て日々奮闘中。 洋服と音楽とキャラクターグッズに囲まれて暮らしていて、 二次元アイドルガチ勢。実はてっくんの生みの親。

コメントを残す

*