ゲームUI素材作成 ファンタジー系ボタンその1-part1

スポンサーリンク




今回はファンタジーゲームのボタン素材の作り方の一例を紹介します。

どんな物を作るか!サンプル紹介

絵でもなんでも全ては模倣から始まるものです。
市場には様々なゲームが無料で遊べるという素晴らしい環境に私たちはいます。
なので、とりあえず無料の大人気ゲームのデザインを参考にさせて頂きましょう。

今回は、巷で大人気!
サーヴァントと呼ばれるユニットをデッキ編成し敵と戦うスマホゲーム、FGO風なボタンの作成です。
さて、とりあえずはどんなものを作るのかということで見本を用意しました。
こんな感じ(あくまでもそれっぽい)を目標にしていきましょう。

1、ドキュメントの新規作成と背景設定

まずはドキュメントの作成です。これが無いとどうにもならないのでまずはメニューバーから「新規作成」です。
縦横ともに500px程度でいいでしょう。

設定をこのようにしてOK!

次に背景の設定です。私が素材を作成する時は、基本的に背景を少し暗めのグレーにして作成することが多いです。
背景なんて、なんでもいいんじゃない?って思われる方もいるかもしれませんがドロップシャドウを落としたりした際の感覚が掴みやすいのでそうしています。

金木
ボタンや各素材を作成した時は、レイヤースタイルのドロップシャドウを落とす場合が多々あります。
ドロップシャドウを落とす事で画面内にしっかりと設置してあるのが掴みやすくなったり、立体感などを表現する上で欠かせない要素だからです。

2、ベース作成

2-1 ボタンのベース

次にベースとなる形を作って行きましょう。
基本的にシェイプを使ってベースを作りましょう。
修正や使い回しに強いデータを作るにはシェイプが欠かせません。

ツールボックスから楕円形ツールを選択して、画面の大体中央にALTを押しながら図形を描きます。
また途中からSHIFTも押しましょう。ちょっと慣れるまでは指が大変かもしれません。

”ALTを押してからSHIFTを押して描く事で、クリックしたところを中心に円が描かれ、
またSHIFTを押したことによって正円を描くことができます。”

さて、正円は作れましたが寸法が適当ですのでそれを修正しましょう。
CTRL+Tで自由変形→上部のオプションの箇所にパラメーターを入れる場所があるので、
そちらにw380px h380pxと入力しましょう。
またXとYの値に250pxを入力します。

ドックから属性パネルを表示して寸法と位置を決めることもできます。ただしX座標とY座標は対象の左上(ここでは円のシェイプ)の座標を表示しているのでオプションバーの座標とは数値が異なります。

これで画面に対して中央の位置に直径が380pxの正円が出来ました。
分かり易いようにレイヤーに[base]と名付けておきましょう。
また、色も適当に青系にします。

2-2 フレームのベース

次にボタンの外側にあるシルバーのフレームのベースとなるシェイプを作りましょう。

先ほど作ったbaseレイヤーを複製します。
名前をframeとしておきましょう。これをまた自由変形でw400px h400pxに変更します。色は#ffffffにしておきましょう。
さらにframeを複製します。これを自由変形で先ほどの円より少し小さいサイズに変形します。サイズを変更する際には縦横の比率が崩れないように気を付けてください。
色は分かり易いように適当なグレーにしておきましょう。

現在は上の画像のようになっているかと思います。
レイヤー構成は、背景を除いて[base] [frame] [frameのコピー]の3枚です。

先ほどのグレーの円のレイヤーをアクティブにした状態で、
パスコンポーネントの選択ツール(黒い矢印)をクリックします。


上部オプションバーからパスの操作をクリックして全面シェイプを削除に切替えます。
そうすると、シェイプが反転したかのような表示になりますが問題ありません。

パスコンポーネントの選択ツール(黒い矢印)とパス選択ツール(白い矢印)はどちらも
パスを操作することでシェイプを編集することができます。
詳しくはシェイプに関しての記事をご覧ください。

先ほどのframeとframeのコピーを二つ選択してCTRL+Eを押しましょう。
(レイヤーを右クリックしてレイヤーの結合をするのと同じ効果です。)
これで上のレイヤーの正円で、下のレイヤーの正円を切り抜くことができ、
白いドーナツ状のシェイプができました。

2-3 トゲパーツ作成

ツールボックスから長方形ツールを選択して
Shiftを押しながら正方形を描きます。大きさは大体70px程度あればいいかなと思います。

これをCTRL+Tで自由変形モードに切り替えて正方形の角を掴んで45度回して菱形にします。
先ほどはパスコンポーネントの選択ツールでしたが、今度はパス選択ツール(白い矢印)を使って、上の角を選択して上にまっすぐ動かしてトゲを作りましょう!
まっすぐ動かす時はShiftを押しながら上にドラッグすることで、まっすぐに動かすことができます。
あとは自由変形で横幅や縦幅などを微調整です。
このシェイプレイヤーには[parts]と名付けておきましょう。

トゲパーツは全部で4つ必要なので、複製しましょう。
今、上側に作ったのでALTを押しながらシェイプを移動することで複製、上部メニューから「編集」→「パスを変形」→「垂直方向に反転」を実行。
すると上下に反転したトゲが出来ます。移動ツールを使って下側に移動しましょう。

途中でデータを失って作り直したので少しだけ素材の大きさなどが違いますがあまり気にしないでください。
やはり保存は大事ですね。

あと2つトゲが必要なので、これまで作ったトゲパーツのレイヤー2つを選択します。
レイヤーパネルで右クリックでレイヤーの複製をするか、ショートカットのCTRL+Jでレイヤーを複製します。
複製をするとレイヤーが4つになるので複製されたレイヤーに対して自由変形を行います。位置はそのままに90度回転させましょう。
するとトゲが円に対して4方向にある形になると思います。

今度はトゲの[parts]レイヤーの4つ全てを選択して、レイヤーパネルから右クリック→シェイプを結合する(ショートカットはCTRL+Eです。)で全てのシェイプを結合した上で、自由変形で45度回転させます。

2-4 frame_underの作成

次はまた[frame]レイヤーに戻りましょう。
[frame]を複製して、今までの[frame]を[frame_top]に新しく複製したものを[frame_under]とします。
レイヤー順序を[frame_under]を[frame_top]の下に移動します。
そして、[frame_under]を自由変形して[frame_top]よりも小さくします。

[parts]と[frame_top]のレイヤーを選択してシェイプの結合を行います。レイヤーを結合する際は[parts]を上に、[frame_top]が下にある状態で結合してください。
順序が間違うと[parts]のトゲが無くなってしまいます。
もし間違ってたら落ち着いてCTRL+Zで戻ってレイヤーの順序を入れ替えて再度、結合してみてください。

これで一通りのベース作成ができました。
シェイプを結合した過程で[parts]レイヤーの色が変わってしまいましたので、明るめのグレーに戻しておきます。

次回はレイヤースタイルで詳細を作っていきます。

ゲームUI素材作成 ファンタジー系ボタンその1-part2

2017.06.15

スポンサーリンク







コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です