Hatena::ブログ(Diary)

Memento Mac RSSフィード Twitter

最近リリースした個人プロジェクト

  • サイ・ヤング賞メーター - MLB The Cy Young Award Meter
  • 日本の教育費
  • Waramoco Design Inc.

2009年10月26日(月)

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

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つの方法を紹介する。

  • 0.5ピクセルメソッド
    これは従来からの私のやり方。ピクセルプレビューをオフにして、カーソルキーを一回たたいて0.5pxずらす方法。縦線ならXの値を0.5pxずらし、横線ならYの値を0.5pxずらす。キーボードだけで操作できるのでまずまず軽快。
  • パスのアウトラインメソッド
    かなり強引な方法だが、1pxなり3pxなりの線をアウトライン化して、塗りにしてしまう。他のオブジェックトと整列させたり、グラデーションを設定したい場合などに便利なので、意外と実用的な方法。ただし、点線にしたり、アピアランスで線を追加していって複雑な線を作りたいときには、この方法はとれない。

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

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

f:id:neriu:20091027025738p:image

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

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

  • ピクセルプレビューの状態でオブジェクトを移動すると、0.5pxに合わせたオブジェクトも整数値に戻ってしまう。その都度、Command(Ctrl) + Option(Alt) + Y でモードを切り替えるのは少々手間(ちなみに私は、なるべくキーボードは左手、マウスは右手から離したくないという理由で、ピクセルプレビューにCommand + Option + Eを割り当てている)。
  • スマートガイドが出なくなる。これもモードの性質上仕方のないことかもしれない。ピクセルプレビューを使わなくても、アートボードサイズが整数値ならば、ラフに引いたオブジェクトも奇麗な(小数点が混じらない)ピクセル値になるので、通常モードを基本に作業してもいいかもしれない(私もいまだに気分によってころころ変わる)。ただし通常モードの場合、表示倍率が100%じゃないと、整数値にならないので注意。

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

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

関連エントリ

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

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

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

flow-tflow-t 2011/09/29 13:31 おお こんな対策があったとは。
自分はグリッドを1px単位で表示&「グリッドにスナップ」で回避してましたが、それだとグリッドが邪魔すぎるんですよね。
ありがとうございます。

tomatomasouptomatomasoup 2013/02/24 17:37 参考にさせて頂きうまくいきました!!
もやもやが晴れました〜
ありがとうございます!!!

通りすがり通りすがり 2014/03/25 11:06 むしろ、よけいにボケが広がってしまうのはなぜなのでしょう‥‥しくしく。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

  • サイ・ヤング賞メーター - MLB The Cy Young Award Meter
  • 日本の教育費


Follow me on twitter