Originally published at: http://www.sitepoint.com/exporting-code-sketch-vs-photoshop/
Back in March I wrote an article that outlined 3 reasons to use Sketch and compared the “Export” feature to Photoshop’s “Extract Assets”.
In that piece Sketch came out with a slight advantage in my view. However image assets are not the only type of assets you can take away from a layout composition. In this article we’ll look at how both applications handle the delicate task of HTML/CSS code generation.
Method 1: The Old Way, with Photoshop
Since CS6, Adobe has allowed their community to build their own extensions for Photoshop. This has resulted in the creation of many critically acclaimed code extraction tools such as CSS Hat and CSS3Ps, which is free.
Photoshop has always been an extremely versatile tool, but since mobile design really became mainstream, these code extraction extensions were ever the more critical for maintaining a time-efficient design/development workflow.
Method 2: exporting code with Sketch App
Sketch App’s layer styles are very CSS-centric (itis, after all, a user interface design tool), so it’s very easy to right-click and “Copy CSS Attributes”. “Shadow” for example accepts four values; X, Y, Blur and Spread, and this translates directly to CSS’s box-shadow: X Y Blur Spread. In my opinion, this is the simplest form of code extraction and it works well.
However, Sketch App is still fairly new on the scene and it doesn’t have a companion application for code editing. I don’t know if Bohemian Coding intends to rectify that (it sure would be awesome), but as of this moment in time, Sketch has no means of extending the workflow in terms of coding.
This means that we’re required to keep switching back and forth between Sketch App and a code editor of our choice, to manually bridge that gap between our Sketch styles and the code that translates to.
Method 3: Extracting Code with Brackets
Adobe has made terrific advancements during the last 18 months in terms of continuity; there’s a range of mobile apps for capturing vectors, brushes and colours from real life moments using the device camera, and those captures automatically synchronise with your Creative Cloud account.
But the most impressive collaboration is that of Brackets and Photoshop. Brackets is an open-source code editor for front-end developers that’s built with HTML, CSS and JavaScript. Despite its “Live Preview” capabilities and integration with Edge Web Fonts, its user interface is actually quite minimal because you’re expected to add-on only the features you need with community-built extensions.
Importing Photoshop Documents into Brackets
Since the release of Brackets 1.0 (when Adobe abandoned their “Edge Code” fork and stuck with the name “Brackets”), web developers can now import Photoshop documents directly into Brackets and extract design information such as colours, fonts and other CSS attributes while coding, even if they don’t have Photoshop installed on their computer.
In fact, a Creative Cloud subscriber can send you a “shared link” that you can copy into Brackets, allowing you to initiate an extraction without even having the file at all. Lets try it.
First, locate the right sidebar and find the icon that reveals the tooltip “Extract for Brackets (Preview)” – click on it and you’ll notice a sample Photoshop document appear with all the layers intact, where you can toggle those layers on and off as if you were in Photoshop itself. Brackets does a very good job of on-boarding you through this, so I’ll try to keep it brief.