ソシャゲでありがちなボタンを簡単に作る方法

デザイン作成

以前有名スマホゲームの汎用ボタンデザインをまとめた記事を出しました。

 

今回は汎用ボタンを実際に作ってみます。

 

今回作る汎用ボタン

今回の完成品はこちらになります。

 

準備するもの

作成にはAdobe Illustratorを使用します。

もちろんツールは何でもできますので、イラレ以外を使う場合は適宜読み替えてください。

おそらく似たような機能が存在するはずです。

 

注意点としては、今回はイラレの超基本的な操作の解説はしません。

細かなツールの使い方などは省くことがありますので、分からない場合は各自調べてみてください。

 

作成の手順

それでは実際に作っていきます。

 

ベースを作成

まずは適当にキャンバスを作成し、角丸長方形ツールを使用してベースとなる角丸長方形を配置します。

 

このあと色を変えるので、適当な色で大丈夫です。

線は0px(透明)にしておいてください。

また、角丸の大きさは各自好きな大きさに変更してください。

 

次に、この角丸長方形にグラデーションをかけます。

グラデーションツールを用いて、上側は明るく、下側は暗くなるように色を設定します。

 

ここで設定した色がボタンのベース色になります。

 

フレーム(アウトライン)を作成

ベースの周りにフレームを作成していきます。

 

先ほどグラデーションをかけた角丸長方形を、Command + C、Command + F で前面の同じ位置に複製してください。

そして、プロパティの「変形」から「垂直軸に沿って反転」を選択することで、暗い方を上にします。

 

次に、左のツールバーにある「塗りと線を入れ替え」を選択(またはShift + X)してグラデーションを線の色に指定し、線幅を太くします。

 

続いて、再びベースの角丸長方形を前面に複製し、今度は明暗を極端にしたグラデーションを掛けます。

 

全体に満遍なくグラデーションを掛けるのではなく、上下の一定距離は単一色にするのが個人的にはおすすめです。

 

そして先程と同様に塗りと線を入れ替え、描画順を最背面にしてから線幅を太くしていきます。

 

周囲から一定距離はみ出したらオッケー。

内側のアウトラインよりは太くするのがよく見えるコツです。

 

光沢を付ける

最後に光沢を付けます。

 

まず、楕円形ツールを使用して白い楕円を最前面に作成します。

 

楕円の大きさは、幅がボタンの1.5倍程度、高さをボタンの1.2倍程度がおすすめです。

また、楕円の下端がボタンの下から3分の1あたりに来るように位置を調整します。

 

次に、再びベースの角丸長方形を複製し、楕円の前面に配置します。

この角丸長方形と楕円を両方選択した状態で、Command + 7 を押してクリッピングマスクを作成

 

 

そして、この不透明度を下げて光沢のようにします。

 

ベースの色の明度によって左右しますが、今回は不透明度10%にしました。

 

完成

最後に文字を入れたら完成!

文字はUnityなどでテキストを設定することも多いかもしれません。

使い方に合わせて保存してください。

 

まとめ

ソシャゲにありがちな汎用ボタンを、イラレを使ってできるだけ簡単に作ってみました。

 

  • グラデーションで光と陰を表現できる
  • 上が明るく下が暗いアウトラインを付けることで、光と陰を表現できる
  • 半透明の楕円を使うことで光沢を表現できる

コメント

タイトルとURLをコピーしました