MASS- PRODUCINGBANNER

HELLO!

I am Yoji Shiraki白木陽次といいます :- )astamuseという会社で役員してます。

デザイナーです。Python書いたりします

PHOTOSHOP LOVES JAVASCRIPT

今日のやりたいこと

だいたいのことはできるJAVASCRIPT

▸ 選択範囲作成▸ 色塗り▸ 文字打ち▸ 保存

などはできます。あとは工夫次第。

絶対参考になるサイト

Adobe Photoshop CC自動化作戦

参考書

Adobe JavaScriptリファレンス国内だとこの本くらい…

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

内容

▸ あるバナーテンプレートを開く

▸ 設定ファイルの指示の色を塗る

▸ 設定ファイルの文字を入れる

▸ PSDとGIFに書き出す

開発環境

SublimeTextでもAtomでも。

デバッグしやすいということでExtendScript Toolkitが楽です。

構成

src├ script … JS 保存場所

├ template … PSDテンプレート

└ output … 出力

├ psd … 生成済みPSD └ gif … 生成済みGIF

設定ファイルの中身

0dd6c3 ABACUSc2995f ABALONE8f9f70 ABANDONec6e1c ABANDONED20dbf0 ABANDONMENT

色の16進数コードと英単語のtsv

主要コード

var settingFileObj = new File(“setting.tsv”);if( !settingFileObj.open("r") ){

alert("Error.");return false;

}

設定ファイル（.tsv）の読み込み

主要コード

while( !settingFileObj.eof ){var line = settingFileObj.readln();var items = line.toString().split("\t");

/* メイン処理 */}

TSVの設定ファイルの行だけ処理を回す

主要コード

// “background”という名前のレイヤー選択

activeDocument.activeLayer = activeDocument.layers["background"];activeDocument.selection.selectAll();

特定のレイヤーをアクティブにして全選択。

主要コード

// カラーオブジェクト生成

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);

色塗り

主要コード

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;}

文字の置き換え

主要コード

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）

主要コード

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）

出来上がり（１個２秒）

展望

▸ 機械学習で最適化された設定を読みだして

効果の高いバナーを

自動で生成させられるかもね！

▸ でもそんな仕組み作るなら

そういう外部サービス使って楽しよう！

今日のソースコード

yojishiraki/photoshop_jsx_samples（CS6まで動作確認してあります）

Thank you!!