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

スポンサーリンク




前回はシェイプでベース作成を行いました。今回はベース素材に対してレイヤースタイルを使って、質感やカラー装飾などを付けていきましょう。

1.前回までのデータの確認

前回の記事はコチラ

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

2017.06.07

事前準備として、まずは全てのレイヤーを選択します。
それからCtrl+Gを押して全てのレイヤーをグループにしてしてしまいます。レイヤーフォルダの名前は[ALL]としておきましょう。

カネキチ
現在のレイヤーはALLのグループの中に
[parts][frame_under][base] というような3枚の構成になっています。

2.シャドウの設定

それでは実際にレイヤースタイルなどを適用して作業を進めていきましょう。

2-1 全体にドロップシャドウを設定する

グループフォルダ[ALL]を選択して、パネル下部の[レイヤースタイルの追加]をクリックしてメニューの中の[ドロップシャドウ]を選択します。

この設定をすることでボタン全体のシルエットに対してドロップシャドウを掛けることが出来て画面内に設置した際にボタンの存在を際立たせると共に空間を演出することができます。

2-2 frameの内側にシャドウを入れる。

金属の[frame_under]と[base]との間にシャドウを入れて明確に差分をつけます。

まず、[parts]と[frame_under]の2つのレイヤーから選択範囲を作成します。
partsのレイヤーの左側の四角い枠をCtrlを押しながら左クリックしてください。そのレイヤーに含まれてる範囲全てが選択範囲として点線で表示されます。

次にframe_underを選択範囲に追加します。ここで同様にctrl+左クリックだけで操作を行うと、1つ目のレイヤーの選択範囲が解除されてしまいますので、Ctrl+Shift+左クリックでレイヤーの四角い枠をクリックしましょう。そうすると2つのレイヤー全ての範囲の選択範囲が作成できます。

次に新規レイヤーの追加をします。

レイヤーパネルの下部から[レイヤーの新規追加]を行ってください。
新しいレイヤーが出来たら、塗りつぶしツールで何色でも良いので塗りつぶしましょう。

塗りつぶしが完了したレイヤーの順序は[frame_under]の下に移動しておきます。
また、レイヤー名は[shadow]としておきましょう。

このレイヤーは[frame]とボタンの[base]の境界にシャドウを落とす為に作成したものになるので名前を[shadow]としています。

次に[shadow]レイヤーに対してレイヤースタイルを追加していきましょう。

これで[frame]と[base]の間に濃い青で影を落とすことが出来ました。
ただ今のままだと外側にも濃い青が落ちてしまい、最初に作った影と合わさって想定以上に暗い影となってますのでこれを解消しましょう。

これはレイヤーの塗りつぶされてる領域と透明な領域の間に、レイヤースタイルの光彩(外側)が適用されてるので、透明な領域を塗りつぶすことで解消できます。

レイヤーパネルから[shadow]レイヤーだけを表示状態にして、レイヤーをアクティブにします。
外側の透明な領域に同じ色で塗りつぶしを行います。
塗りつぶしを行ったら、塗りつぶしのキワの部分に塗り残しがあるのでブラシで塗っておきましょう。
(隙間があるとそこに光彩のレイヤースタイルが出てしまいます。)

他のレイヤーを表示しつつ、[shadow]レイヤーの塗りを0%に変更します。
塗りを0%にすることで塗りつぶしは目に見えなくなりますが、レイヤースタイルは変わらずに表示され続けます。

[不透明度を0%にするとレイヤースタイルも見えなくなります。]


ここまでの結果はこんな感じです。
これで欲しいところにだけ、影を落とすことができました。

3.ベース部分の設定

次は[base]レイヤーに手を入れていきます。

3-1 ベースにグラデーションを乗せる

レイヤースタイルからグラデーションオーバーレイを設定します。設定は以下です。

ボタンにグラデーションが乗りました。

[base]レイヤーの1つ上に新規レイヤーを作成します。黒と白がカラーに設定されているのを確認して[フィルタ]→[描画]→[雲模様1]を実行します。

これで画面内に黒白の模様が出来たと思います。
雲模様が気に入らない時は、Ctrl+Fを押すと再度、実行されますのでお好みのパターンになるまで繰り返しましょう!

次にレイヤーパネルから右クリックで[クリッピングマスクを作成]をします。
こうすることで[base]レイヤーの形で雲模様のレイヤーがマスクされ正円の形になります。

そのままだと色がグレーなのでレイヤーパネルからレイヤーの描画モードを切り替えます。
あまり強く色の変化を出したくないのでソフトライトを選択しました。

描画モード:ソフトライト70%

3-2 ベース部分のディテール作成

続いてベース部分のディテール作成です。
先ほどの雲模様のレイヤーの上に、新規レイヤーを作成してツールボックスから楕円ツールを選択します。キャンバスの真ん中に正円を1つ描いたら、上部のオプションバーで塗り:無し 線:白で細い線(3px程度)を設定します。
正円の大きさは[frame]より少し小さいくらいです。

サイズの調整が出来たら、レイヤーパネルからレイヤーの描画モードを切り替えて[オーバーレイ]にしましょう。

白い線が透過してこのような具合になります。

3.フレームの詳細を作る

3-1 フレームにレイヤースタイルを適用する

ベースの青い部分が大体できたので、ここからはフレームに移ります。

まず初めにフレーム全体にグラデーションを掛けていきます。
フレームを構成する[parts]と[frame_under]を選択してCTRL+Gでグループ化します。グループ化したフォルダは[frame_all]としておきます。また、[parts]に関しては、この時点で[frame_top]としてリネームしておきましょう。

[frame_all]のグループを選択してレイヤースタイルでグラデーションを掛けます。今回の設定は以下の通りです。

グラデーションのカラーはきつすぎないグレースケールのグラデーションにしています。

[frame_top]と[frame_under]の間の溝を表現するために[frame_top]にレイヤースタイルを適用します。
下準備として[frame_under]のシェイプの色は[frame_top]と同じにしておきましょう。

frame_topにはこのような境界線のレイヤースタイルを適用しました。

また、境界線以外に光彩(内側)も適用します。これは溝の隣にハイライトを入れることで立体感を増すために入れています。

[frame_top]で入れた光彩(内側)は[frame_under]にも適用します。
レイヤースタイルをコピーして光彩(内側)だけを表示します。

ここまでの設定を適用するとこのようになっています。

これでフレームに関する設定は終了です。

次回は最後の仕上げになります。

スポンサーリンク







1 個のコメント

  • コメントを残す

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