Web向けにIllustratorを使う上でのコロンブスの卵的なアプローチ
2010年にリリースされたIllustrator CS5でのWeb向けの機能強化以降、Web向けにIllustratorを使う上では、次のアプローチが基本とされてきました。
- ドキュメントプロファイルに「Web」を選択し、[新規オブジェクトをピクセルグリッドに整合]にチェックを付ける
- [ピクセルプレビュー]をオンにする
先週末に行われたdot-ai, Vol.2において、黒葛原 道さん(eater)が、次のアプローチを発表され、「なるほど!」と思ったのでご紹介します。
- [新規オブジェクトをピクセルグリッドに整合]はオフにする
- グリッドを1ピクセルに設定し、[グリッドにスナップ]をオンにする
- [線の位置]は外側に設定する
次の図は、左が従来のもの。右側が黒葛原さん方式です。
Illustratorの「ピクセルグリッドに整合」は、3px x 3px、線幅1pxの図形を描画する際、ピクセルグリッドの中央に吸着します。これを「ピクセルグリッドに整合」を使わずに、ピクセルグリッドに正確に吸着すればいいじゃん、ということですね。
なるほど、このアプローチなら、パスの位置とピクセルグリッドがずれる問題にも対処できます。
ポイントは、[アピアランス]パネルの[新規アートに基本アピアランスを適用]のチェックをはずしておくこと。
追記(2013年12月3日):
生明(あざみ)さんからツイートいただきました。
黒葛原さんのこの手法は、オブジェクトの拡大・縮小や変形時の崩れが起きないという点で強力。
Web向けにIllustratorを使う上でのコロンブスの卵的なアプローチ - DTP Transit https://t.co/eqlIFCGpug @DTP_Transitさんから
— 生明 義秀(あざみ) (@g_azami) 2013, 12月 3
この手法は、オブジェクトの拡大・縮小や変形時の崩れが起きないという点で強力。
なるほど!! と思ったんですが、うーん...