この記事では、ゲームUIのボタンの作り方を画像付きで解説していきます。
目次
1.「新規ドキュメント設定」
- 幅:1000 x 高さ:1000
- レイヤー → 新規 → レイヤー(Shift + Ctrl+ N)
2.「長方形ツールを使って土台を作る」
- 長方形ツール (U)
- シェイプのプロパティ
- 塗り: #d0461c
- 線: 無し
- 角丸の半径: 20px
3.「レイヤースタイル」
- 長方形レイヤーを ダブルクリック → レイヤースタイル
- グラデーションオーバーレイ
- 描画モード: 通常
- 不透明度: 85%
- グラデーション: 左側 #ff9018、右側 #ff0030
- スタイル: 円形、シェイプ内で作成
- 角度: -22、比率: 150%、方法: 知覚的
- 境界線
- サイズ: 12px、位置: 内側
- 描画モード: 通常
- 不透明度: 100%
- 塗りつぶしタイプ: グラデーション
- 左側 #6a0200、右側 #e93693
- スタイル: 線形、レイヤーに整列
- 角度: 90度、スケール: 100%、方法: 知覚的
- ドロップシャドウ
- 描画モード: 通常 #76070e
- 不透明度: 53%
- 角度: 138度、距離: 16px、スプレッド: 4%、サイズ: 10px
- 輪郭: プリセット線形、ノイズ: 0%
4.「長方形1レイヤーを複製」
- 長方形1レイヤーを選択し、(Ctrl + J)複製 → レイヤーの効果を削除
- シェイプのプロパティ
- 塗り: 無し、線: #a4a4a4
- 線の太さ: 6px
- 線端タイプの設定: 画像を参照
- 描画モード: 覆い焼き(リニア)-加算
5.「違う色で新規長方形レイヤーを作成」
- 長方形1レイヤーの上に、新規レイヤーを作成
- 長方形ツール(U)で内側のグラデーションに重なるように調整
- シェイプのプロパティ
- 塗り: #ffddb4、線: 無し、角丸の半径: 50px
- 右クリック → クリッピングマスクを作成
- レイヤーにL字型の矢印ができる
6.「ドット柄の画像を重ねる」
- 長方形2レイヤーの上に、レイヤー → 新規 → レイヤー(Shift + Ctrl+ N)
- 適当なドット柄の画像を開きコピー(Ctrl + C)する
- レイヤー1に画像を貼り付ける(Ctrl + V)
- 右下のメニューから、ベクトルマスクを追加
- 長方形1のコピー レイヤーのサムネールを(ctrl + 左クリック)で範囲選択
- (Ctrl + Shift + I)で選択範囲を反転させる
- 塗りつぶし(G)で黒色にする(白が表示、黒が非表示)
- ブラシツール (B)、ベクトルマスクが選択された状態で
- ソフト円ブラシを使って中央のドット柄が見えないように調整する
7.「ボタンのハイライトを作る」
- レイヤー → 新規 → レイヤー(Shift + Ctrl+ N)
- ブラシツール (B)
- 直径: 50px、硬さ: 0%、ブラシタイプ: ソフト円ブラシ
- カラーピッカー: ffd893
- 長方形1レイヤーのサムネールを(Ctrl + 左クリック)で範囲選択
- (Shift)を押したままブラシツールで平行に描く
- 消しゴムツール (E) ソフト円ブラシで端の部分を少し消す
- 描画モード: オーバーレイ
まとめ
テキストはボタンの雰囲気に合わせて作り、レイヤースタイル(ドロップシャドウ)加えれば完成です。
テキストは中央に配置すれば良いと思います。
