1. Programming Photoshop with Javascript and turning shapes into code with Illustrator
Tom Krcha @tomkrcha
Adobe San Francisco

2. ExtendScript + JavaScript

3. Extend Photoshop and Illustrator with custom commands
ExtendScript Toolkit
Extend Photoshop and Illustrator with custom commands

4. Sample ExtendScript
Export Styles to JSON

5. Extend Photoshop with JavaScript
Adobe Generator
Extend Photoshop with JavaScript

7. Generate Image Assets
Export layers to files in realtime while you work
Layer name suffix .png, .jpg, .gif, .svg

8. Convert into JSON, CSS, HTML, XFL, XIB, NIB
Export PSD structure
Includes 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": ,
"green": 255,
"red": 0.004 }

9. Photoshop to Edge Reflow Exporter
Written with Adobe Generator

10. Realtime workflow with Generator (Gaming, Loom SDK)

11. Photoshop + Node.js + ExtendScript
Adobe Generator
Photoshop + Node.js + ExtendScript = + +

12. Adobe Generator
Is Open Sourced

13. Generator vs. Remote Connections
Adobe Generator
Generator vs. Remote Connections

14. Adobe Generator API Calls: Events: getDocumentInfo imageChanged
getPixmap
savePixmap
evaluateJSXString
evaluateJSXFile
alert
addMenuItem
Events:
imageChanged
toolChanged
generatorMenuChanged
currentDocumentChanged
subscribeToPhotoshopEvent (call)

15. Show me the code already, ok?

16. Advanced commands with ScriptingListenerJS.log
(low level ActionDescriptor calls in PS)
Download from

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

19. Turn Adobe Illustrator vector shapes into graphics code
Drawscript
Turn Adobe Illustrator vector shapes into graphics code
HTML5 Canvas, Obj-C iOS, C++ OpenFrameworks, Processing, CreateJS, Raw points

20. Drawscript example iOS Skinning with Drawscript
Turn vector shapes into Obj-C

21. Tom Krcha @tomkrcha