Web・インタラクション用のデザイン

こんにちは、デジタルスケープの伊藤和博です!

今回は、ピクセルグリッドに正確に合わせて描画する、「ピクセルグリッドに整合」と「テキストアンチエイリアス」をご紹介します。


Illustrator でWeb用グラフィックスが作りやすくなりました!


Web用のグラフィックスを作成する場合は、72dpiに適正化しオブジェクトを作成する必要がありますよね。

Illustrator CS4までは、作成したオブジェクトを表示メニュー→ピクセルプレビューでプレビューしても、1pointの線などは、ブラーやアンチエイリアスが適用された2pixelの線として表示されていました。



CS5ではこの機能が改善され、ドキュメントのラスタライズ効果を72dpiに設定した際、1pointは正確に1pixelで表示されるようになりました。

この改善により、IllustratorでWeb用の素材を作成するときに、鮮明できれいな画像を作ることができます。

新規オブジェクトをピクセルグリッドに整合


美しい素材を作るために、追加された機能の一つに「新規オブジェクトをピクセルグリッドに整合」があります。

この機能を使えば、作成した素材にアンチエイリアスを発生させることなく、きれいなグラフィックを作成することができます。

使い方は、新規ドキュメントを作成する時に、「新規オブジェクトをピクセルグリッドに整合」にチェックをいれ、新規ドキュメントを作成するだけ! これでアンチエイリアスのない、とってもきれいなグラフィックが完成させることができます。



こうすると、アートボード内に作成したオブジェクトは、自動的にピクセルグリッドに整合されたオブジェクトになります。

それでは、「新規オブジェクトをピクセルグリッドに整合」にチェックを入れてドキュメントを制作した時に、きちんとピクセルがグリッドに整合されているかどうかを確認してみましょう。

任意にオブジェクトを作成し、表示メニュー→ピクセルプレビューを選択します。



下のドキュメントを見てみてください。

点線の部分は、両方とも1pointで作成していますが、「新規オブジェクトをピクセルグリッドに整合」にチェックを付けずに作成した場合は、2pixelのラインになってしまっているのに対して、「新規オブジェクトをピクセルグリッドに整合」にチェックを付けて作成した場合は、1pixelのラインがくっきり引かれているのが分かります。





変形パネルのピクセルグリッドに整合


それでは、新規ドキュメントを作成する際に「新規オブジェクトをピクセルグリッドに整合」にチェックをいれずに作成した場合は、どうえすればいいのでしょうか?

そんな時は、ドキュメントの作成後に、変形パネルの「ピクセルグリッドに整合」にチェックをいれてみてください。



これで、簡単にピクセルグリッドに合わせることができましたね。



なお、すでに「ピクセルグリッドに整合」しているオブジェクトを整合していない状態にするには、「ピクセルグリッドに整合」のチェックをいれて描画した直後に、command【Ctrl】+Zで戻るしかありませんので、ご注意を!


テキストのアンチエイリアス


グラフィックを作成する際に、もうひとつ欠かせないのが、文字の要素です。

Illustrator CS5では、Photoshopに搭載されているテキストのアンチエイリアス機能が搭載されました。

小さいサイズのパナーを作成する場合は、アンチエイリアスは無しで作成した方が、文字がくっきり読みやすく作成できますよね。

 

今まで、紙媒体を主に扱ってきたデザイナ・イラストレーターの方が、「これからWebデザインを始めよう!」という時に、こんなIllustrator の機能を知っていれば、美しいグラフィックが作成できて便利ですよね。

皆さんも、ぜひ、使ってみてくださいね!



もっとIllustrator CS5 の使い方を詳しく知りたい方は!
Illustrator CS5 の使い方・基本トレーニングの受講がオススメです!




イトウ先生が、Twitterを始めました!
みなさんもぜひ、フォローしてくださいね!

http://twitter.com/itoh_sensei