Photoshopで作成して納品したデザインデータを、「こちらで調整ができるように文字をシェイプにして渡して欲しい」と言われ、本来であれば小さな変更でもこちらを通してやってもらいたくかつその分の作業費も受け取りたいところではあるが、先方にも色々事情があることはわかるし世の中は綺麗事だけでは進まない(完璧を目指すよりまず終わらせろ)。
Illustratorだと文字を選択してアウトライン化するのは比較的楽なんだけど、Photoshopの場合はレイヤーパネルとかから一つ一つ選択して変換しなければならない(と思う)。修正したり何かする度に沢山のレイヤーから漏れなくテキストをシェイプ化して納品用データを作り直すのが地味に大変。ということで書いた。
Sketchを使っているのが自分だけで、他の人が開けないのでPhotoshopに移動させたい。編集できる必要はなくて、各オブジェクトのサイズや位置などが分かるリッチなビューアとして使ってもらう。
Sketch側のレイヤー構成はこんな感じで、パーツ単位でスライスを指定しておく。
SketchToolをインストール(install.shを実行するかパスを通せば良い)し、sketchtool export slices design.sketch
とするとスライスが書き出される。「-o パス」で書き出し先を指定できるはずだがエラーでうまく動かず「1」というフォルダが作られてしまう。同じ名前のスライスがあると上書きされてしまうので注意する。
sketchtool list slices design.sketch > export.json
などとするとスライスの情報がJSON形式で出力される。
スライスされた各パーツのサイズや位置が記録されているので、あとはこのJSONを元にPhotoshopで再現してあげればよい。PSD.rbも使ってみたかったが、PhotoshopのJavaScriptでやってみた。JSONのパースは信頼のCrockford先生によるJSON2を使用。書き出したスライスデータは「export」というフォルダ名にして、同じ階層に置いてある。Photoshopを起動して「File>Scripts>Browse...(英語環境にしてるので)」を選択して、sketch2psd.jsxと名付けた下のファイルを選択する。
#include "json2.js";
var currentDir = new File($.fileName).parent;
var file = new File(currentDir + "/export.json");
file.open();
var jsonString = file.read();
var layoutJson = JSON.parse(jsonString);
var slices = layoutJson.pages[0].slices;
var bounds = layoutJson.pages[0].bounds.split(",");
var offsetX = -parseInt(bounds[0], 10);
var offsetY = -parseInt(bounds[1], 10);
var width = parseInt(bounds[2], 10);
var height = parseInt(bounds[3], 10);
var doc = documents.add(width, height, 72, "psd", NewDocumentMode.RGB);
for(var i=0; i<slices.length; i++) {
var imgFile = new File(currentDir + "/export/" + slices[i].name + ".png");
var openedDoc = open(imgFile);
var partsName = slices[i].name;
openedDoc.name = partsName;
openedDoc.selection.selectAll();
openedDoc.selection.copy();
openedDoc.close();
activeDocument = doc;
doc.paste();
var currentLayer = activeDocument.activeLayer;
currentLayer.name = partsName;
currentLayer.translate(-currentLayer.bounds[0], -currentLayer.bounds[1]);
currentLayer.translate(slices[i].rect.x + offsetX, slices[i].rect.y + offsetY);
}
処理内容としては、先ほどexportしたpngを開いて全選択し、ひたすらコピペしている。PhotoshopのJavaScriptでのファイルの扱い方はJAVASCRIPT TOOLS GUIDEというドキュメントに書かれているのだけど、2014版がないし、公式でも探せなくて泣ける。それ以外はここにある。
Alignなどの問題か、文字のレイヤーなどパーツによってずれが出たり、Sketch上で位置を修正してもJSONで書き出した際にboundsが更新されてなかったり(offsetX, offsetYで対応してある箇所)、おかしなところが結構あって、仕事で使うには厳しいといった印象。それでも手でひとつひとつ並べるよりかは楽。
filePath = ""の二重引用符内を好きなフォルダのパスに置き換えて下さい。
exp.quality = 70;の値を0から100の範囲で指定して下さい。
exp.format = SaveDocumentType.JPEG;のJPEGのところを変更すればCOMPUSERVEGIF, PNG-8, PNG-24, BMPで書き出しできます。ファイルの拡張子を追加している".jpg"のところも合わせて変えるのを忘れずに。
