Photoshop Loves JavaScript.

1. MASS-
PRODUCING
BANNER

2. HELLO!
I am Yoji Shiraki
白木陽次といいます :- )
astamuseという会社で役員してます。
デザイナーです。Python書いたりします

3. PHOTOSHOP
LOVES
JAVASCRIPT

4. 今日のやりたいこと

5. だいたいのことはできるJAVASCRIPT
▸ 選択範囲作成
▸ 色塗り
▸ 文字打ち
▸ 保存
などはできます。あとは工夫次第。

6. 絶対参考になる
サイト
Adobe Photoshop CC
自動化作戦

7. 参考書
Adobe JavaScript
リファレンス
国内だとこの本くらい…

8. DEMO
何はともあれやってみましょう！

9. 内容
▸ あるバナーテンプレートを開く
▸ 設定ファイルの指示の色を塗る
▸ 設定ファイルの文字を入れる
▸ PSDとGIFに書き出す

10. 開発環境
SublimeTextでも
Atomでも。
デバッグしやすいとい
うことでExtendScript
Toolkitが楽です。

11. 構成
src
├ script … JS 保存場所
├ template … PSDテンプレート
└ output … 出力
├ psd … 生成済みPSD
└ gif … 生成済みGIF

12. 設定ファイルの中身
0dd6c3 ABACUS
c2995f ABALONE
8f9f70 ABANDON
ec6e1c ABANDONED
20dbf0 ABANDONMENT
色の16進数コードと英単語のtsv

13. 主要コード
var settingFileObj = new File(“setting.tsv”);
if( !settingFileObj.open("r") ){
alert("Error.");
return false;
}
設定ファイル（.tsv）の読み込み

14. 主要コード
while( !settingFileObj.eof ){
var line = settingFileObj.readln();
var items = line.toString().split("t");
/* メイン処理 */
}
TSVの設定ファイルの行だけ処理を回す

15. 主要コード
// “background”という名前のレイヤー選択
activeDocument.activeLayer = activeDocument.layers["background"];
activeDocument.selection.selectAll();
特定のレイヤーをアクティブにして全選択。

16. 主要コード
// カラーオブジェクト生成
var colObj = new SolidColor();
colObj.rgb.red = parseInt(cColor.slice(0,2), 16);
colObj.rgb.green = parseInt(cColor.slice(2,4), 16);
colObj.rgb.blue = parseInt(cColor.slice(4,6), 16);
// 色塗り
activeDocument.selection.fill(colObj,ColorBlendMode.NORMAL, 100, false);
色塗り

17. 主要コード
var placeholder = "{#placeholder}";
var textLayer = activeDocument.layers["text"];
var layerText = textLayer.textItem.contents;
var regObj = new RegExp(placeholder, "g");
if(layerText.match(regObj)){
textLayer.textItem.contents = layerText.replace(regObj, word);
textLayer.textItem.color = colObj;
}
文字の置き換え

18. 主要コード
gifOpt = new GIFSaveOptions();
gifOpt.colors = 200;
gifOpt.dither = Dither.NONE;
gifOpt.interlacted = true;
gifOpt.matte = MatteType.WHITE;
gifOpt.palette = Palette.EXACT;
gifOpt.preserveExactColors = false;
gifOpt.transparency= true;
newGifFile = new File(‘path/to/file.gif’ );
activeDocument.saveAs(newGifFile, gifOpt, true, Extension.LOWERCASE);
保存（GIF）

19. 主要コード
psdOpt = new PhotoshopSaveOptions();
psdOpt.alphaChannels = true;
psdOpt.annotations = true;
psdOpt.embedColorProfile = false;
psdOpt.layers = true;
psdOpt.spotColors= false;
newPsdFile = new File(‘path/to/file.psd');
activeDocument.saveAs(newPsdFile, psdOpt, true, Extension.LOWERCASE);
保存（PSD）

20. 出来上がり（１個２秒）

21. 展望
▸ 機械学習で最適化された設定を読みだして
効果の高いバナーを
自動で生成させられるかもね！
▸ でもそんな仕組み作るなら
そういう外部サービス使って楽しよう！

22. 今日のソースコード
yojishiraki/photoshop_jsx_samples
（CS6まで動作確認してあります）

23. Thank you!!