Illustrator斜線入りwebボタンの作り方を説明していきます。
上図のようなグラデーションに斜線のかかったwebボタンです。様々なwebサイトで見るデザインですね。実践でも素材としてすぐに使える優れモノです。
webボタンの制作の流れとしては、①グラデーションとブレンドを用いてwebボタンの原型を作成する②クリッピングマスクで切り抜き斜線を表現する③質感を高めるため陰影を作成するです。どれも実践ですぐに使えるテクニックばかりですのでしっかりとマスターしてみて下さい。
まずはwebボタンの原型を作ります。
Illustratorを開き、[角丸長方形ツール]で角丸長方形を描き、上図のようにグラデーションを設定します。例ではライトブルーのグラデーションを適用してみました。
Step01で作成した角丸長方形を縮小してコピーします。
角丸長方形を選択し、[オブジェクト→変形→拡大・縮小]をクリック、[拡大・縮小]ダイアログボックスが表示されますので、縦横比を上図のように設定し、コピーをクリックします。
Step01で作った角丸長方形の内側に、縮小された角丸長方形がコピーされました。
縮小された角丸長方形に上図のようなグラデーションを適用させます。
角丸長方形を二つ選択し、[オブジェクト→ブレンド→ブレンドオプション]をクリックします。[ブレンドオプション]ダイアログボックスが表示されますので、[スムーズカラー]を選択しOKをクリックします。
続いて二つのオブジェクトを選択したまま、[オブジェクト→ブレンド→作成]をクリックします。
すると、二つの角丸長方形に[スムーズカラー]が適用され、滑らかなグラデーションの角丸長方形ができました！
これがwebボタンの原型となります。[スムーズカラー]を適用することで、単なるグラデーションよりも奥行きを表現することができます。
今後の作業のためにもブレンドを拡張しておきます。
オブジェクトを選択し、[オブジェクト→ブレンド→拡張]をクリックします。これでブレンドが拡張され編集できるようになりました。
続いて、webボタンに斜線を適用させる準備を行います。
上図のようにペンツールで直線を2本斜めに描きます。線の太さは2pt、色は黒で。両方の直線はwebボタンの端をぎりぎり通るぐらいの位置に引いて下さい。
Step08で引いた2本の直線の間に複数の直線を複製させます。
直線を2本選択し、[オブジェクト→ブレンド→ブレンドオプション]をクリックします。[ブレンドオプション]ダイアログボックスが開きますので、上図のように距離、8pxに設定し、OKをクリックします。
続いて、2本の線が選択されている状態で、[オブジェクト→ブレンド→作成]をクリックします。
すると、先ほどブレンドオプションで設定した値が直線に適用され、8pt間隔で直線が作成されました！これがwebボタンの斜線の原型になります。
続いて、斜線の色を白（#FFFFFF）、透明度を30%にします。また、斜線も今後の作業のためにブレンドを拡張しておいてください。（Step07参考）
このあとのStepでは、この斜線をwebボタンの大きさにクリッピングマスクを用いて切り抜きます。
[クリッピングマスク]で切り抜くためのマスクを作成します。
[レイヤーパネル（ウインドウ→レイヤー）]を開いて、一番下の角丸長方形のレイヤーを選択し、Ctrl+C（コピー）&Ctrl+F（前面にコピー）します。
続いて、コピーしたレイヤーを最前面にドラッグして移動します（上図参考）。これで斜線を切り抜くマスクの準備ができました。
斜線とStep12で作成したマスクを選択し、[オブジェクト→クリッピングマスク→作成]をクリックします。
なお、斜線はブレンドを拡張していないとクリッピングマスクを作成することができません。必ず斜線のブレンドを拡張しておいて下さい。（ブレンドの拡張についてはStep07を参考）
（クリッピングマスクについてはイラストレーターで写真の切り抜きを解説を参考。）
クリッピングマスクが適用され、webボタンに斜線をつけることができました！
だいぶ出来てきましたね。このままでもwebボタンとして使えますが、最後に陰影を加えてwebボタンの質感を高めます。
ペンツールでwebボタンの陰影を描きます。
幅はwebボタンの幅に合わせて下さい。ダイレクトに描けない場合は、webボタンと同じ角丸四角形を作成し、アンカーポイントを削除しながら[ダイレクト選択ツール]で微調整しながらやるとうまく描けます。
作成した陰影をwebボタンに合わせ、塗りを白（#FFFFFF）、透明度20％ぐらいに設定します。webボタンにうまく陰影がマッチするように、透明度は自由に変更してもらっても構いません。
最後にwebボタンにテキストを配置して完成です。
滑らかなグラデーションと斜線、陰影がうまくマッチしたwebボタンですね。今回は、webボタンの質感を高めるために、スムーズカラーやクリッピングマスク、陰影の作成など面倒な工程が多かったかと思います。
webボタンはwebデザインでは必須の素材ですね。グラデーション、カラー、陰影のつけ方、斜線の太さなどを変えることで様々なwebボタンがIllustratorで作れます。ぜひお試し下さい。