Photoshop vs Sketch: review

This review aims to give readers a broader and deeper insight on how two applications, Photoshop and Sketch, handle HTML/CSS code generation. Here’s a closer look to determine how nice and neat each software can perform this frangible task.

Tool #1: Photoshop – The Traditional Way


Adobe has further developed since CS6 through allowing their community the opportunity to build extensions, resulting to various profound extraction tools including CSS Hat and CSS3Ps which are available for free.

Photoshop is indeed a highly versatile tool, but with the rise of mobile design that has become mainstream, extraction code extensions were more prominent. It is deemed critical for the maintenance of time-efficiency when it comes to design/development workflow.


Tool #2: Sketch App – Exporting Code

Sketch App – Copy CSS attributes

Primarily a user interface design tool, the Sketch App layer styles are quite centered on CSS which is fairly easy to familiarise with, right-click, and just Copy CSS Attributes. It may be the simplest form of code extraction today that is equally effective, but this tool is relatively new and doesn’t come with a code editing app. Hence, there is no means as of the moment to extend the workflow through coding. Switching back and forth the Sketch App and your choice of code editor is the solution to bridging the gap between the styles and the codes.

Tool #3: Adobe Brackets – Extracting Code

Adobe has significantly advanced in recent months, exhibiting continuity while offering a range of mobile apps for capturing vectors, colours and brushes to portray realistic, life-like moments with the use of the camera. The captured images then quickly automatically synchronise, without any efforts on your part, with your Creative Cloud account.

Brackets is an open-source code editor built with HTML, CSS and JavaScript, targeted to be utilised by front-end developers. Despite the Live Preview capabilities and integration with Edge Web Fonts, the Brackets user interface is still limited and at its minimal setting. You are required to add-on just those features you need by getting and implementing community-built extensions. The most remarkable collaboration is actually the relationship between Brackets and Photoshop, which makes a big difference.

Importing Photoshop Documents directly into Brackets

Right from the release of Brackets 1.0 (same time when Adobe decided to drop their Edge Code fork and go with the name Brackets), web developers were enabled to import Photoshop documents into Brackets. It can be done directly and design information can be quickly extracted during coding. This involves colours, fonts and other CSS attributes, impressively even if Photoshop is not actually installed on your computer.

Moreover, a subscriber of Creative Cloud can simply send you a shared link which can be easily copied into Brackets. This makes initiating the extraction possible without even having to save the file itself. How?

To start off, locate the right sidebar then click on the tooltip Extract for Brackets icon. A sample Photoshop document will appear which hold all layers intact. You can toggle the layers on and off, same way you would if you were within the Photoshop App itself. There is almost no learning curve since Brackets does a great job of a comprehensive yet simple on-boarding instructions to help you through.

Getting the Distance Between Two Layers

The distance between two layers can be measured by utilising the Sketch App. Just click on the first layer while you press and hold Shift, then simultaneously click on the second layer. Pretty easy and intuitive. You can do the same thing in Extract for Brackets, copy the value to the clipboard, then use it in your stylesheet without ever leaving the app.

Performing a Rapid-Code with CSS Hinting

CSS hinting is an excellent feature which clearly displays the constant development of Brackets, though Dreamweaver CC is running alongside the race.

To choose a layer from the PSD to extract all of its styles, select a layer first. Next, switch to a stylesheet. Once the right timing to declare a style arises, Brackets will typically suggest circumstantial code hints based on what you are typing. It can also suggest pre-defined values based on your selected layer.

However, keep in mind that it does not auto-prefix style attributes corresponding to the browsers vendor, and an extension would be necessary if you need this feature.

The Bottom Line

Sketch 3

Sketch App and Photoshop have been long contenders in the field. Photoshop being a renowned, huge multi-purpose tool brimming with features that some find overly packed for the average user interface designer. Well, it surely has two things that the Sketch App is lacking, which are continuity and collaboration.

The ability to convert a PSD to CSS code in a simplified and smart split-screen style workflow, without even having PSD on your computer is the best collaborative feature of all. The best part is, it doesn’t matter if you have Photoshop or a Creative Cloud subscription, since Brackets remain absolutely free.