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

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

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

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

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

1. 環境設定

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

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

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

3. パネルや表示設定

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

■ IllustratorからPhotoshopに変換してスライス

http://recotana.com/recotanablog/2014/03/30/523
http://gurigurico.blogspot.jp/2013/11/web.html

■ Photoshopでretinaディスプレイ用の画像をスライス

Retina対応用画像の作成について@2x http://dearps.lovwar.com/2015/03/retina/

参考 : http://bit.ly/1q8bVwO


関連エントリー

No.947
01/05 15:02

edit

illustrator
Photoshop
JavaScript