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

ソフトの導入がお済みでない方も、アドビ システムズのWebサイトで30日間体験版をダウンロードすることができますので、ぜひ参考書代わりに本記事をご活用ください!

ワークスペースを整えよう

それでは早速、今回は第一段階として作業環境を整える所から始めましょう。新規ドキュメントを作成する前に、「Illustrator CS6」に標準搭載されている「ワークスペース」機能を使って、用途に即した作業環境を整えます。今回はDTP(印刷物）ではなく、PC・モバイル向けのWeb用素材を制作する際に必要な環境に設定していきます。

Illustratorを起動すると、標準的なワークスペースが表示されます。このまま作業を行うことも可能ですが、あくまで標準の設定なので、目的に必要な機能を満たして表示しているとは限りません。そこで、より効率的に作業を進めるため、「Webデザイン」という目的に則したワークスペースに変更してみましょう。

初期設定のワークスペース

まず、メニューバーの「ウィンドウ」をクリックし、「ワークスペース」にカーソルを合わせます。用途に合わせたワークスペースが選択できるので、今回は「Web」を選択します。画面に出現していた「パネル」が置き換わり、Web向けの作業環境に変更されました。CS6からは右上の「初期設定」からも変更できます。作業に慣れてきたら、「ウィンドウ」から作業に必要な「パネル」だけを選択し、個人用のワークスペースを保存しておくことも可能です。

ウィンドウ＞ワークスペース＞Webと選択する

「Web」用のワークスペース

新規ドキュメントを作成しよう

PC・モバイル向けのワークスペースが整いましたので、次はアートボードの準備です。新規ドキュメントを作成してみましょう。

メニューバーの「ファイル」をクリックし、続けて「新規...」をクリックします(Ctr(command)+ N）。すると、設定ウィンドウが表示されます。今回は、横400px(ピクセル）、縦300pxのWeb用の画像を制作するための設定を行っていきましょう。

新規ドキュメントの設定ウィンドウ

ドキュメント名

「名前」は保存時にも決められるので、特に決めていなければ「名称未設定-1」のままでも大丈夫です。

サイズ

設定画面上の「単位」で「ピクセル」を選択。「幅」に数値入力で「400px」、「高さ」に「300px」と入力しましょう。

カラーモード

「詳細」をクリックし、「カラーモード」でWebシーンに適した「RGB(R:赤、G:緑、B:青)」を選択します。

ラスタライズ効果

Web用の画像は極力ファイルサイズを小さくする必要があります。特別な事情がない場合、基本として「スクリーン(72ppi）」を選択するようにしましょう。

これらの入力を終えたら、ウィンドウ下部の「OK」をクリックします。すると、作業を行っていく白地の「アートボード」が画面上に出現します。

これで準備は完了です。次回は描画ツール操作の実践練習として、地図製作を行います。お楽しみに!

紘太郎
福岡県出身。玉川大学芸術学部パフォーミング・アーツ科卒業後、エディトリアルデザイン、イラストレーターとしての活動を開始。書籍のイラストカットやイベントの広報物制作を請け負う傍ら、2010年にはTEDxYouth@Seedsにデザインチームの一員として参加。その後も、輸入アイスクリームの公式サイトデザイン、キャラクター制作など活動の幅を広げている。