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

_DSC7108.jpg

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

  • ドキュメントプロファイルに「Web」を選択し、[新規オブジェクトをピクセルグリッドに整合]にチェックを付ける
  • [ピクセルプレビュー]をオンにする

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

  • [新規オブジェクトをピクセルグリッドに整合]はオフにする
  • グリッドを1ピクセルに設定し、[グリッドにスナップ]をオンにする
  • [線の位置]は外側に設定する

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

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

aicc-pixelgrid-32.jpg

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

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

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

(クリックすると、拡大します)

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

  1. 高さ260ピクセル、幅260ピクセルの四角形を描画する
  2. 線幅1ピクセルに指定する
  3. 四角形を選択したまま、[オブジェクト]メニューの[アートボード]→[選択オブジェクトに合わせる]をクリック

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

AiCS6-stroke-bug3.jpg

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

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

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

  • [変形]パネルのパネルメニュー内の[新規オブジェクトをピクセルグリッドに整合]にチェックをつける
  • 新規ドキュメントを作成時、ドキュメントプロファイルで「Web」のプロファイルを選択する
    →[新規オブジェクトをピクセルグリッドに整合]にチェックが入ります。

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

Twitter

本サイトの記事以外に、小ネタやタイムリーな話題などをツイートしています。

マンスリーでまとめています。

『10倍ラクするIllustrator仕事術』改訂版

『10倍ラクするIllustrator仕事術』(増強改訂版)は、2011年発売の『10倍ラクするIllustrator仕事術』の改訂版。

2014年に技術評論社から発売、現在6刷。2011年版と合わせて38,000部のロングセラーとなっています。

詳しくはサポートサイトにて。

画像:『10倍ラクするIllustrator仕事術』改訂版

Illustrator CC 2019(2018年10月リリース)への対応版準備中です。全ページ書き換えていますので、2017年版を待たずに、2014年版を(も)ご購入ください。

お知らせメールへの登録はこちら

5つの「く」

画像:『10倍ラクするIllustrator仕事術』改訂版

DTP Transitのコアとなっている制作へ考え方「ムラなく、モレなく、直しに強く、手数を少なく、美しく」を5つの「く」としてまとめてみました。

オススメ外部リンク

お問い合わせ

リンク

このページの上部に戻る