Photoshop has long been the go-to tool for web designers. Personally, I’ve been using Photoshop for longer than I can remember, and I’ll always have a soft spot for it in my heart. It’s what I used to make buttons and banners for my very first “Simpsons” site on Angelfire in the 5th grade, where I learned how to whiten my sister’s teeth for her Myspace profile picture, and what I use on a day-to-day basis to design websites at Launch.

So why would I look for another tool to use when I have a perfectly good one available to me? Let’s face it: Photoshop was not built as a UI or web design tool, and is lacking some features that Sketch provides right off the bat. And as we move towards a more collaborative design process at Launch, I feel that any tool that can help developers speed up their workflow should get some attention in my book.

After seeing some rave reviews on a couple design blogs for a program called Sketch, I figured I’d give it a try. It came with a 15-day trial, and during this period I realized some features Sketch provided were unavailable in Photoshop. Here are just a few reasons why Sketch gives Photoshop a run for it’s money:

Bitmaps Are Your Enemy

With the increasing popularity of retina displays, wether on mobile devices, laptops, and even desktop monitors, it only makes sense that we should design in a scalable format. In Photoshop, elements are created in bitmap form, meaning they pixelate or become blurry when scaled. As you can see below, this design was zoomed at 200% and due to Sketch’s 100% vector elements, nothing becomes blurry when scaled up.

Raster vs Vector Graphics

Exporting is Easier

After more than a decade, Adobe just updated Photoshop with a way to export assets without plugins. I’m not sure how easy it is to do this since I haven’t had the chance to dabble with it, but I can tell you that Sketch makes it easier than ever. It has an export all feature, and since it’s vector-based, it can export in pdf, png, and jpg in 1x, 1.5x, and 2x for retina displays. Another neat feature is the ability to drag and drop elements from your layers pane right to the desktop.

Exporting Elements in Sketch

Generated CSS Attributes

This is more useful to a developer rather than strictly a designer, but the ability to generate CSS styles on the fly is very handy. In photoshop, styles like bevel, emboss, and drop shadows won’t work seamlessly with CSS unless you use images. Less work for your developer is always better.

Sketch CSS Generator

Even though Sketch is in it’s beginning phase as a design tool, it sure does give Photoshop a run for it’s money. The built-in features that Sketch provides are a lot easier to use than fumbling with a bunch of plugins. Sketch isn’t perfect- the program is still a bit buggy, it’s not a replacement for Photoshop’s robust photo editing abilities, and the learning curve can be a bit steep. But, if you are a designer willing to think outside the box for your next project and want to try some new tools, I highly recommend giving Sketch a try.

Meet Dave Panizales

Dave Panizales is a Senior Web Designer at Launch Digital Marketing. When he's not pushing pixels at the designer bar, you can catch him traveling, cheering on the Chicago Bulls, or at a concert.

Comments