-
【連載】デザイナー志望者必見！デザインをより良くするための1UPプチ講座【part08】
-
2016.04.25
-
投稿者： びすこ
-
皆様こんにちは、そしてお久しぶりでございます。
デザイナーのびすこです。
アライドアーキテクツ株式会社が中小企業向けにYouTube上の動画広告
「TrueView」の制作・運用パッケージを提供開始したそうですね。
TrueViewは、AdWordsとYouTube動画を使って作成できる動画広告のことで、
YouTubeで配信される動画のほか、
Googleディスプレイネットワーク上のサイトやアプリに掲載することができ、
ユーザーが動画広告をスキップせずに30秒以上もしくは最後まで視聴した場合、
または動画広告をクリックするなどの操作を行うと視聴回数がカウントされ、
広告費用が発生するそうです。
なんと、そのTrueViewを動画の作成に必要な画像素材とテキスト、
遷移先のURLなどを用意するだけで作っていただけるんだそうです！
動画制作はどうしても会社に技術者がいない限りは費用がかかりがちな印象がありますが、
今から5月末までに申し込むと最低で20万程度で済んでしまうんだとか。
ここ最近はほとんどの方がスマートフォンなどで目にすることが増えてきた所謂「動く広告」ですが、
簡単に制作できるのは嬉しい限りですね。
詳しく知りたい方はこちら
ではそろそろ本題に入らせていただきたいと思います！
前回からかなり間があいてしまいましたが、
今回は前回やりました「ゲームUIデザイン制作」の続きをやっていきたいと思います。
前回はこの画像の真ん中のボタンを制作しました！
ここでさくっと前回のおさらいをしておきましょう！
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
前回のおさらい
1：レイヤースタイルを最大限活用する
レイヤースタイルを上手く使いこなすことによって、
このように立体感のあるオブジェクトを作成することができます。
2：UIを制作する際にはPhotoshopとIllustrator両方があるとベスト
Photoshopでも細かいオブジェクトを作成することはできますが、
Illustratorの方が作りやすい場合もあるのでIllustratorもあると更にグッドです。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
なんとな〜く前回やったことを思い出せていただけましたら幸いです！
まだ見てない！前回の内容を思い出したい！という方はもしよければこちらを見てみてくださいね。
ではではボタン制作編後半に入りましょう！ 使用ソフトは前回に引き続きPhotoshopCS6、illustratorCCになります。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
step2：ゲームにおいてメイン要素の次に重要となるボタンを作る
まずは角丸長方形ツールで適当な長方形を作成します。
次にこの角丸長方形の右下の角の部分を「パス選択ツール」を使って２点を選択し、引き伸ばします。
これができたら、今度は制作した角丸長方形のレイヤースタイル画面を表示。
今回は境界線、光彩（内側）、グラデーションオーバーレイにチェックを入れて編集します。
設定は以下の通りです。
境界線の設定
光彩（内側）の設定
グラデーションオーバーレイの設定
これらを適用するとこのような感じに。
次に、前回作った魔法陣を今回も使用します。
この魔法陣を別で適当に作った角丸長方形の中に入れて、カードの裏面風のイラストにします。
あとはこれだけでは寂しいのでハートをちりばめたり・・・
コピーしてカードを並べてみたり・・・
するといい感じになるかと・・・！
そのほかにも角の方になにか装飾がほしいな〜と思ったのでユリの紋章をつけてみました。
こちらも境界線とグラデーションオーバーレイのレイヤースタイルを付与しています。
ここまできたらあとは文字を載せて・・・
制作したボタンのレイヤーをフォルダにまとめて境界線、ドロップシャドウのレイヤースタイルを付与して・・・
完成です！！！！
青いボタンも色が違うだけで同じ方法で制作できます。
これでスマホゲームらしいボタンができました！！！！！！
しかしこれもまだまだ序の口・・・ほんの一部を制作したにすぎず、
UIデザインはとても時間のかかるものです。。。
気が遠くなるかもしれませんが、少しずつがんばっていきましょう！！
ちなみにお先に完成イメージをお見せいたしますが、こんな感じになります。
背景は・・・まあ・・・・・・・・・取り急ぎ用意したものなので次以降の講座までに適当なものに変えます・・・・・・・・・
次回はこの画像の上の部分を制作していきたいと思います！
質問などがございましたらお気軽に書き込みくださいませ！
次回講座にもこうご期待ください！引き続きよろしくお願いいたします！The following two tabs change content below.
びすこ
現在修行中の新人デザイナー。 いつかビッグでスーパーなデザイナーになることを夢見て日々奮闘中。 洋服と音楽とキャラクターグッズに囲まれて暮らしていて、 二次元アイドルガチ勢。実はてっくんの生みの親。最新記事 by びすこ (全て見る)
- 【再掲載】テクノアートデザイナーも胸キュン！変わりダネのバレンタインチョコ7選 - 2023年2月1日
- 【再掲載】デザイナー志望者必見！デザインをより良くするための1UPプチ講座【part09】 - 2022年6月13日
- 【再掲載】デザイナー初心者必見！びすこのデザインブログまとめ！ part1 - 2022年5月19日
