作業スピードの向上と、高い品質を実現する「Adobe Illutrator」は、Webデザインの場においても非常に使えるドローイングソフトです。そんなIllustratorを"Webデザイン"の現場に導入したいものの、「肝心の使い方がわからない!」とお困りの方に向けて、このソフトのWebデザインに特化した基本的な使い方を全5回にわたって紹介して行きます。

■これまでの記事
【レポート】IllustratorでつくるWebデザイン・入門編 (1)ワークスペースの最適化

連載第2回となる今回は、イベントサイト、企業サイトでも活用できる「地図」を作りながら、Illustratorの「パス(直線、形状を表す線)」の描画方法についてです。Illustratorでの「パス」の引き方は、フリーハンドで行う作業とは異なります。クレヨンの使い方も知らなかった幼児期に戻ったつもりで、フリーハンドで描くイメージは一度忘れましょう!そして、「ペンツール」を使って自在にパスが引ける様になるまで、繰り返し練習を重ねましょう。

はじめに:各種基本ツールの説明

作業に入る前に、Illustratorを活用する上で使用頻度の高い描画ツールの一部を紹介します。各ツールがツールボックスのどこに配置されているかは、下図を参考にしてみてください。

ツールボックスの位置

ツールの詳細な位置

【"選択する"際に使うツール】

「選択ツール」…アートボード上に描いたオブジェクトを選択し、いつでも移動したり、サイズを変えたりすることができます。Shiftキーを押しながら選択すると、複数のオブジェクトを選択できます。

「ダイレクト選択ツール」…「選択ツール」よりも細かいセグメントやアンカーポイント単位で選択でき、いつでもポイントの位置を変えたり、形を変形したりすることができます。

【"描画する"際に使うツール】

「ペンツール」…点、直線、ベジェ曲線を描きます。今回の主役となるツールです。

「文字ツール」…テキスト入力を行います。縦書き入力も選択できます。

「長方形ツール」…図形を描くことができます。このツールを長押しすることで、長方形以外にも、円や多角形などの図形描画ツールを選択できます。

【"色を変更する"際に使うツール】

「<線>ボックス」/「<塗り>ボックス」…「ウィンドウ」の「スウォッチ」や、<線>、<塗り>ボックスをダブルクリックすることで、いつでもオブジェクトの線、塗りの色設定を行うことができます。

新規ドキュメントの作成

それでは早速、第1回で解説した方法で「幅：400px、高さ：350px」の新規ドキュメントを作成します。

アートボードが画面上に現れたら、描画色を確認しておきます。線を引くだけなので、「<線>ボックス」が「ブラック」、「<塗り>ボックス」が「なし(赤斜線が表示されている)」となっていることを確認しましょう。