【Web制作で使うIllustrator】カテゴリの記事一覧

Web向けにIllustratorを使う上でのコロンブスの卵的なアプローチ

2010年にリリースされたIllustrator CS5でのWeb向けの機能強化以降、Web向けにIllustratorを使う上では、次のアプローチが基本とされてきました。

先週末に行われたdot-ai, Vol.2において、黒葛原道さん（eater）が、次のアプローチを発表され、「なるほど！」と思ったのでご紹介します。

次の図は、左が従来のもの。右側が黒葛原さん方式です。

Illustratorの「ピクセルグリッドに整合」は、3px x 3px、線幅1pxの図形を描画する際、ピクセルグリッドの中央に吸着します。これを「ピクセルグリッドに整合」を使わずに、ピクセルグリッドに正確に吸着すればいいじゃん、ということですね。

なるほど、このアプローチなら、パスの位置とピクセルグリッドがずれる問題にも対処できます。

Web用にIllustratorを使う、つまり、ピクセルプレビューをオンにする場合、1ピクセルの線幅を持つ四角形を作成する場合、四角形の大きさが小さいと、［線の位置］が「中央」または「内側」だとつぶれてしまいます。

［線の位置］は外側にするのがベターです。

（クリックすると、拡大します）

Fireworks CS6のニュースとは関係なく、最近、Illustrator CS6を使ってWeb向けの画像を作成しています。バナーなどを作成する場合、アートボードと同じ大きさの1ピクセルの枠を付けたりすることがよくあるのですが、この場合、次のワークフローではうまくありません。

Illustratorが線はパスの内側、外側に均等に描きますので、260+0.5+0.5で261となり、結果、アートボードサイズは261ピクセル四方になってしまいます。

IllustratorをWeb向けに利用するときには、［表示］→［ピクセルプレビュー］をクリックして、ピクセルプレビューをオンにして使います。

これを使わない場合、左のようにボケてしまいますが、ピクセルプレビューがオンになっていると、右のようになります。

Illustrator CS5以降は、次の方法でもOKです。

ぶっちゃけ、Illustratorはスライスなどが使いにくいので向き不向きでいうと、あまり向いていないと思うのですが、下記などの設定についてはおさえておくとよいと思います。

こちらにまとめ直した記事をご覧ください。