Adobe Illustrator CS5の新機能を紹介するシリーズの2回目は、Web制作に関連したものを取り上げよう。といっても、IllustratorにはAdobe InDesign CS5のように直接SWFファイルやFLVファイルを配置し、Web用デザインを行う機能が搭載されたわけではない。あくまでもIllustratorではコンセプト作りやアセット(素材)作りを行うアプリケーションとして位置づけられている。では、どんな部分が便利になったのか。それをこれから紹介していこう。

コンテンツ

「Adobe CS5」体験版はこちらから

Webワークフローに合わせた「ピクセル整合」

Web制作の現場では、ドキュメントグリッドの単位を「ピクセル」に統一するのがセオリー。しかし、紙のデザインに慣れているとピクセルを意識せず、自由にオブジェクトを作成し、配置してしまう。そのままAdobe FlashやAdobe Dreamweaverで開くとエッジ部分が不鮮明になり、データを作り直した経験のある人も多いだろう。ピクセルグリッドはピクセルプレビューモードで600％以上拡大しないと表示されないこともあり、常時視認しながら作業することが難しいこともトラブルの要因のひとつと言える。

Adobe Illustrator CS5では、「ピクセル整合」機能が搭載され、ラスタライズ出力する際に鮮明なパスを生成できるようになった。新規ドキュメントを作成する際に「Webドキュメントプロファイル」を選択した場合は、デフォルトで「新規オブジェクトをピクセルグリッドに統合」にチェックが入っている。もちろん、すでに作成したオブジェクトに対して、後から「ピクセル整合」を適用することも可能だし、シンボルを作る際にも適用できる(ただし、拡大及び縮小したシンボルはプロパティでピクセル整合しても鮮明なパスにならないので注意が必要)。

新規ドキュメントを作る際、プロファイル欄で「Web」を選ぶと「新規オブジェクトをピクセルグリッドに整合」にチェックが入った状態で作業できる

表示メニューの「ピクセルプレビュー」を選択すると、オブジェクトがどのように分割されるか確認できる。さらに600％以上に拡大すると、ピクセルグリッドを表示できる。「ピクセルに整合」機能は、このピクセルグリッドに合わせてオブジェクトを再配置する

ピクセルグリッドに整合していないオブジェクトをピクセルプレビューで確認すると、エッジ部分が不鮮明な状態でラスター化されてしまうことが分かる

「変形パネル」に追加された「ピクセルグリッドに整合」オプションにチェックを入れると、ピクセルグリッドに沿ってオブジェクトが再配置され、不要なピクセルがなくなった。なお、操作を取り消したい場合は、編集メニューの「取り消し」を選択する