Illustratorでピクセル単位の作業を奇麗に行うための方法(イラレのピクセルずれ問題)

2017年の追記(CC2017向け)

次の点に留意して作業すればOK。基本的にイラレのピクセル周りの扱いはモリモリ改善されているのでだいぶ楽になった。

次セクション「2016年の追記」との違いだけを列挙する。

CC2016までの課題であった「新規オブジェクトをピクセルグリッドに整合」オプションが「ピクセルのスナップオプション」になって、ようやくまともに機能するようになった。うれしい。「線幅と効果を拡大・縮小」をONにしたまま作業をしないということと、非ピクセル整合オブジェクトを基準に「整列」しないという2点に留意しておけばおおむね大丈夫な感じ。この2点も別にバグとか不具合ではなく、当然そうなるべき動作なので作業者が注意すべきことだ。あとは「ピクセル整合していない『傾いてない四角形』のみを抽出表示する機能」とかあれば完璧(今でも「選択>ピクセルグリッドに未整合」というのがあるが、これ整合してるオブジェクトも選択しちゃいませんか???)。

2016年の追記(CC以降からCC2016までならこのセクションだけ読めば大丈夫)

最近のイラレでは「表示>GPUでプレビュー」機能がついたがこれはピクセル単位の作業するには向かない。特性上なのかピクセルが滲んで見える。表示上だけの問題なのでデータがしっかりピクセルクリーンになっていれば大きな問題はない。初期設定ではONなので気がついたら「表示>CPUでプレビュー」に切り替えること。

最近の私は以下の設定でもうずっとやってる。CS4までとくらべてイラレのピクセルの扱いがだいぶまともになったので不都合は特にない。

アンチパターン

以下の設定は推奨しない。

2012/5/26:イラレCS5及びCS6の場合の追記

このエントリはイラレCS4をベースに記載している。また本文中にも書いてあるように(おそらく)イラレ10くらいから適用可能な方法である。CS5およびCS6では、変形パネルに「ピクセルグリッドに整合」オプションが追加され、これをONにしておけば、とりあえずシャープな線や矩形を描くことは可能になった(新規作成でプロファイル「Web」を選択しておけばデフォルトでON)。

CS6に関して言えば、このオプションはオブジェクトの位置を0.5px単位でずらすことで線のにじみを回避している(CS5は持ってないため不明だがまあ同じだろう)。この「ピクセルグリッドに整合」の欠点は、デザインの試行錯誤の過程等で線幅を太くしたり細くしたりしているうちに、オブジェクトの位置が0.5pxずつ移動してしまうことだ(適当に矩形や線を描いて線幅をいじってみるとすぐ分かるが、この妙な動きはかなりショック)。これを回避するには、矩形の場合、「ピクセルグリッドに整合」は残念だが常にOFFにしておき、線幅パレットで「線の位置」を「線を内側に揃える」又は「線を外側に揃える」にする。この方法は、以下に説明する「効果>パスのオフセット...」を使った方法と考え方は同じ。CS4ではナゾの滲みのせいで使えなかった方法がCS6では使えるようになったため、だいぶ楽チンになった。なお、線の場合は、このエントリで紹介する方法か、もしくは、上の問題があることを意識した上で「ピクセルグリッドに整合」を使う。

追記おしまい。以下本文。



IllustratorでWebやソフトウェアのUIデザインを行う際には、ご存知のとおりピクセル単位の処理にまつわるさまざまな問題点に出くわすこととなる。たとえば・・・

  1. 線幅の値によっては、線幅が太る(多くは線幅が奇数値のとき)。
  2. アンチエイリアスがなんていうか、間抜け・・・。
  3. オブジェクトサイズが見た目上と異なる。

これらはイラストレーターの内部的には整合が取れており問題ない。しかしwebなどの最終出力=ディスプレイな作業時には、見た目上意図したとおりになっているかどうかも気にしなければならないため、問題となる。

▼イラストレーターのピクセル処理の泣きどころ><

f:id:neriu:20091027022816p:image

WebだろうがソフトウェアのUIだろうがあらゆるデザインにイラレ使いたがりッ子の私としては、1ピクセルのシャープな線をビシッとひきたいのに、いざやってみると2ピクセルの間抜けな線になったりすると激しく萎える。これまでは、大好きな変形パネルを使って0.5ピクセル単位の調整を行うことでこの問題に対処していた。

そんな折、三階ラボさんのこの記事にヒントを得て、この問題にファイナルアンサーとも呼ぶべき一定の解を、ついに得ることができた!三階ラボさんの記事は相当完璧な解説なので、イラストレーターホリックな向きには一読を強烈にオススメする。かなり前の記事なのに、なんで今まで気がつかなかったんだろう。ちなみに以下に書くのは、私の利用法に合わせて少々アレンジしたものです(最後のパスのオフセットのかけ方のところ)。

試していませんが、たぶんイラストレーター10以降くらいで有効な方法ではないかと思います(私はCS4で確認)。

