「Illustratorをメインにしたウェブデザインってどうやるんですか？」と質問された。

世の中のウェブデザインをする人の多くがデザインを仕上げるのに、何を使っているか、いまいちよくわからないのだけど、私の場合、Fireworksがメインで、素材作りにIllustrator、Photoshopを使う‥‥というやり方をしています。

※【注意】ここでいう「仕上げ」「メイン」とは「HTMLにするページのビジュアルデザインのデータ」と「デザインしたものをウェブサイト用に書き出しする作業をするソフト」という意味です。

ということで早速、Illustrator CSで行うウェブデザインの行程をチェックしてまとめてみました。

主な手順は以下です。

  1. ラフイメージの作成（手書きとか）
  2. Illustratorを起動
  3. 画面サイズの確認
  4. ガイド/ガイドライン作成
  5. イメージサイズ作成
  6. イメージ作成
  7. スライス/微調整
  8. スライスの大きさでウェブサイト用の画像を書き出し
と、あっさり書いていますが、6と7の作業工程がえらく面倒だと思いました（Fireworksと比較してですが）
ちなみに、ウェブサイト作成に関することで　Illustratorでできる作業は
  • Flashアニメの作成
  • クリッカブルマップ（イメージマップ）の作成
  • イメージのスライス
Illustratorだけではできないことは
  • GIFアニメーションの作成
  • 写真の細かい修正と補正
となります。
私も再度チェックするまで知らなかったんですが、Illustratorでクリッカブルマップを作成できるんです。

そして、Illustratorでウェブデザインを行ううえで覚えておくと便利なことは（多分、）以下です。
  1. ウェブページ作成の際の基本単位は「ピクセル」→環境設定で単位を修正する
  2. オブジェクトのサイズは小数点以下を作らない。ただし座標　XとYの配置位置で小数点が消えないケースがある。
  3. 線はアンチエイリアスがかかる場合があるので、なるべく使わない。できれば線は仕上げる前にアウトラインや塗りに変換する。
  4. スライスのためのレイヤーは別に用意する。
  5. シンボル機能を使う
  6. レイヤーは必ず使う。
ということでIllustratorの細かい設定の詳細は次回の「Illustrator使いのためのWebデザインの基礎2」にまとめます。