Friday, 29 November 2013

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

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

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

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

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

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

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

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

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

No comments:

Post a comment