If you’ve missed Photoshop to Edge Reflow export at Adobe MAX, definitely check it out. It exports the PSD structure including the text content and the formatting, the layer styles and the bitmaps that are composed into a CSS and *.rflw document, which can be later on exported into HTML for a preview from Edge Reflow.
Here is the direct URL (30:15 min) to the ‘Photoshop to Edge Reflow’ part from the MAX keynote.
Photoshop team at Adobe is working on a new feature code-named Project Generator. This is a little sneak peek of what it does and how it helps you to save the time when designing user interfaces and preparing graphical assets for production or development. Together with that it rapidly simplifies the designer/developer workflow within Creative Cloud.
Web Assets generation process is defined using a naming convention of layers and groups. If you add suffix .jpg .png .gif or .svg (yes, shapes) to the layer name, Generator will understand it as an asset to export. You can also export out file in different scale by setting @2x, @1.5x or similar to the layer name.
Project Generator is a fully programmable and extensible pipeline based on Node.js allowing you to completely customize the output using JavaScript. Together with the assets you can get the structure as well and process it into different format e.g. HTML/CSS.
Stay tuned for more and let us know what you think, ping me and @timriot.
Note: this is a sneak peek and the final workflow can differ
In the designer/developer workflow it often happens that you want to export the Layer Style out of a Photoshop layer for custom processing in app UI development – native, web, gaming…
I wrote a tiny script that exports data like Drop Shadow, Gradient Fill, Stroke, Opacity, Bounds, Solid Overlay, Glow and more to a JSON file next to your PSD file.
ExtendScript (based on JavaScript) is an easy to way to begin automating processes in Photoshop. In fact the widely used Photoshop Actions are very much related to ExtendScript.
ExtendScript enables you to access many Photoshop features to get data, process it, save it for a specific use, or just alter the PSD document object model by applying effects, changing positions, and so on.
Download the Photoshop Scripting Guide and Scripting Listener plugin.
To work with scripts just go to: Applications/Adobe Photoshop CS6/Presets/Scripts or similar location on your machine and create a new *.jsx file, for instance GetLayerInfo.jsx.
Download Drawscript: http://drawscri.pt/
Download Sample Xcode project and Illustrator Assets (*.ai) for this tutorial.
With a free Drawscript extension for Adobe Illustrator you can convert Illustrator vector shapes into Obj-C CoreGraphics code (CG function calls with data).
(Figure: On the left side you can see a shape designed in Illustrator, on the right side a result running in iOS Simulator on iPad)
Setup your project:
1. Open Xcode
2. Create a new Project
File -> New -> Project and choose Single View Application under iOS/Application.
Update April 26 2013: Linear Gradients are now supported for iOS as well. Get the new build of Drawscript.
I’ve just pushed a new Drawscript version live. It supports linear gradients (JavaScript Canvas and iOS). I am looking for feedback and I am planning to extend it to radial gradients and other languages soon.
Exported star with a gradient would look like this:
var grd = ctx.createLinearGradient(37,164,98,265); grd.addColorStop(0,'rgba(255,255,35,1)'); grd.addColorStop(0.35746535879050567,'rgba(253,198,0,1)'); grd.addColorStop(0.5878547330208013,'rgba(47,79,255,1)'); grd.addColorStop(0.7939669604371922,'rgba(250,67,41,1)'); grd.addColorStop(1,'rgba(249,22,43,1)'); ctx.fillStyle = grd; ctx.beginPath(); ctx.moveTo(93,63); ctx.lineTo(111,100); ctx.lineTo(152,106); ctx.lineTo(123,135); ctx.lineTo(130,175); ctx.lineTo(93,156); ctx.lineTo(56,175); ctx.lineTo(63,135); ctx.lineTo(34,106); ctx.lineTo(75,100); ctx.lineTo(93,63); ctx.fill(); ctx.stroke(); |
To learn how to use the code above, check this tutorial: How to bring Illustrator vector shapes into JavaScript HTML5 Canvas with Drawscript
Download Drawscript panel for Illustrator here: http://drawscri.pt/
Flash and AIR has a Graphics API that allows you to draw on stage with function calls. Drawscript can convert Illustrator drawings into ActionScript 3 code to use within Flash/AIR.
Draw a shape in Illustrator, select it, bring-up Drawscript panel from Window->Extensions->Drawscript, set Prefix to: shape.graphics, select ActionScript 3 from drop down menu, copy the code.
Open Flash Builder, create a ActionScript Project, paste the code with creating new instance and adding it on stage like this:
package { import flash.display.Shape; import flash.display.Sprite; public class DrawscriptTest extends Sprite { public function DrawscriptTest() { var shape:Shape = new Shape(); shape.graphics.beginFill(16711936,1); shape.graphics.lineStyle(4,0); shape.graphics.moveTo(102,68); shape.graphics.lineTo(120,103); shape.graphics.lineTo(195,100); shape.graphics.lineTo(130,136); shape.graphics.cubicCurveTo(130,136,124,248,161,218); shape.graphics.cubicCurveTo(198,187,102,157,102,157); shape.graphics.lineTo(68,175); shape.graphics.lineTo(74,136); shape.graphics.lineTo(46,109); shape.graphics.lineTo(85,103); shape.graphics.lineTo(102,68); shape.graphics.endFill(); addChild(shape); } } } |
Run the project, voila!
Update: There is also a tutorial on converting Illustrator shapes to CreateJS.
Download Drawscript panel for Illustrator here: http://drawscri.pt/
HTML5 Canvas allows you to draw graphics right inside a webpage.
Open Adobe Illustrator, draw some shapes and select them, bring-up Drawscript panel and select JavaScript Canvas.
Copy and paste the code into an HTML webpage for instance in Brackets and run in a browser.
The final code would like this:
<html> <head> <meta charset="utf-8"> <meta charset=utf-8> <title>Canvas Test</title> <script type="text/javascript" src="easeljs-0.6.0.min.js"></script> <script> function init(){ var ctx = document.getElementById("canvas").getContext("2d");; ctx.fillStyle="rgb(255,1,0)"; ctx.lineStyle="rgb(0,0,0)"; ctx.lineWidth=4; ctx.beginPath(); ctx.moveTo(102,68); ctx.lineTo(120,103); ctx.lineTo(195,100); ctx.lineTo(130,136); ctx.bezierCurveTo(130,136,124,248,161,218); ctx.bezierCurveTo(198,187,102,157,102,157); ctx.lineTo(68,175); ctx.lineTo(74,136); ctx.lineTo(46,109); ctx.lineTo(85,103); ctx.lineTo(102,68); ctx.fill(); ctx.stroke(); } </script> </head> <body onload="init();"> <canvas id="canvas" width="800" height="800"></canvas> </body> </html> |
Download Drawscript panel for Illustrator here: http://drawscri.pt/
OpenFrameworks is a creative coding tooling written in C++. Read the OF API Documentation.
Drawscript currently support two different outputs for OpenFrameworks: Simple and Shape.
Simple output uses: ofLine, ofBezier, ofCircle, ofEllipse, ofRect
Shape output uses: ofBeginShape, ofVertex, ofBezierVertex, ofEndShape
In order to include within your OpenFrameworks project:
- Download OpenFrameworks
- I am using OSX version with Xcode
- Open examples/empty/emptyExample/emptyExample.xcodeproj in Xcode
- Copy and paste the generated code from Drawscript to testApp.cpp draw function
// testApp.cpp void testApp::draw(){ ofNoFill(); ofSetLineWidth(2); ofSetColor(0,0,0); ofLine(143,159,110,137); ofLine(110,137,143,114); ofLine(143,114,169,114); ofBezier(169,114,169,114,207,177,207,137); ofBezier(207,137,207,97,169,159,169,159); ofLine(169,159,143,159); } |
- Run, you should see this:
- In order to turn on anti-aliasing, call ofEnableSmoothing before
- The complete code for the Shape result would look like this:
// testApp.cpp void testApp::draw(){ ofEnableSmoothing(); ofNoFill(); ofSetLineWidth(2); ofSetColor(0,0,0); ofBeginShape(); ofVertex(143,159); ofVertex(110,137); ofVertex(143,114); ofVertex(169,114); ofBezierVertex(169,114,207,177,207,137); ofBezierVertex(207,97,169,159,169,159); ofVertex(143,159); ofEndShape(); } |
Update: There is also a tutorial on converting Illustrator shapes to HTML5 Canvas Javascript.
Download Drawscript panel for Adobe Illustrator here: http://drawscri.pt/
Drawscript converts illustrator shapes into code.
CreateJS is set of JavaScript libraries for building interactive experiences, we are specially using EaselJS. Get here http://www.createjs.com/
Open Adobe Illustrator, draw some shapes and select them, bring-up Drawscript panel and select CreateJS Tiny.
The output uses EaselJS Graphics Tiny API and the shapes are binary optimized via decodePath (p) function.
Copy and paste the code into an HTML webpage for instance in Dreamweaver and run in a browser.
<html> <head> <meta charset="utf-8"> <meta charset=utf-8> <title>title</title> <script type="text/javascript" src="easeljs-0.6.0.min.js"></script> <script> var stage; var s; var c; function init(){ c = createjs; var canvas = document.getElementById("canvas"); stage = new c.Stage(canvas); var g = new c.Graphics(); g.f("rgba(93,235,255,254)").ss(3).s("rgba(0,0,0,254)").p("AN6VGICWEsIFUAyIj6DmIA8FUIksigIksCgIA8lUIjwjmIFKgy").cp().ef().es().f("rgba(96,255,2,254)").ss(3).s("rgba(49,134,0,254)").p("EAN6Ak4YmkAAI6E2AAAAYAAAAHMHMh4maYiCmkleLQDmhGYDwg8nqKKE2j6YE2kEn+E2hkjSYhkjcoIBkFAEYYFAEOkEpiAAAAYAAAAiWqohaHCYhkG4DwrGC+Dc").cp().ef().es(); s = new c.Shape(g); s.x = 50; s.y = 0; stage.addChild(s); update(); setInterval(update,1000); } function update(){ stage.update(); } </script> </head> <body onload="init();"> <canvas id="canvas" width="800" height="800"></canvas> </body> </html> |
If you launch this HTML in Chrome, you can use Developer Tools and play with the graphics. Try setting the scaleX and scaleY properties in Console. It should scale the image up in realtime, because we’ve setup the update loop.
