Photoshop vs. Sketch: The Battle for the Cleanest HTML/CSS

Originally published at:
Code generation

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.

Continue reading this article on SitePoint

Unfortunately, trying to work with PSDs within Brackets is more cumbersome than just doing everything the normal way. It takes a loooong time to load a PSD for a web comp, particularly when they are over 100MB, which is typical, if not on the low side.
There are also already plenty of code editors out there that are better than anything Bohemian Coding could try and whip up and also better than Brackets. Additionally, there are plenty of Sketch plugins out there that can do almost anything you would need them to do. Photoshop is falling behind, not catching up or surpassing anybody.

Nice article. I’d like to try Brackets, but it cannot load psd heavier than 16 Mo. My psd are always heavier than 16 Mo.

The one thing I would say that is missing here, and I find in a lot of mentions of Sketch is that Sketch is Mac only where as PhotoShop and Brackets is not.
Does anyone know of a Sketch equivalent that is available for Windows and/or Linux?

thetitle is misleading when it says HTML/CSS. You only talk about exporting the CSS here
and CSS3Ps is a bit of a joke isnt’it?