デザイン関連(Photoshop・Illustrator)に関する各種メモ書き

IllustratorのWEB用設定をして retinaディスプレイ用の画像をスライスする

● WEBに最適なイラストレータの設定

WEB用のIllustratorの設定はこのようにするといいでしょう

1. 環境設定

>【環境設定】>【単位】ですべて『ピクセル』に設定
>【環境設定】>【一般】でキー入力を『1px』に設定
>【環境設定】>【ガイド・グリッド】でグリッドを『10px』分割数を『10』に設定

2. 新規ファイルを開くとき

>【カラーモード】を「RGB」に設定
>【新規オブジェクトをピクセルグリッドに整合】のチェックを外す

3. パネルや表示設定

>『変形パネル』内で、[ピクセルグリッドに整合]にチェックを入れる
>『アピアランスパネル』の設定の「新規アートに基本アピアランスを適用」のチェックを外す
>『線パネル』の設定の「線の位置」を「線を内側に揃える」に変更する
>『整列パネル』の設定の「プレビュー境界を使用」にチェックをつける
>【表示】>【ピクセルプレビュー】にチェックを入れる。(ドラッグした時にXY座標が必ず整数値になります)
>『変形パネル』の「ピクセルグリッドに整合」のチェックを外す

Illustratorからretinaディスプレイ用の画像をスライスするには

  • A. 選択したオブジェクトを直接書き出し
  • B. アートボードを書き出す画像文用意してアートボードから書き出し
  • C. スライスから書き出し の大きく3つがありますが、 A、B の方法がおすすめです。

● A. 選択したオブジェクトを書き出し「Quick Exporter」(Retina対応)

こちらからインストールします → 素早く画像書き出しできるillustrator向けスクリプト
画像を選択して

【ファイル】>【スクリプト】>【quick-exporter】を選択する

だけです、レイヤー名がファイル名になります。
とても簡単ですのでオススメです。

● B. アートボードからの書き出し(Retina対応)(Illustratorのアートボード使ってスライス)

http://3fl.jp/nis006
おおまかな手順は以下のとおりです。

・レイヤー『//artboards』にアートボードサイズの矩形を複数配置
 ↓
・全ての矩形を選択して、スクリプト【Rebuild Artboards】を実行し、アートボードを一気に作成
 ↓
・スクリプト【Export Artboards by Dialog】で全アートボードの画像を書き出し

●C. Illustratorのスライスをスクリプトで自動化

http://cocopon.me/blog/?p=3687

関連エントリー

No.947
06/13 11:47

edit

illustrator
Photoshop
JavaScript