ピクセルベースでのIllustrator CS6のアートボードの挙動

この記事は鷹野雅弘によって執筆されました。
公開日:2013年5月17日、更新日:2014年7月10日

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 CS2以降、Illustratorでは線の位置に「内側」「外側」を設定することができるようになっています。内側を選んでみます。

AiCS6-stroke-bug2.jpg

内側を利用して、上記のようなワークフローを踏むと、幅/高さは期待通り260ピクセルになりますが、ピクセルプレビューしたとき、次のように描画がバグります。

AiCS6-stroke-bug.jpg

線の位置(外側)

[線の位置]に外側を利用する場合には、259+0.5+0.5(=260)ですので、最初に描画する四角形の幅/高さを259ピクセルにする必要があります。ちょっと面倒ですね。

と思ったら、やっぱり描画がおかしい。

AiCS6-stroke-bug4.jpg

まとめ

Illustrator CS6で「ピクセルグリッドに整合」は進化したけど、まだまだ甘い....

まとめ2

最終的なサイズから、幅/高さともに1ピクセル差し引いた数字で四角形を作成するのがベストです。

AiCS6-stroke-bug5-s.jpg

追記:

描画した後に、[線の位置]を「内側」(または「外側」)にすると、ピクセルグリッドからずれてしまうことが諸悪の根源のようです。Fireworks CS6のcommand+Kのようにピクセルグリッドに整合するコマンドがあるといいのかもしれません。

あと、[線の位置]を「内側」にした直後、「内側」のボタンが押下した状態にならないのも、またバグだと思われます(ボタンの見た目だけの挙動。なお、「外側」はOK)。

AiCS6-stroke-bug2.jpg

追記(2):

Windowsでも同様のようですね...

追記(2013年9月18日):

Illustrator CCで検証しましたが、ほぼ同様です。

ただし、[線の位置]に「外側」にしたとき、見た目のバグり方がちょっとだけ違う...

IllustratorCC-pixel-bug.png

追記(2014年7月10日):

最終的なサイズから、幅/高さともに1ピクセル差し引いた数字で四角形を作成するのがベストです。

と書きましたが、現在は[線の位置]が「内側」にするのがよいと考えています。

『10倍ラクするIllustrator仕事術』(増強改訂版[CS5/CS6/CC/CC 2014対応])

2014年10月に発売。新しいバージョンを使いながらも、古いやり方のまま作業されている中級以上のユーザー向けの書籍。ツールやコマンドなどの基本的な使い方の解説はありません。

2015年3月、8月に増刷。前書(2011年版)と合算すると3万部超のロングセラーとなっています。

改訂版に関する情報

2011年に発売した書籍の改訂版です。

  • 対応バージョンは、CS5/CS5.1/CS6/CC/CC 2014
  • 178ページから78ページ増量の256ページ
  • 金額は180円(だけ)アップの2,380円(税別)

最新版への対応

2016年11月リリースのIllustrator CC 2017への対応版を、2017年2月に発売します。なお、書籍リリース後の追加情報は、サポートページにて公開しています。

全都道府県縦断セミナーツアー

2014年10月に技術評論社から発売された『10倍ラクするIllustrator仕事術』(増強改訂版)のプロモーションのために、全国47都道県にて実施。

47都道府県すべての県での開催が終了しました。ご参加ありがとうございました!

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

『10倍ラクするIllustrator仕事術』(増強改訂版)は、2011年発売の『10倍ラクするIllustrator仕事術』の改訂版。2014年に技術評論社から発売、現在5刷です。2011年版と合わせて35,000部のロングセラーとなっています。

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

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

『10倍ラクするIllustrator仕事術』全都道府県縦断セミナーツアー、 47都道府県すべての県での開催が終了しました。ご参加ありがとうございました!

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

5つの「く」

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

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

オススメのスライド

お問い合わせ

メールマガジン

サイトの新着情報などを、月1回程度、メールマガジンでも配信しています(まぐまぐから配信。無料です)

オススメ記事

Illustrator

InDesign

Photoshop

その他

 

リンク

このページの上部に戻る