mass producing banner with photoshop & javascript
TRANSCRIPT
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)
出来上がり(1個2秒)
展望
▸ 機械学習で最適化された設定を読みだして
効果の高いバナーを
自動で生成させられるかもね!
▸ でもそんな仕組み作るなら
そういう外部サービス使って楽しよう!
今日のソースコード
yojishiraki/photoshop_jsx_samples(CS6まで動作確認してあります)
Thank you!!