今回は、Illustratorを使って立体的なボタンを作る方法をご紹介します。
完成例は、こんな感じです。（↑）
DTPでも使えるデザインですが、LPやWebバナーにも使えるデザインなので、ぜひ参考にしていただけたらと思います。
手順① 角丸長方形ツールで元となる形を作る
まず最初に、ボタンの元となる形を「角丸長方形ツール」で描きます。
手順② グラデーションを適用する
続いて、グラデーションを適用します。
グラデーションパレットのグラデーション部分をクリックすればOKです。
(デフォルト設定では白→黒グラデーションになっています。)
グラデーションに色を付けていきます。
今回は赤色のボタンを作りたかったので、陰影のある赤グラデーションを作りました。
（ボタンの色はお好みで作ってみてください！）
手順③ 立体感を出す加工をする
ボタンに立体感を加える作業を行います。
まず最初に、先ほど作った角丸長方形よりひと回り小さいオブジェクトを新たに作ります。
①オブジェクト
↓
②パス
↓
③パスのオフセット
パスのオフセットの値を「-3px」に設定します。
すると、元のオブジェクトから-3pxほど縮小されたオブジェクトが出来上がります。
内側のオブジェクトのグラデーションの角度を反転(-90°)させると、ボタンが立体的に見えてきます。
スポンサーリンク
手順④ 光沢を足す
さらに立体感を出すために、ボタンに光沢を足していきます。
まず最初に、内側の角丸長方形をコピーします。
コピーした角丸長方形の上に、楕円形ツールで横に長い円を描き重ね合わせます。
(この楕円はマスクにするので、色は何色でもOKです。)
角丸長方形と楕円の両方を選択し、整列パレット→「水平方向中央に整列」を行い、2つのオブジェクトを整列します。
さらに角丸長方形と楕円の両方を選択した状態で、「パスファインダー」→「交差」ボタンをクリックします。
2つのオブジェクトが重ね合わさった箇所を抽出するためです。
このようなオブジェクトが出来あがりました。(※黒色のオブジェクト)
出来上がったオブジェクトを元のオブジェクトに重ねます。
オブジェクトに、不透明度100%→0%の白色のグラデーションをかけます。
白色グラデーションをかけたオブジェクトの全体の不透明度を「30%」に調整して、光沢を全体になじませます。
完 成！
ボタンデザインが完成しました！
ボタンの上にそれっぽい文字を乗せてみると、既視感がありませんか？（笑）
グラデーションの使い方を駆使すれば、見た目ほど難しい作業はないので、ぜひみなさんも挑戦してみてくださいね！
ヒューマンアカデミー最新情報
Adobe CC1年間ライセンス
Illustrator・PhotoshopなどAdobe動画教材付き
1ヶ月間のメールサポート
以上の内容セットで、39,980円(税込)
※2024年12月1日〜68,800円に価格改定されます。
購入ご検討の方はお早めに！