まずはイラストレーターの環境設定

  1. 「一般>キー入力」を「0.5px」に。
  2. 「単位」の一般と線を「ピクセル」に。
  3. 「スマートガイド」の「整列ガイド」も基本的には外しておいた方がよいと思われ(変なところに吸着されるとかえって邪魔。整列は整列アクションにキーボードショートカットを割り当てたい)。
  4. また環境設定とは別に、書類設定(CS3まで)またはアートボード設定(CS4)において、アートボードの大きさを整数ピクセル値にしておく(印刷物の作業を行う人は特に注意)。

ここまではWebの作業する人なら普通にやっている設定かもしれない。キー入力が1pxでなく0.5pxなのがミソ。

それから表示メニュー

  1. 「表示>ピクセルプレビュー」をオン
    実はこの設定を行うと前述の環境設定の1の設定は無視されて強制的にキー入力=1pxとなる。しかし後述の理由でピクセルプレビューは頻繁にオンオフするので、やはりキー入力=0.5pxの設定は必要。
  2. 「表示>ピクセルにスナップ」をオン
    ピクセルプレビューがオフのときはこのメニューは「グリッドにスナップ」となるので、まず上記1を設定すべし。

ここから先は、実際の作業中の操作となる。

実践編1「1pxの線幅を持つ、四角形を描きたい!」

たとえば「K100%の1ピクセルの線を持つ100×100ピクセルの長方形」を普通に描くと、結果として「K50%の2ピクセルの線を持つ102×102ピクセルの長方形」となる(上に挙げた「なんじゃこりゃ」の例を参照)。これは、線幅がパスの両側にとられることでまず1pxずつ太り、2pxに太った線を1pxに見せかけるために色を薄くする(アンチエイリアスがかかる)という処理がなされるためである。本来はこの問題を解決するために、線パレットの「線の位置」で内側(や外側)を指定できるようになっているはずなのだが、実はこのオプション、上辺に微妙すぎるアンチエイリアスが残ってしまい、繊細なデザイナーの気持ちをいちじるしく傷つけ、血圧をただちに上昇せしめる*1

そこでこのようにする。

対象の四角形(線の位置は中央でよい)を選択し、「効果>パスのオフセット...」でオフセット量を「-0.5px」とする。

これだけで「線幅が太る」「間抜けなアンチエイリアスがかかる」「オブジェクトサイズが見た目上と異なる」という3つの問題を一挙に解決できる。この方法はどんな線幅でも適用可能である。線幅2pxのときにはオフセット「-1px」、3pxのときにはオフセット「-1.5px」と、線幅の半分のオフセット値を設定してあげればよい。これでうまくいかない場合は、変形パレットで当該オブジェクトのX、Y、W、Hが整数値になっているかを確認(前段の設定が間違いなければ、いかように四角を描いても整数になるはずだ)。

▼これでイラストレーターでの四角形の描画はパーペキ。

f:id:neriu:20091027025737p:image

実践編2「1pxの線幅を持つ、線を描きたい!」

「効果>パスのオフセット...」は直線のようなオープンパスの場合、期待するような結果を得られない。そこでここでは2つの方法を紹介する。

直線の場合はこの2つの方法を使い分けることになる。私は最初の方法をとることが多い。

▼直線の場合はちょっとだけ面倒だよ。

f:id:neriu:20091027025738p:image

ピクセルプレビューの問題点に関する補足

オブジェクトがピクセルに吸着するので便利なピクセルプレビューだが、困った問題もある。

なんだかんだで私はピクセルプレビューOFFで作業することが多いかもしれない。表示倍率100%に戻れば、通常モードでも奇麗な四角形が描けるので、いちいちモード間を往復する手間が省けるのである。

以上、パスのオフセットをはじめとする細かな技を駆使することにより、四角形の描画とその後の扱いが劇的にラクチンになるという話。しかしそれ以前にAdobeには、こういう基本的なところでさくっと作業できるようにして欲しいモノである。

関連エントリ

Webデザイン。イラレは出来る子。フォトショなんかに負けないもん。 - Memento Mac

いまさらながらThe new iPad のイラストレーター(ai)形式テンプレートをシェア - Memento Mac

*1:Illustratorがピクセル処理に弱い(弱いといっても差し支えなかろう)のは、もともとが印刷物のデザインを指向してきたソフトということと関連があると思われ、内部的な長さの演算にピクセルではなく印刷物由来の単位を使っているという話も聞いたことがあったりなかったり。。。

コメント
3件
トラックバック
4件
ブックマーク
0 users
neriu
neriu

1976年生まれのヘビー級フリーランスデザイナー。俺嫁息娘娘の5人家族で仲は良い方だと思います。Mac、Web、iPhoneアプリ開発、投資・資産運用、英語学習、阪神タイガース。iPhoneアプリを一緒に開発できるプログラマーを絶賛募集中!! TwitterかFacebookにてコンタクトくださ