なぜピクセル画像をIllustratorで作るのか
ディスプレイの解像度が多種多様になり，再編集に強いデータが求められてきています。ベクターデータをうまく扱えるIllustratorで制作し，ピクセル画像に書き出すことも増えてきました。何も気にせず作ると画像はボヤけてしまいますが，ポイントさえ押さえればボヤけないキレイな画像を作ることができます。
すでにある情報と，開発経験をふまえた情報をミックスして記事をまとめたいと思います。書きたいことが山ほどあるので，数回に分けての投稿です。対象とする環境はCS3以上です。
ピクセルベースの画像を作るには準備が大事
まずは，ピクセル画像を作るのに適した環境設定に変更する必要があります。
単位
ピクセルベースの画像なので，全て「ピクセル」に変更します。
キー入力
十字キーを使用してサイズや位置を調整したりするかと思います。「一般」の項目内にある「キー入力」を「1px」にします。
ただし，CS3を使用する場合は「0.5px」としてください。作業によっては，デフォルトの「プレビュー」で作業をやりたくなる時があります。その時に1pxのキー入力でパスを編集すると，座標やサイズに意図しない小数点以下の数値が現れてしまうことがあるためです。
設定が0.5pxなので，2回のキー入力で1pxです。この編集方法であれば何故か正確に編集が可能です。なお，ピクセルプレビューでは0.5pxの設定であっても1回のキー入力で1px移動します。
ガイド・グリッド
「ピクセルグリッドを表示」にチェックを入れます。あとこの設定は必須ではありませんが「グリッド：16px」，「分割数：1」にしておくと，アプリ・ゲーム開発の時に重宝します。環境設定の準備はここまでです。
ドキュメントの設定
環境設定は終えましたが，ドキュメントの設定にも一工夫が必要です。新規ドキュメントを作って，新規ドキュメントプロファイルの項から「Web」を選択します。このままではちょっと不都合があるので，各項目の設定を変えていきます。
まずは各項目の確認
詳細を開いた上で各項目「単位：ピクセル」「カラーモード：RGB」「ラスタライズ効果：スクリーン（72 ppi）」となっていることを確認してください。ドキュメントプロファイルをWebにした時点で変更されているとは思うのですが，ここが変わっていなければ残念なことになるので一応確認します。
プレビューモード/ピクセルグリッドに整合
「プレビューモード：ピクセル」と変更します。また，CS5以降では「新規オブジェクトをピクセルグリッドに整合」は，必ずチェックを外します。
ピクセルグリッドに整合はWeb制作向けにCS5から追加された機能ですが，はじめからピクセルベースを意識して制作する場合には必要ありません。
ここまでの設定を終えれば以下のようになっているかと思うので，OKボタンをクリックして，ドキュメントを開いてください。
原点の確認
アートボードの原点が左上で「X：0，Y：0」になっているか確認します。
値は整数になっていれば問題はないので，Webサイトやアプリ・ゲーム開発など，それぞれの座標系（iOSアプリで標準UIを使用するなら左下など）に合わせて変更することをおすすめします。
ただし，変更作業の際にもし小数点以下を含む座標にしてしまった場合，画像を書き出す時にとても手間隙かけて修正するハメになるので気をつけてください。
以上でドキュメントの設定は終わりです。ファイルを作るたびに設定を変更するのは面倒なので，ひとしきり設定を終えたら，新規ドキュメントプロファイルから選択できるようにしておくことをお勧めします。
ピクセルに沿ってパスを引けるかチェック
最後にドキュメントを開いてからしか設定できない項目にチェックを入れます。メニューの「表示 ＞ ピクセルにスナップ」を選択してチェックが入った状態にします。
準備はこれで全て完了です。実際に四角形ツールでピクセルに合わせてパスを引くことが確認できるかと思います。
準備編はあくまで“パスをピクセルグリッドに合わせて編集する”ためのものです。ですので描画された四角形の1pxの線は以下のようにボヤけてしまいます。
次回は，パスを使って画像をどう制作していくか書いていきます。
- 追記
- 2014.3.24：次の記事「Illustratorでボヤけない1pxの線と図形を描く」を投稿しました。