Illustratorテクニック

Illustratorで立体的なボタンを作る方法

2020年11月11日

今回は、Illustratorを使って立体的なボタンを作る方法をご紹介します。

完成例は、こんな感じです。(↑)

DTPでも使えるデザインですが、LPやWebバナーにも使えるデザインなので、ぜひ参考にしていただけたらと思います。

 

 

スポンサーリンク




手順① 角丸長方形ツールで元となる形を作る

Illustratorで立体的なボタンを作る方法

まず最初に、ボタンの元となる形を「角丸長方形ツール」で描きます。

 

 

手順② グラデーションを適用する

Illustratorで立体的なボタンを作る方法

続いて、グラデーションを適用します。

グラデーションパレットのグラデーション部分をクリックすればOKです。
(デフォルト設定では白→黒グラデーションになっています。)

 

 

Illustratorで立体的なボタンを作る方法

グラデーションに色を付けていきます。

今回は赤色のボタンを作りたかったので、陰影のある赤グラデーションを作りました。

(ボタンの色はお好みで作ってみてください!)

 

 

手順③ 立体感を出す加工をする

Illustratorで立体的なボタンを作る方法

ボタンに立体感を加える作業を行います。

まず最初に、先ほど作った角丸長方形よりひと回り小さいオブジェクトを新たに作ります。

①オブジェクト

②パス

③パスのオフセット

 

 

Illustratorで立体的なボタンを作る方法

パスのオフセットの値を「-3px」に設定します。

すると、元のオブジェクトから-3pxほど縮小されたオブジェクトが出来上がります。

 

 

Illustratorで立体的なボタンを作る方法

内側のオブジェクトのグラデーションの角度を反転(-90°)させると、ボタンが立体的に見えてきます。



スポンサーリンク

 

 

手順④ 光沢を足す

Illustratorで立体的なボタンを作る方法

さらに立体感を出すために、ボタンに光沢を足していきます。

 

まず最初に、内側の角丸長方形をコピーします。

コピーした角丸長方形の上に、楕円形ツールで横に長い円を描き重ね合わせます。
(この楕円はマスクにするので、色は何色でもOKです。)

 

 

Illustratorで立体的なボタンを作る方法

角丸長方形と楕円の両方を選択し、整列パレット→「水平方向中央に整列」を行い、2つのオブジェクトを整列します。

 

 

Illustratorで立体的なボタンを作る方法

さらに角丸長方形と楕円の両方を選択した状態で、「パスファインダー」→「交差」ボタンをクリックします。

2つのオブジェクトが重ね合わさった箇所を抽出するためです。

 

 

Illustratorで立体的なボタンを作る方法

このようなオブジェクトが出来あがりました。(※黒色のオブジェクト)

 

 

Illustratorで立体的なボタンを作る方法

出来上がったオブジェクトを元のオブジェクトに重ねます。

 

 

Illustratorで立体的なボタンを作る方法

オブジェクトに、不透明度100%→0%の白色のグラデーションをかけます。

 

Illustratorで立体的なボタンを作る方法

白色グラデーションをかけたオブジェクトの全体の不透明度を「30%」に調整して、光沢を全体になじませます。

 

 

完 成!

Illustratorで立体的なボタンを作る方法

ボタンデザインが完成しました!

ボタンの上にそれっぽい文字を乗せてみると、既視感がありませんか?(笑)

グラデーションの使い方を駆使すれば、見た目ほど難しい作業はないので、ぜひみなさんも挑戦してみてくださいね!

 



Illustrator・Photoshopを格安で購入する方法

デジハリ・オンラインスクールを受講すると、定価72,336円するAdobe CCが45%OFFで購入できます!


 Adobe CCの1年間ライセンス
Illustrator・PhotoshopなどAdobeソフト動画講習付き

以上の内容セットで、39,980円(税込)でお得に入手できます!


\Adobe CCが39,980円!/

デジハリ・オンライン公式

 
Adobe Creative Cloudの価格・プランは?一番安く購入する方法を徹底比較

こちらもCHECK

Adobe CCの価格プランと一番安く購入する方法を徹底比較【2020年12月更新】

Illustrator・PhotoshopをはじめとしたAdobe系ソフトは、デザイナーには必需品です。 高性能なんですが、その分Adobe製品のソフトは値段が高い!!   Illustra ...

続きを見る

スポンサーリンク



グラフィック・Webデザイナー向けの転職サイト8選はコレ!

グラフィックデザイナー・Webデザイナー向けのおすすめ転職サイト・転職エージェントを比較しながら詳しく解説しています!

記事本編はこちらから

   

学び方〜仕事の探し方まで!未経験からデザイナーになるための完全ガイド

デザインまったくの未経験者が、プロのデザイナーになるまでのステップを詳しく丁寧に徹底解説しています。

記事本編はこちらから

   

長時間労働?人間関係?みんながデザイナーを辞めたくなる3つの理由

「デザイナー辞めたい!」一度は考えたことありませんか? そんなデザイナーの不平・不満を調査してみました。 デザイナーのみなさんならこの苦労を分かち合えるはずです!

記事本編はこちらから

   

Webデザインを安く勉強できるオンラインスクール厳選

Webデザインを勉強したい方に向けて、価格や授業内容を比較しながら、おすすめできるオンラインスクールをまとめてご紹介しています。

記事本編はこちらから

-Illustratorテクニック

© 2020 デザイナーの道しるべ