イラレでweb用デザインを作るときの注意点

Pocket

イラレでランディングページなどのweb用デザインを作るとオブジェクトのサイズや配置が小数点だったりします。
PCやスマホ画面では1px以下は表現できないため、この状態だとスライスツールでアイコンやバナーを切り出すときに滲みます。
それを解決するための最初やっておく設定をまとめました。
①ファイル>ドキュメントのカラーモード>RGBにする
→CMYKは紙媒体を作業する時の環境、RGBがweb作業をする時の環境です。
CMYKのままでも作業に問題はありませんが、色合いが若干変わってきます。
jpgやpngにする時も色が変わる場合があります。
気のせいかもしれませんが、最初からRGBで作るとのと後からCMYKからRGBにするのでは、ちょっと色が違う感じがします。
②編集>環境設定>一般でキー入力を1pxにする
③編集>環境設定>単位を全てピクセルにする
④編集>環境設定>環境設定>ガイド・グリッド>グリッドの分割数10
⑤表示>ピクセルにスナップ
⑥ファイル>ドキュメント設定>アートボードを編集でX、Y、W、Hに小数点があったら整数にする
→これでオブジェクトに少数がでなくなるようです
⑦オブジェクトサイズの中にオブジェクトや文字を入れる時にサイズを偶数か、奇数同士に設定
→中央揃えにした時に余白が均等になります
例えば10pxの帯に7pxの文字を入れて中央配置にすると文字が滲むか、上の余白が1px、下の余白が2pxになったりします。
なのでその場合は、10pxの帯で文字は6px。
サイズが奇数の場合・・・11pxの帯に7pxの文字を入れたら余白は2pxになるのできれいに見えます。
ただ、奇数のオブジェクトはスライスがうまく切れない場合があるので偶数の方が感覚的の良い気がします(145pxなら146pxにする)
⑦線は内側で設定
→デフォルトで線を描くと中央配置になっていますが、内側にする事でスライスを切った際に線が切れなくなります。
⑧アートボードの数値は必ず偶数にする
→例えばアートボードが1000px×2001pxで中央揃えなどをすると500pxの1000.5pxの位置に置かれます。
この端数がスライス切るときや書き出し時に影響するので、すっきりしたスライスを切るときにはやはり偶数の方が何かと使い勝手が良いと思います。
ましてや、端数のあるアートボードなんてもってのほかです。