【ファンタジー系】ゲーム用の会話ウィンドウ素材を作成するチュートリアル

スポンサーリンク




久しぶりにゲームUIの記事を書きます。
今日は会話ウィンドウに使うウィンドウを作成します。どういったやつかと言うと・・・

こんな感じのファンタジーデザインの物を作成します。

■photoshopのシェイプで作るゲームUIの会話ウィンドウのベース

UI作成準備。新規ドキュメント作成

新規ドキュメントを16:9のスマートフォン想定で横1138px、縦640pxで作成します。背景は適当にグレーにしておきましょう。

ベースを8角形のシェイプでつくる

まず最初はシェイプでベースとなる形を作ります。
左から多角形ツールを用いて8角形を作成します。8角形の辺がそれぞれ縦と横で直線になるように配置してください。微妙なところですがズレてるとちょっとカッコ悪いですし、あまりよくありません。

シェイプの編集

配置が出来たら、白い矢印のダイレクト選択ツールで4か所の頂点を移動して大体の枠の大きさを作りましょう。CTRL+Tの自由変形で横に引き伸ばすと8角形の辺の角度が変わってしまうのでNGです。移動するときはShiftを押しながら移動させると水平に移動させることができます。

続いて斜めの線の幅が広いので狭くしましょう。頂点を2つずつ選んで同じ量を移動させるのがコツです。

マウスで移動するとずれやすいのでキーボードの矢印を使うとやりやすいです。Shiftと組み合わせると大きく移動させることができますので、Shift押しながら左に5回、そのまま左に5回移動といった具合でキーボードを押した回数を覚えておいて、他の頂点にも適用すると均等に移動することが出来ます。

移動させた結果がコチラです。

最後に上側4か所を少し横にずらして枠全体を斜めにします。

■レイヤースタイルで素材に味付け

シェイプにレイヤースタイルを適用していく

シェイプの準備が出来たら、レイヤースタイルを適用していきましょう。レイヤーパネルから各スタイルを適用していきます。ベースのシェイプに対しては以下のように設定しました。シェイプを設定する時に同時にシェイプのカラーを#c1b79cに変更しておいてください。

レイヤースタイルの光彩(内側)、光彩(外側)、ドロップシャドウを適用してこのような感じになっています。

ベースシェイプを複製してスタイルを適用する

内側にハッキリしたカラーで線を入れたいと思います。このままでは実現できないので、シェイプレイヤーを複製します。CTRL+Jでレイヤーを複製することができます。

これで背景レイヤーを含めてレイヤーが3つになりました。

次にこの複製したレイヤーにレイヤースタイルを適用していきます。欲しい要素が”レイヤースタイルだけ”なのでシェイプの塗りは不要です。レイヤーパネルから塗りを0%にします。

最後に複製したシェイプレイヤーに、レイヤースタイルを適用します。

境界線をまずは1つ、2つの境界線の上になるようにします。カラーは枠のベースカラーと一緒です。

次にベースカラーより暗めの色を設定します。

このような具合になりました!

■名前が入るタイトルを作成

続いて会話ウィンドウには必須の名前の表示部分です。

タイトル部分のベースとライン作成

長方形ツールで、ベースシェイプと複製したシェイプの間に長方形を作成します。カラーは#6c644eです。このレイヤーは便宜上colorとレイヤーに名前を付けておきます。

次に長方形の下に区切りのラインを引きます。ベースカラーと同じ色でラインを引きます。

タイトルとラインにレイヤースタイルの使用

タイトルのベースとラインにレイヤースタイルを使用します。

タイトルのベースには、光彩(内側)を使用。

区切りのラインにはベベルを適用します。

レイヤースタイルを適用するとこのような感じになりました。

今だと枠からはみ出していますので、これをマスクを使って解消します。

レイヤーにマスクを掛けてはみ出しを解消する。

ベースのシェイプのレイヤーパネルからサムネイル部分をCTRL+左クリックで選択範囲を作成します。

この選択範囲で、見出しの部分のcolorと、区切り線のlineをマスクを掛けたいので、レイヤーのグループを作成します。colorとlineをレイヤーパネル上で選択状態にしてCTRL+Gでグループを作成できます。グループが作成できたらグループを選択状態でレイヤーパネル下部の[レイヤーマスクを追加]をクリックします。

マスクが設定されるとグループレイヤーのフォルダの右に白黒のマスクのマークが表示されます。

これではみ出た部分が解消されました。

グラデーションでマスクを掛ける

帯が途中でブツ切れなのでこれをグラデーションでマスクを掛けて馴染ませます。

colorのレイヤーを選択して先ほど同様にレイヤーマスクを追加します。(今回は選択範囲は不要です。)マスクが追加されたらマスクが選択されているのを確認してグラデーションツールで右から左へ透明になるグラデーションを掛けます。

グラデーションの設定はこのような感じで、黒→黒(不透明度0%)になるもので掛けます。

これで大体できましたが、タイトル部分に色が変に表示されている箇所があります。これはcolorのタイトル部分に掛けたグラデーションでのマスクが光彩(内側)に影響されてるからです。最後にそこを解消しましょう。

colorのfx部分をダブルクリックしてレイヤースタイルの編集ウィンドウを開きます。編集ウィンドウの一番上、[レイヤー効果]で[レイヤーマスクで効果を隠す]にチェックを入れます。

これでグラデーションでのマスクで光彩(内側)も綺麗にマスクされます。ちなみにこの場所にチェックを入れるとレイヤーパネル上ではこのようなマークが表示されます。

これでウィンドウの制作は完了です!

文字、背景、キャラを配置

あとは、他の要素を入れてなんとなくそれっぽく仕上げましょう!文字はキャラクターの名前の箇所は白、セリフ部分は暗い茶色を選択しました。

キャラと背景を配置したらグっとそれっぽくなりますね!あとオマケでウィンドウの右下に次の行動を促すアイコンを入れておきました。

※キャラクターは、三日月アルペジオさんのフリー素材をお借りしました。どうもありがとうございます!
三日月アルペジオ

■まとめ

今回は、ファンタジーの会話ウィンドウ作成ということで茶色系でまとめた物を作成しました。王道のデザインなので色々と活用できる部分はあるかと思います。
この記事が皆様のお役に立てば幸いです。

スポンサーリンク







コメントを残す

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