Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mass Producing Banner With Photoshop & JavaScript

811 views

Published on

Photoshop Loves JavaScript.

Published in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Mass Producing Banner With Photoshop & JavaScript

  1. 1. MASS- PRODUCING BANNER
  2. 2. HELLO! I am Yoji Shiraki 白木陽次といいます :- ) astamuseという会社で役員してます。 デザイナーです。Python書いたりします
  3. 3. PHOTOSHOP LOVES JAVASCRIPT
  4. 4. 今日のやりたいこと
  5. 5. だいたいのことはできるJAVASCRIPT ▸ 選択範囲作成 ▸ 色塗り ▸ 文字打ち ▸ 保存 などはできます。あとは工夫次第。
  6. 6. 絶対参考になる サイト Adobe Photoshop CC 自動化作戦
  7. 7. 参考書 Adobe JavaScript リファレンス 国内だとこの本くらい…
  8. 8. DEMO 何はともあれやってみましょう!
  9. 9. 内容 ▸ あるバナーテンプレートを開く ▸ 設定ファイルの指示の色を塗る ▸ 設定ファイルの文字を入れる ▸ PSDとGIFに書き出す
  10. 10. 開発環境 SublimeTextでも Atomでも。 デバッグしやすいとい うことでExtendScript Toolkitが楽です。
  11. 11. 構成 src ├ script … JS 保存場所 ├ template … PSDテンプレート └ output … 出力 ├ psd … 生成済みPSD └ gif … 生成済みGIF
  12. 12. 設定ファイルの中身 0dd6c3 ABACUS c2995f ABALONE 8f9f70 ABANDON ec6e1c ABANDONED 20dbf0 ABANDONMENT 色の16進数コードと英単語のtsv
  13. 13. 主要コード var settingFileObj = new File(“setting.tsv”); if( !settingFileObj.open("r") ){ alert("Error."); return false; } 設定ファイル(.tsv)の読み込み
  14. 14. 主要コード while( !settingFileObj.eof ){ var line = settingFileObj.readln(); var items = line.toString().split("t"); /* メイン処理 */ } TSVの設定ファイルの行だけ処理を回す
  15. 15. 主要コード // “background”という名前のレイヤー選択 activeDocument.activeLayer = activeDocument.layers["background"]; activeDocument.selection.selectAll(); 特定のレイヤーをアクティブにして全選択。
  16. 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. 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. 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. 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. 20. 出来上がり(1個2秒)
  21. 21. 展望 ▸ 機械学習で最適化された設定を読みだして 効果の高いバナーを 自動で生成させられるかもね! ▸ でもそんな仕組み作るなら そういう外部サービス使って楽しよう!
  22. 22. 今日のソースコード yojishiraki/photoshop_jsx_samples (CS6まで動作確認してあります)
  23. 23. Thank you!!

×