イラストレーターでWEBデザインする際の設定

個人的にはFireWorks使いなのでPhotoShopやillustratorは使う頻度が少ない。
FireWorksはMacromedia時代はWEBのパーツを作るのにいい機能があったがAdobeになってから劣化する事はあっても良くなる事は無い。Adobeからすると「黙ってPhotoShop使えよ」って所だろう。
PhotoShopはスライスなど劣る部分もあるが概ねPhotoShopの方が優れているので出来るだけPhotoShopを使う様にしようかと思ってる。
illustratorはイラストを描くときと印刷物を作る時ぐらいしか使わないがWEBデザインも出来なくは無い。ただ元々印刷用のソフトなので設定をちゃんとしないとぼけぼけのWEBサイトになってしまう。

そこでイラストレーターでもWEBデザイン出来る様な設定の方法を書いてみます。

まずは「編集」→「環境設定」の全ての単位をピクセル（px）にする。
「表示」→「ピクセルビュー」で表示方法を切り替える。
「表示」→「ピクセルにスナップ」に切り替える。

これで大体WEBページを作れる環境になる。

実際に制作する際の流れで言うと
まず、「ファイル」→「新規」でプロファイルをWEBにしてから、アートボードを制作するWEBデザインの大きさをピクセルで指定する。（高さは適当に大きめに作っとく）
「オブジェクト」→「スライス」の「アートボードでクリップ」を選択しておく。

きちっとした、ぼけない1ピクセル線の四角を描きたい場合は四角を描いてから（この時、情報パネルの数値が整数になってなければ設定がおかしい）
線パネルの線幅を0.99pxにして（1pxだと上の線が若干ぼける）、線の位置を内側にするとピシッとした線の四角が出来る。
2ピクセルの線にしたい場合は1.99pxにするとOK
クライアントに確認出しするときにアンチエイリアスオフの文字でテキスト部分と画像部分を明示したい場合はMSPゴシックなどで書いたテキストを選択し、「効果」→「ラスタライズ」でアンチエイリアスを「なし」にするとビットマップフォントみたいになる。

後はスライスするなりして「WEBおよびデバイス用に書き出し」すればOKです。

Tags: Illustrator