For as long as I’ve been creating websites, Photoshop has been the industry standard for user interface (UI) design. I began using it in design school, then became more of a power user at the agency job that followed. It was the best tool for visual design, mainly because of its sheer scope. From photo editing to shapes, gradients, and smart objects, it was an all-inclusive tool. I was vaguely aware of Adobe Fireworks, but it wasn’t powerful enough to be integrated into our set workflow.
The improvements Adobe made to Photoshop became smaller over time. And once they switched to a subscription model, those recurring bills would serve as constant reminder that being a professional designer doesn’t come cheap. At the end of 2012, I upgraded to the last perpetual license, Adobe CS6, but hoped that a competitor would deliver me from paying a $50 a month subscription fee for the rest of my career. (I say $50 because Photoshop alone isn’t enough to be a full-stack designer.) Thankfully, a program called Sketch offered a viable alternative.
I started using Sketch just before I started working at Grafton. After an initial adjustment period, the benefits became clear. There were a few quirks here and there, but the advantages of Sketch far outweigh those of Photoshop. It became obvious to me that Photoshop is fantastic as a photo editing program, but was really shoe-horned in to being a UI design program. It was refreshing to use a program specifically built for the task of designing interfaces. Let’s talk specifics.
As I mentioned before, Adobe switched to a subscription model for all their apps, collectively called the Creative Cloud. Photoshop alone has a special price point of around $120 a year. (For anyone who needs more than Photoshop, as many designers do, the other option would be subscribing to the entire suite of products for around $600 a year.)
Sketch, on the other hand, costs $100. That’s it. No need to keep paying for updates as they roll out.
Sketch has the ability to create custom groups that can be used across any number of pages, called symbols. Symbols can either be edited on the master page, or key pieces of text can be overwritten in context. Sketch also has the ability to create text styles, so you can specify your headers and body type-treatments, and even shared styles, so you can quickly and easily change your button colors all at once.
Many of the above features have historically been found in Adobe’s print-focused app InDesign, but haven’t been integrated properly into Photoshop. Smart objects in Photoshop are roughly similar to symbols and shared styles, but don’t operate with the same ease of use. The reason being that smart objects create temporary files that only affect the specific Photoshop file they are linked to, so if you have multiple files with shared elements, you'd still have to edit each file individually. Smart objects cater more towards non-destructive image editing.
(Though Sketch makes great use of shared styles, it still has some improvements to make. They've recently ditched the ability to edit symbols in context, which can prove frustrating. Also, text styles must exist in separate text boxes, which means you can't specify link styles within a larger body of text.)
If you use Photoshop properly, you can create a pretty scalable file, provided you make use of shape layers, smart objects, and the like. But there are always exceptions, like brushes and masks, and those exceptions become painfully obvious when the resolution is changed, or when certain graphics are exported.
Since Sketch is a vector program, all elements are scalable by default. This includes photos as well, in that an image will remain crisp as long as it isn't scaled larger than its original size. No need to make sure it's a smart object, like in Photoshop. Because Photoshop has a dozen ways to do any task, un-scalable elements can sneak their way in. With Sketch, that’s never a risk.
It’s also worth noting that those rounded corner boxes are very easy to resize in Sketch, whereas Photoshop requires you to grab the specific anchor points to change the size of such a box.
Because Sketch was specifically designed to be a UI tool, all of the effects you can apply to a given shape are capable of being replicated by CSS. Shadow styles, gradients, blurs, overlays, it’s all the same.
In Photoshop, it’s easy to go off the rails and create wild, free-form designs that are impossible to translate into a web page. That’s great for design, but not necessarily for web design.
For the detail-oriented developer, measuring the distances between elements is a task made much easier by Sketch. Simply by clicking on an element and holding the Alt key, the pixel distances between objects appears. In Photoshop, you’d have to use the selection tool to get the same specs with a good amount of effort. It’s a small but noticeable difference.
Exporting layers and elements in Sketch couldn’t be more intuitive or easy, especially when accounting for retina screens. Every layer and layer group (or artboard) has what amounts to a “Save As” option (“Make Exportable” in this case) which automatically optimizes said element for the web. Saving larger sizes is as simple as selecting the size from a drop-down. Additionally, all images are cropped as they appear in the design, so saving out a masked image gives you exactly what you see.
Photoshop is a different story. Exporting layers requires a cunning use of slices, cropping, smart objects, etc., none of which are quite as simple as what Sketch provides. Photoshop introduced the ability to label layers with file extensions, which would then automatically create a graphic library, but the results are far less reliable.
Since Photoshop has been around longer than Sketch, it still has a few advantages. Here are a few things Photoshop still does better:
Naturally, Photoshop is the better program for manipulating images, altering colors, and just about every other aspect of photo editing. That’s what it was made to do, and it does it better than any competitor.
Sketch, on the other hand, is limited to masks and overlays, so more complicated tasks would require you to switch between programs.
Creating bulleted lists in Sketch is a bit of a hassle, especially when said list appears in the middle of text block with standard paragraph text. Wrapping text around images is also an issue, forcing you to create multiple text boxes to fake it.
While Photoshop doesn’t have either of these options built in (like InDesign), there is a decent work-around with paragraph indents. As long as there is a hard return between lines, left and/or right indents can be inserted, allowing a single text block to include space for bullets or to wrap around an in-line image.
This was a big downside when I first started using Sketch. The large icon library I built in Photoshop was no longer available to me, so adding icons to a file has become more of a chore. In Photoshop, you have the ability to save any shape layer to a global library of shapes. This is extremely useful when you need a quick edit icon, hamburger menu, or search icon. With Sketch, I have to refer to a folder I created, open a second file, and cut and paste it into my design.
Sketch and Photoshop are two very different programs with their own unique specialties. Photoshop was a program that was grandfathered into UI design, while Sketch was specifically made for it. Photoshop has kept pace, given its importance to the industry, but it’s nice to see a competitor get into the fray. For my sake, I’ll stick with the leaner program of the two, because it suits my needs better and makes my workflow simpler.