Programming Photoshop with Javascript and turning shapes into code with

IllustratorTom Krcha @tomkrcha

Adobe San Francisco

ExtendScript + JavaScript

ExtendScript ToolkitExtend Photoshop and Illustrator with custom commands

Sample ExtendScriptExport Styles to JSON

Adobe GeneratorExtend Photoshop with JavaScript

Generate Image AssetsExport layers to files in realtime while you

workLayer name suffix convention: @2x, .png, .jpg, .gif, .svg

Export PSD structureIncludes bounds, text format and content, layer styles, blend modes,

fills. Convert into JSON, CSS, HTML, XFL, XIB, NIB//a layer object:

{"id": 20, "index": 9,"bounds": { "bottom": , "left":,

"right": , "top": }, "name": "Just some circles with

FX to test Generator", "type": "layerSection”"visible": true"protection": { "all": true },

"blendOptions": { "mode": "passThrough" },

"smartObject": { … }, "layerEffects": { … }, "layers": [ ],"text" : { },

"fill" : {

"class": "solidColorLayer",

"color": {

"blue": 53.996, "green": 255, "red": 0.004

}

Photoshop to Edge Reflow Exporter

Written with Adobe Generator

Realtime workflow with Generator (Gaming, Loom SDK)

http://www.youtube.com/watch?v=fMxvyB1fMNY

Adobe GeneratorPhotoshop + Node.js + ExtendScript

= + +

Adobe GeneratorIs Open Sourced

Adobe GeneratorGenerator vs. Remote Connections

Adobe Generator APICalls:• getDocumentInfo• getPixmap• savePixmap

• evaluateJSXString• evaluateJSXFile

• alert• addMenuItem

Events:• imageChanged• toolChanged• generatorMenuChanged• currentDocumentChanged

• subscribeToPhotoshopEvent (call)

Show me the code already, ok?

Advanced commands withScriptingListenerJS.log

(low level ActionDescriptor calls in PS)Download from

http://www.adobe.com/devnet/photoshop/scripting.html

Save as SVG

<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d=”M105,39L9,18C0,0,27,19,20,3C129,44,120,75,120,75L3,20L-18,-9L87,95L3,-20L76,60L20,-3L105,39Z"/>M – moveTo, L – lineTo, C – curveTo, Z - closePath

DrawscriptTurn Adobe Illustrator vector shapes into

graphics codeHTML5 Canvas, Obj-C iOS, C++ OpenFrameworks, Processing,

CreateJS, Raw points

http://drawscri.pt

Drawscript example

http://drawscri.pt

iOS Skinning with DrawscriptTurn vector shapes into Obj-C

Tom Krcha @tomkrcha