Programming Photoshop with Javascript and turning shapes into code with Illustrator
description
Transcript of Programming Photoshop with Javascript and turning shapes into code with Illustrator
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