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

スポンサーリンク




ゲームUIの素材を作ろう!
ということで、大人気の某スマホゲー、FGO風のボタン作成ということで今回は第3回目となります。

前回はシルバーの金属フレームの装飾を一通り行いましてこのような感じになっております。

また、これまでの制作過程がどのようなものかをご覧になりたい方は下にリンクを貼っておきますので、是非そちらもご覧くださいませ!

第1回、第2回の記事はこちら

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

2017.06.15

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

2017.06.07

さてさて今回は、仕上げの作業になります。

1.テキストを加える

1-1 メインテキストを入れる

まず、いきなりですがテキストを入れて一気にボタンっぽくしてしまいましょう!
ボタンの大きさに合わせて、左側のテキストツールから「Attack」と文字を入力します。

文字のフォントは手持ちのもので、いい感じのものを使ってみてください。出来ればファンタジーのテキストっぽいやつがいいです。
フォントでだいぶ雰囲気は変わりますので色々と合うものを、ご自身のPC環境に合わせて試してみましょう。

フォントを打ったら、サイズと位置を合わせましょうテキストパレットや上部のオプションバーからきっちりポイントを打ってサイズを変更してもいいですが
なかなか面倒くさいので、自由変形(Ctrl+T)で一気にサイズ変更してしまいましょう!位置とサイズを調整してこんな具合になりました。

金木
適当に思われますが、時間は大事なので最初に大体合わせてから、中途半端になったポイントをきっちりとした数字に合わせて上げればいいかなと思ってます。

1-2 メインテキストの装飾

このままだと、白いだけのテキストで読みづらいのでレイヤースタイルで装飾をしていきましょう。

「Attack」のテキストレイヤーに対して、レイヤーパレットからレイヤースタイルを追加します。ここでは[境界線]、[グラデーションオーバーレイ]、[光彩(外側)]を適用します。

境界線の設定

グラデーションオーバーレイの設定

光彩(外側)の設定

レイヤースタイルを3種類加えるとこのような感じになります。

一気に雰囲気が出てきましたね。

1-3 サブテキストを加える

メインのテキスト以外にサブのテキストも入れましょう。

新規レイヤーを作成して、先ほどと同じようにテキストツールで[next fase]と入れました。
こちらの文字は白文字のままで大丈夫です。ただ、レイヤーパネルのレイヤーモードをボタンの内側に入れているラインのようにオーバーレイの設定に変更しておきましょう。
また、レイヤーの順序がメインのテキストよりも上になってる場合は下側に移動させておきます。

一通り出来たような感じですが、ここでもうひと手間、楕円形のハイライトを入れて立体感を強調します。

金木
おっ、大体出来てきましたね!

2.立体感を足す

2-1 ハイライトを入れる

メインのテキストレイヤー(Attack)の下に、楕円ツールでシェイプを作成します。画像のように正円ではなく上下に潰したような形にしましょう。(自由変形ツールで行いました。)

この楕円のシェイプ、そのままだとクッキリしすぎています。下側はうっすらとぼやけさせたいですね。ということで、こちらのシェイプレイヤーにマスクを掛けます。

2-2 グラデーションでマスクをする

レイヤーパネルの下に並んでいるボタンの左から3番目の「マスクを追加」をクリックするとレイヤーにマスクが追加されます。
次にグラデーションツールを選択します。グラデーションツールを使う時にマスクが選択された状態なのを確認してください。

マスクに対してグラデーションを掛けるので色の設定は、黒→黒です。透明度は徐々に0%になるようにしておいてください。
これで下から上に掛けて、マウスでドラッグをしてグラデーションを掛けます。

マスクは白と黒で画像の表示、非表示をコントロールする技術です。真っ白は全てが見える状態で、真っ黒は全く見えなくなります。中間の調子のグレーは半透明といった具合です。

2-3 ハイライトの調整

何回かグラデーションを掛けて、半分くらいがマスクによって消えた状態でレイヤー全体の透明度を下げます。
今回の例では50%に下げました。(作成しているもの、下に見えている色によって透明度やレイヤーモードは調整が必要になるかと思います。)

最後にハイライトの形の調整をします。青いボタンの中でどれくらいにしたらちょうどいい具合になるか色々と試してみてください。
今回の場合ですと、ハイライトの形状が少し小さく感じたので、大きく変更しています。

これで完成です。なんとなくそれっぽいのが出来ましたね!
お疲れ様でした!

3.オマケ

あと装飾とかいろいろ手を加えてアレンジしてみても面白いかもしれませんね。フレームに対してべベルを入れてみたりするとフレームの立体感が増えます!

べベルの設定はこんな感じです。

あと、手を入れるならフレームに細かい模様を入れたり、青いボタンのところに白いラインで令呪っぽい模様を描いてもカッコイイかもですね!
とまぁ、こんな感じで長々と解説してまいりましたが皆様のお役に立てば幸いです。

スポンサーリンク







コメントを残す

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