IllustratorでWebデザイン、spriteの書き出しまでドバっとやるよ。

Webデザインはたいていイラレでやるよ。

Webデザインするとき、僕はたいていイラレでやってるよ。
Fireworksってサポート終了してほぼ死亡状態だし、Sketch.app はベクターツールがイマイチだし、まだまだバグが多い。

イラレの設定はこんな感じ。

• Pixel Preview を on
• Pixel にスナップを on
• 環境設定 > “キー入力”を 0.5px にする
• 環境設定 > “単位”を全てピクセルにする
• グリッド設定とかは10px単位とかで適当に。
  • ちなみに960pxグリッドシステムのテンプレートとかよく使う -> 960GSでダウンロード
• 変形とかは Pixel Grid に整合を on
• その他 -> IllustratorをWeb作業に最適化するためのポイント

で、できたファイルはきちんとレイヤーを整理してから、レイヤー保持したままフォトショに移す。

• 参考： デザイン業務のスピードアップ！Illustratorのレイヤーを保持したままPhotoshopに持ってくる方法

さらに、そこからSlicy使ってRetina用画像も含めてドバッと書き出し。以上おしまい。

• 参考： Slicyはあっと驚くほど便利だった。

できあがったスライス画像はCompassでスプライト画像化するんだけど(やり方)、このスプライトをRetina対応にはちょっと工夫が必要。以下を参考にRetina書き出し用のmixinを作ってあげる。

• 参考： 楽して時間短縮！Compassで作ったスプライト画像でRetina対応を行う方法

んで、一旦フォトショを経由するのウザいなーとか思ってたら、こんなんあった。まだ試してないけど。

• Retina画像を一括エクスポートするアプリは本当にないのか？ならばつくろう。 | ここぽんのーと