Illustratorの設定
ホームページなどWeb媒体への出力の場合、殆どの作業はPhotoshopで行います。
Illustratorは、Photoshopで足りないデザインパーツを制作する時に使う程度です。
ですから、Photoshopで設定したようなブラシやパターンをIllustratorで設定する必要はありません。
また、Illustratorは、DTP用(紙媒体)のアプリケーションとして開発されてきた経緯がありますので、Webデザインに使うには、後述の「IllustratorのWebデザイン向け設定」が必要になります。
ただし、この設定を行っても、100%、Illustrator特有のアンチエイリアスを無くす事は出来ません。
コンピューターで扱う画像は、ピクセル単位より細かく描画することは出来ない、このため、物体の輪郭にジャギーと呼ばれるギザギザが発生してしまう。 このジャギーを少しでも軽減させるための技術をアンチエイリアスといいます。
| アンチエイリアス無し | アンチエイリアス有り |
|---|---|
![]() |
![]() |
Photoshopはビットマップなのでドット単位で線を引くことができます。

Illustratorはベクター形式の図形処理ソフトなので、無駄なアンチエイリアスが掛かってしまいます。

Illustratorの起動
Illustratorを起動します。
Illustratorのインストールが済んでいない場合、「デザイン講座」のPhotoshopのインストールを参照してインストールをして下さい。
[スタート]→[すべてのプログラム]→[Adobe Web Premium CS4]→[Adobe Illustrator CS4]の順でクリックします。

Illustratorは、ベクター形式の図形処理に最も適したプロ用のソフトで、特にDTPの分野で高く評価されています。
ホームページのデザインをPhotoshopだけで仕上げるのであれば、Illustratorは特に必要ありません。
Illustratorは非常に高価なソフトウェアですので、初めてホームページを制作される方はお試し版をインストールして使ってみることをお勧めします。
また、本格的なホームページ制作には、Dreamweaver、Flash、Photoshop、IllustratorなどがセットになったWEB PREMIUMというお買い得製品もあります。
まずは30日間お試しで使ってみて、どの製品を購入するかを決めるのが良いです。
製品購入は、下記のURLをクリックしてください。
| 内容 | |
|---|---|
| Adobe Illustrator CS5 日本語版 |
Illustratorの通常版です。 |
| Adobe Creative Suite 5 Web Premium 日本語版 |
Illustratorだけではなく、Dreamweaver,Flash,Illustrator,Fireworksなどが一緒になったお買い得版です。 |
| Adobe Illustrator CS5 日本語版 学生・教職員個人版 |
Illustratorのアカデミック版です。内容は、全く変わりません。 |
| Adobe Creative Suite 5 Web Premium 日本語版 学生・教職員個人版 |
Illustratorだけではなく、Dreamweaver,Flash,Illustrator,Fireworksなどが一緒になったお買い得品のアカデミック版です。内容は、全く変わりません。 |
IllustratorのWebデザイン向け設定
PhotoshopよりIllustratorの操作が慣れている方も少なからずいらっしゃいますよね。
そんな人向けの設定です。
[編集]→[環境設定]→[一般]をクリック

「プレビュー境界を使用」にチェック
[OK]ボタンをクリック

[編集]→[環境設定]→[単位・表示パフォーマンス]をクリック
「一般」を「ピクセル」に変更
[OK]ボタンをクリック

[表示]→[ピクセルプレビュー]をクリックして「ピクセルプレビュー」にチェックを入れる。

[表示]→[ピクセルにスナップ]をクリックして「ピクセルにスナップ」にチェックを入れる。

[表示]→[定規を表示]をクリックして定規を表示させる。

[ズームツール]をクリック
アートボード左上をクリックし続けて6400%まで拡大する

[選択ツール]をクリック
ルーラー原点をクリックして、アートボード左上までドラッグ

あとは、以下のようにオブジェクトの設定に気をつければアンチエイリアスは少なくなります。
- 線幅は、1px単位で行う
- 線の位置は、線の内側に揃える
Adobe Illustrator CS5 ピクセルグリッドに整合する機能
Illustrator CS5から、ピクセルグリッドに整合する機能が追加されました。
この方法を使ってもアンチエイリアスが完全に一掃できる訳ではありませんので、やはり、Photoshopの操作に慣れて、Photoshopで制作出来るようにしましょう。
Adobe Illustrator CS5の公式解説ページです。
では、次に「パーツデザインの制作」を解説します。


