1 / 21

Programming Photoshop with Javascript and turning shapes into code with Illustrator

Programming Photoshop with Javascript and turning shapes into code with Illustrator. Tom Krcha @ tomkrcha Adobe San Francisco. ExtendScript + JavaScript. ExtendScript Toolkit. Extend Photoshop and Illustrator with custom commands. Sample ExtendScript. Export Styles to JSON.

aman
Download Presentation

Programming Photoshop with Javascript and turning shapes into code with Illustrator

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Programming Photoshop with Javascriptand turning shapes into code with Illustrator TomKrcha @tomkrcha Adobe San Francisco

  2. ExtendScript+ JavaScript

  3. ExtendScript Toolkit Extend Photoshop and Illustrator with custom commands

  4. Sample ExtendScript Export Styles to JSON

  5. Adobe Generator Extend Photoshop with JavaScript

  6. Generate Image Assets Export layers to files in realtime while you work Layer name suffix convention: @2x, .png, .jpg, .gif, .svg

  7. 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": 53.996, • "green": 255, • "red": 0.004 • }

  8. Photoshop to Edge Reflow Exporter Written with Adobe Generator

  9. Realtime workflow with Generator (Gaming, Loom SDK) http://www.youtube.com/watch?v=fMxvyB1fMNY

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

  11. Adobe Generator Is Open Sourced

  12. Adobe Generator Generator vs. Remote Connections

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

  14. Show me the code already, ok?

  15. Advanced commands with ScriptingListenerJS.log (low level ActionDescriptor calls in PS) Download from http://www.adobe.com/devnet/photoshop/scripting.html

  16. Save as SVG <pathfill="#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

  17. Drawscript Turn Adobe Illustrator vector shapes into graphics code HTML5 Canvas, Obj-C iOS, C++ OpenFrameworks, Processing, CreateJS, Raw points http://drawscri.pt

  18. Drawscript example iOS Skinning with Drawscript Turn vector shapes into Obj-C http://drawscri.pt

  19. TomKrcha @tomkrcha

More Related