DTP Transitでタグ「ピクセルプレビュー」が付けられているもの

IllustratorをWeb制作に使い、ビットマップ書き出しするときのアレコレについて、これまでいろいろと取り上げてきましたが、現在、下記の制作方針が最強だと思われます(ツッコミ歓迎ですので、何かあればお気軽に)。

  • ドキュメントプロファイルは「Web」。[プレビューモード]を「ピクセル」に変更、[新規オブジェクトをピクセルグリッドに整合]はオフ
  • [線の位置]を「内側」にして作業
  • [アピアランス]パネルメニューの[新規アートに基本アピアランスを適用]のチェックをはずしておく
  • [新規オブジェクトをピクセルグリッドに整合]はオフに
  • [プレビュー境界を使用]にチェックを入れる
  • キー入力を「1ピクセル」に
  • アートボードの座標に注意
  • sRGBを基準に

これによって、次のような問題を回避できます。

  • プリントメディアの設定で制作されたドキュメントをWeb向けに利用しようとすると、エッジがにじむ。
  • [新規ピクセルグリッドを整合]をオンにしているとき、1ピクセルの線のオブジェクトを描くと、ピクセルグリッドでなく、ピクセルグリッドの中心に吸着する。そのため、実際の大きさは1ピクセル(=0.5+0.5)大きくなってしまう。
  • [線の位置]を内側(外側)にして作業しても、次に描くときには「中央」に戻ってしまう
  • せっかくいい感じに作業していても複数オブジェクトの整列を行うと、エッジがにじむ。または、見た目の通りに整列されない
  • [新規オブジェクトをピクセルグリッドに整合]がオンのまま描画すると、パスと描画のズレが生じる
  • アートボードごとに分けて制作しているとき、個別の書き出しでは問題ないのに、アートボード書き出しするとエッジがにじむことがある

Webで使うIllustrator(+SVG、+アイコンフォント) - NAVER まとめも併せてご覧ください。

ドキュメントプロファイル

後述する内容とダブりますが、新規にドキュメントを作成する場合には、ドキュメントプロファイルに「Web」を選択し、次の2点を修正しておくとよいでしょう。

  • [プレビューモード]を「デフォルト」から「ピクセル」に変更
  • [新規オブジェクトをピクセルグリッドに整合]のチェックをはずしておく

ドキュメントプロファイルについては、末尾にもふれています。

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はスライスなどが使いにくいので向き不向きでいうと、あまり向いていないと思うのですが、下記などの設定についてはおさえておくとよいと思います。

作業をはじめる前に次のことを行っておきましょう。

  • (1)環境設定で、単位をピクセルに変更する
  • (2)ドキュメントのカラーモードをRGBに設定する
  • (3)[表示]→[ピクセルプレビュー]をオンにする
  • (4)[表示]→[100%表示]を選択する(もちろん、作業中は拡大してもよいがあくまでも書き出しは100%の状態)

ai_pixel.gif

デフォルトでは「スクリーン(72ppi)」ですが、念のため、[効果]→[ドキュメントのラスタライズ設定]を「スクリーン(72ppi)」に設定しておきましょう。

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

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

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

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

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

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

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

セミナー開催情報

セミナー開催情報をこちらにまとめています。

DTP Transitと無関係のものも掲載しています。お問い合わせは、それぞれのイベントの主催者までお願いします。

5つの「く」

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

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

オススメ外部リンク

Adobe Creative Stationで「知ってるようで、知らずに損してるAcrobatとPDFのアレコレ」と題して連載しています。

Adobe Creative Stationで「ベテランほど知らずに損してるIllustratorの新常識」と題して連載しました。

Adobe Creative Stationで「ベテランほど知らずに損してるPhotoshopの新常識」と題して連載しました。

オススメのスライド

お問い合わせ

リンク

このページの上部に戻る