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.
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 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.