読者です 読者をやめる 読者になる 読者になる

Two hats

Design + technologies

illustratorでUIデザイン:切り出しスクリプトの設定変更

illustratorでは画像を書き出すときにいくつかのオプションがあります。例えば、背景色を指定したり、インデックスカラーの使用色を指定できたりします。
画像切り出しスクリプトでは操作をシンプルにするためと、スクリプト上では設定した内容を覚えておくことができないため毎度設定することになり手間が増えるので仕様としてはドロップしました。


ただ、やはり「設定変えて書き出したいよ」と言う声があると思うので、応急処置的ですが直接コードをいじる方法を紹介します。
スクリプトの10行目あたりからオプションとして指定できるプロパティを列記しています。今回のスクリプトでデフォルトとして指定しなかったものはコメントアウトして残しています。


また、私の分かる範囲で各々のプロパティと該当するUIの部分を番号で対応付けました。コードはコメントアウトの部分に番号を降っています。設定できる内容についてはillustraotorのリファレンスを参照して頂ければと思います。

Adobe Illustrator CS6 Reference: JavaScript



PNG 24ビット

//PNG24
var optionsPNG24 = new ExportOptionsPNG24();
//optionsPNG24.antiAliasing = true;
optionsPNG24.artBoardClipping = true; //1.アートボードサイズでクリップ
//optionsPNG24.horizontalScale = 100; //2.幅の拡大率。illustratorのUIと違って%指定。
//optionsPNG24.matte = true; //4.背景色。透明部分がオンになっていると無効になる。
//optionsPNG24.matteColor = setRGB(255,255,255); //4.背景色の指定
//optionsPNG24.saveAsHTML = false;
//optionsPNG24.transparency = true; //5.透明部分
//optionsPNG24.verticalScale = 100; //3.高さの拡大率。illustratorのUIと違って%指定。

f:id:two-hats:20150421062336p:plain


PNG 8ビット

//PNG8
var optionsPNG8 = new ExportOptionsPNG8();
//optionsPNG8.antiAliasing = true;
optionsPNG8.artBoardClipping = true; //1.アートボードサイズでクリップ
optionsPNG8.colorCount = 256; //2.カラーテーブルで使用できるカラーの最大数。2~256
//optionsPNG8.colorDither = ColorDitherMethod.DIFFUSION; //3.ディザアルゴリズムの指定
//optionsPNG8.colorReduction = ColorReductionMethod.SELECTIVE; //4.減色アルゴリズム
//optionsPNG8.ditherPercent = 88; //5.ディザの適用量を指定。0~100。
//optionsPNG8.horizontalScale = 100; //6.幅の拡大率。illustratorのUIと違って%指定。
//optionsPNG8.interlaced = false; //7.インターレース
//optionsPNG8.matte = true; //8.背景色。透明部分がオンになっていると無効になる。
//optionsPNG8.matteColor = setRGB(255,255,255); //8.背景色の指定
//optionsPNG8.saveAsHTML = false; 
//optionsPNG8.transparency = true; //9.透明部分
//optionsPNG8.verticalScale = 100; //10.高さの拡大率。illustratorのUIと違って%指定。
//optionsPNG8.webSnap = 0; //11.許容量に基づいて近似色をWebパレットにスナップ。0~100 

f:id:two-hats:20150421063437p:plain

SVG

//SVG
var optionsSVG = new ExportOptionsSVG();
//optionsSVG.compressed = false;        //圧縮する.svgz形式でも書き出す。別名で保存時にSVGZ形式を選択できる。
optionsSVG.coordinatePrecision = 1;     //1.座標の小数点以下の桁数(1~7桁)
optionsSVG.cssProperties = SVGCSSPropertyLocation.STYLEELEMENTS;    //2.CSSプロパティ
//optionsSVG.documentEncoding = SVGDocumentEncoding.ASCII; //3.SVGに埋め込む文字
//optionsSVG.DTD = SVGDTDVersion.SVG1_1; //4.SVGプロファイル
optionsSVG.embedRasterImages = true; //5.画像をSVGファイルに埋め込む
optionsSVG.fontSubsetting = SVGFontSubsetting.None; //6.フォントのサブセット
optionsSVG.fontType = SVGFontType.SVGFONT; //7.テキストの保存形式
//optionsSVG.includeFileInfo = false;
//optionsSVG.includeVariablesAndDatasets = false;
//optionsSVG.optimizeForSVGViewer = false; //8.Adobe SVGビューワーに最適化
//optionsSVG.preserveEditability = false;
//optionsSVG.slices = false; //9.スライスデータを含める
//optionsSVG.sVGAutoKerning = false;
//optionsSVG.sVGTextOnPath = false;

f:id:two-hats:20150421063454p:plain

GIF

//GIF
var optionsGIF = new ExportOptionsGIF();
optionsGIF.antiAliasing = true; 
optionsGIF.artBoardClipping = true; //1.アートボードサイズでクリップ
optionsGIF.colorCount = 255; //2.カラーテーブルで使用できるカラーの最大数。2~256
//optionsGIF.colorDither = ColorDitherMethod.DIFFUSION; //3.ディザアルゴリズムの指定
//optionsGIF.colorReduction = ColorReductionMethod.SELECTIVE; //4.減色アルゴリズム
//optionsGIF.ditherPercent = 88; //5.ディザの適用量を指定。0~100。
//optionsGIF.horizontalScale = 100; //6.幅の拡大率。illustratorのUIと違って%指定。
//optionsGIF.infoLossPercent = 0; //7.劣化。非可逆圧縮の許容値を指定。0~100
//optionsGIF.interlaced = false; //8.インターレース
//optionsGIF.matte = true; //9.背景色。透明部分がオンになっていると無効になる。
//optionsGIF.matteColor = setRGB(255,255,255); //9.背景色の指定
//optionsGIF.saveAsHTML = false;
//optionsGIF.transparency = true; //10.透明部分
//optionsGIF.verticalScale = 100; //11.高さの拡大率。illustratorのUIと違って%指定。
//optionsGIF.webSnap = 0; //12.許容量に基づいて近似色をWebパレットにスナップ。0~100    

f:id:two-hats:20150421063445p:plain

今回は直接コードをいじる方法に留めましたが、もし要望が多ければUI化することも考えています。