DesignTips > ボタン・アイコン等 > 斜線入りwebボタンの作り方(イラストレーター)

斜線入りwebボタンの作り方(イラストレーター)

斜線入りwebボタンの作り方(イラストレーター)

Illustrator斜線入りwebボタンの作り方を説明していきます。

上図のようなグラデーションに斜線のかかったwebボタンです。様々なwebサイトで見るデザインですね。実践でも素材としてすぐに使える優れモノです。

webボタンの制作の流れとしては、①グラデーションとブレンドを用いてwebボタンの原型を作成する②クリッピングマスクで切り抜き斜線を表現する③質感を高めるため陰影を作成するです。どれも実践ですぐに使えるテクニックばかりですのでしっかりとマスターしてみて下さい。

Step01 Illustratorでwebボタンの原型を作る

Illustratorでwebボタンの原型を作る

まずはwebボタンの原型を作ります。

Illustratorを開き、[角丸長方形ツール]で角丸長方形を描き、上図のようにグラデーションを設定します。例ではライトブルーのグラデーションを適用してみました。

Step02 角丸長方形を縮小コピーする

角丸長方形を縮小コピー

Step01で作成した角丸長方形を縮小してコピーします。

角丸長方形を選択し、[オブジェクト→変形→拡大・縮小]をクリック、[拡大・縮小]ダイアログボックスが表示されますので、縦横比を上図のように設定し、コピーをクリックします。

Step03 縮小コピーされた!

縮小コピーされた

Step01で作った角丸長方形の内側に、縮小された角丸長方形がコピーされました。

Step04 縮小された角丸長方形にグラデーションを適用

縮小された角丸長方形にグラデーションを適用

縮小された角丸長方形に上図のようなグラデーションを適用させます。

Step05 スムーズカラーを設定

スムーズカラーを設定

角丸長方形を二つ選択し、[オブジェクト→ブレンド→ブレンドオプション]をクリックします。[ブレンドオプション]ダイアログボックスが表示されますので、[スムーズカラー]を選択しOKをクリックします。

Step06 webボタンの原型が完成

webボタンの原型が完成

続いて二つのオブジェクトを選択したまま、[オブジェクト→ブレンド→作成]をクリックします。

すると、二つの角丸長方形に[スムーズカラー]が適用され、滑らかなグラデーションの角丸長方形ができました!

これがwebボタンの原型となります。[スムーズカラー]を適用することで、単なるグラデーションよりも奥行きを表現することができます。

Step07 ブレンドを拡張しておく

ブレンドを拡張

今後の作業のためにもブレンドを拡張しておきます。

オブジェクトを選択し、[オブジェクト→ブレンド→拡張]をクリックします。これでブレンドが拡張され編集できるようになりました。

Step08 webボタンに斜線を適用する準備

webボタンに斜線を適用する準備

続いて、webボタンに斜線を適用させる準備を行います。

上図のようにペンツールで直線を2本斜めに描きます。線の太さは2pt、色は黒で。両方の直線はwebボタンの端をぎりぎり通るぐらいの位置に引いて下さい。

Step09 ブレンドオプション

ブレンドオプション

Step08で引いた2本の直線の間に複数の直線を複製させます。

直線を2本選択し、[オブジェクト→ブレンド→ブレンドオプション]をクリックします。[ブレンドオプション]ダイアログボックスが開きますので、上図のように距離、8pxに設定し、OKをクリックします。

Step10 ブレンドで斜線を複製

ブレンドで斜線を複製

続いて、2本の線が選択されている状態で、[オブジェクト→ブレンド→作成]をクリックします。

すると、先ほどブレンドオプションで設定した値が直線に適用され、8pt間隔で直線が作成されました!これがwebボタンの斜線の原型になります。

Step11 斜線の色を変え、ブレンドを拡張

斜線の色を変え、ブレンドを拡張

続いて、斜線の色を白(#FFFFFF)、透明度を30%にします。また、斜線も今後の作業のためにブレンドを拡張しておいてください。(Step07参考)

このあとのStepでは、この斜線をwebボタンの大きさにクリッピングマスクを用いて切り抜きます。

Step12 切り抜くためのマスクを準備する

切り抜くためのマスクを準備

[クリッピングマスク]で切り抜くためのマスクを作成します。

[レイヤーパネル(ウインドウ→レイヤー)]を開いて、一番下の角丸長方形のレイヤーを選択し、Ctrl+C(コピー)&Ctrl+F(前面にコピー)します。

続いて、コピーしたレイヤーを最前面にドラッグして移動します(上図参考)。これで斜線を切り抜くマスクの準備ができました。

Step13 クリッピングマスクを作成

クリッピングマスクを作成

斜線とStep12で作成したマスクを選択し、[オブジェクト→クリッピングマスク→作成]をクリックします。

なお、斜線はブレンドを拡張していないとクリッピングマスクを作成することができません。必ず斜線のブレンドを拡張しておいて下さい。(ブレンドの拡張についてはStep07を参考)

(クリッピングマスクについてはイラストレーターで写真の切り抜きを解説を参考。)

Step14 webボタンに斜線が適用された

webボタンに斜線が適用

クリッピングマスクが適用され、webボタンに斜線をつけることができました!

だいぶ出来てきましたね。このままでもwebボタンとして使えますが、最後に陰影を加えてwebボタンの質感を高めます。

Step15 webボタンの陰影を描く

webボタンの陰影を描く

ペンツールでwebボタンの陰影を描きます。

幅はwebボタンの幅に合わせて下さい。ダイレクトに描けない場合は、webボタンと同じ角丸四角形を作成し、アンカーポイントを削除しながら[ダイレクト選択ツール]で微調整しながらやるとうまく描けます。

Step16 陰影をwebボタンに合わせる

陰影をwebボタンに合わせる

作成した陰影をwebボタンに合わせ、塗りを白(#FFFFFF)、透明度20%ぐらいに設定します。webボタンにうまく陰影がマッチするように、透明度は自由に変更してもらっても構いません。

出来上がり!

イラストレーターで斜線入りwebボタンを作る方法

最後にwebボタンにテキストを配置して完成です。

滑らかなグラデーションと斜線、陰影がうまくマッチしたwebボタンですね。今回は、webボタンの質感を高めるために、スムーズカラーやクリッピングマスク、陰影の作成など面倒な工程が多かったかと思います。

webボタンはwebデザインでは必須の素材ですね。グラデーション、カラー、陰影のつけ方、斜線の太さなどを変えることで様々なwebボタンがIllustratorで作れます。ぜひお試し下さい。

この投稿文は次の言語で読めます: 簡体中国語, 英語

ノートと破けたノートのイラストの作り方(イラストレーター)
罫線入りポストカードの作り方
イラストレータ アイコンの作り方
迷彩柄の描き方(イラストレーター)
イラストレーターで反射するアイコンの作り方
ヴィンテージカメラファインダーの作り方 (Photoshop)
Photoshopで星雲と細かい星の作り方
角が丸い立方体の作り方(イラストレーター)
めくれたシールのイラストの作り方(イラストレーター)