Introducing Sketch: Is Photoshop Now Old Hat?

In this article, Simon discusses his switch from Photoshop to Sketch as his design tool of choice, and introduces some of Sketch's core features.

A few months ago, I made the switch from Photoshop to Bohemian Coding's Sketch 2 as my design tool of choice. That's not to say that I don't still use Photoshop a great deal; when the occasion demands it I open Photoshop quite happily, but it's no longer my go-to software for visual design work.

First, a few words about Sketch: what it is, and what it isn't. If you're looking for a Mac-based, lightweight, digital design tool made for modern onscreen design work using primarily vector artwork, this is your new jam. Conversely, if you work on Windows, do print work, or spend a lot of time retouching photos, you're out of luck. Sketch doesn't try to be all things to all people, but for me it's nigh-on perfect.

I'm going to introduce a few of the key features and try to explain why they make life easier for me as a designer. Inevitably that will involve some comparison to the the way Photoshop does things, but I'm not trying to be down on Photoshop; it's just where I've come from and what I know. I also realise that the proper comparison might be to Fireworks, but truthfully, only one pro design shop I've ever been to actually uses it. Everyone else still uses Photoshop, so anecdotally, that's still the touchstone for most designers.

Multi-page support

This is a massive one. Sketch supports multiple pages. That means you can contain a multi-page design for a site within a single document, so, a page for the homepage, one for an "about" page etc. When you're done, you can export all the pages as a PDF to show the client, with just a couple of clicks. Lovely. To accomplish the same thing in Photoshop you'd use multiple layer groups, and you'd have to export designs one by one. To get them into a PDF you'd need to launch Pages, Word or some other page layout software and drop all the designs in.

Multi-page support is a massive help

And that's not the only benefit. When you're building a site, you often end up with multiple Photoshop files for various build elements. With Sketch, everything from initial ideas to final images can be contained within one file over multiple pages. Much simpler, and with the added joy of fewer files lurking confusingly in your file system.

The infinite canvas, and multiple artboards

In Sketch, your canvas is infinite, which sounds initially a bit scary. In reality, it simply means that your design can expand in any direction as much as it needs to without having to resize the canvas. Is this page of the site way longer than the last one? No worries, just make it longer and carry on.

It also means it's a great place for experimenting with ideas, diagrams and flows. Lately I've been working in a completely different way to usual, starting with what amounts to research, scribbles, and a wider flow of ideas. Coupled with multi-page support, I can refine these ideas into wireframes, then finally the finished design. And lo, in the end I have a single document, with all the workings, ideas, wireframes and final designs in one place. It's a very liberating way to work, and it's something that would be practically impossible in Photoshop — it just doesn't work that way.

Multiple artboards are also very cool. If you know Illustrator, you know what an artboard is; essentially it's an area on the canvas that contains your design. In Sketch (and Illustrator) you can have multiple artboards per page, allowing a page to contain multiple designs. This is really useful for icon design for instance, where often you need to do several versions at different sizes for various use cases.

Creating iOS icons using multiple artboards. This comes as a template in Sketch

Export options and slicing

Apart from the aforementioned PDF Book export, Sketch can export designs as:

TIFF

PNG, and

JPEG.

It's a sign of the times that there's no GIF export. PNG has essentially replaced GIF as the format of choice for everything except photos. PNG tends to produce pretty big files if you're used to GIF exports, but PNGs can be crushed down using third-party tools like ImageOptim.

Slicing in Sketch is pretty painless. Slices can be created from artboards automatically, or created manually. They can overlap each other, and you can choose to export only certain layers.

You can auto-export double-size graphics for newer "retina" displays with a high pixel density like those found on later iPhones or the new Retina MacBook Pro. This works really well so long as the graphics you're exporting are pure vector with no bitmap images.

Finally — and I'm including this under "export options" in a loose "getting stuff out of Sketch" kind of way — we have CSS export via copy and paste. What that means in practice is that if you've created a nice button, you can right-click and copy the CSS for that object. It's a very cool idea, but a bit of a novelty. Still, it does the job as a starting point for further hand-coding.

Multiple fills and borders, plus a usable gradient editor

Sketch allows you to add multiple fills to an object, so you can stack gradients upon gradients upon fills upon patterns up to maximum of four effects. It's a great feature and much more powerful than Photoshop's layer styles. You can also add multiple borders and shadows to a single object.

The Sketch Inspector. Note the plus icons for adding multiple fills, borders and shadows. The inspector is context-sensitive, so will show options for what you're editing at the time.

And another thing...

I'm going to dedicate a mention to Sketch's gradient editor. Love them or loathe them, it's hard to get away from gradients in digital design at the moment, and the gradient editor in Sketch is a great improvement on the three-palette juggling we're forced to do in Photoshop. Adobe's clumsy approach annoys me so much that I almost jumped ship just for this one feature.

The Sketch gradient editor

Which brings me nicely to...

The interface

Since CS3, Adobe has abandoned the idea of native interfaces for either Mac OS or Windows in favour of its own Adobe user interface (UI), which, with the best will in the world, doesn't do it for me. Adobe's choices bear no resemblance to any other Mac software around at the moment, shunning the conventions established by Apple and other developers in favour of a very dark, dense UI.

By contrast, Sketch is a great Mac citizen, obeying conventions to produce a simple, elegant interface. It all feels very Mac-like, with no jarring moments where it feels "wrong". Such a nice change.

That nice Mac interface in full effect

Did we mention the cost?

So, to play the old sales game, how much would you be prepared to pay for all this pro-level design goodness? $199? $129 maybe?

Well let's look at Photoshop's pricing. With a base price of $520 USD for Photoshop CS6, it can never be described as affordable. Indeed, I'd argue that a price like that puts it close to out of the reach of many freelancers in the current economic climate, and stems from their near monopoly in the creative market.

Back to the game. In the context of Adobe's pricing, maybe Sketch should be nearer $399? Much cheaper than its rival, but in the same ballpark.

It's $49.

That's 470 dollars less than Photoshop. That's an iPad, or a good monitor. With a price differential like that, Photoshop has to be much, much better. And I'm not sure it is.

Conclusion: Why you might love it, and why you might not

I love Sketch. It's easy to use, lightweight, fast and elegant. Plus it offers dedicated digital design tools that Photoshop can only dream of and will likely never support. I also love it for what it represents: indie developers taking on the big boys and doing it well. I love the fact that I can tweet @pieteromvlee and get a response to an issue from the actual developer. And that price is a big incentive.

That being said, there are of course drawbacks. Unless you exclusively work alone, there's a good chance you'll have to keep a copy of Photoshop around for when you have to work with others. I just had that scenario just this week, and you can't just wander into someone else's office and turn their workflow upside down with apps they've never heard of. So, it was back to Photoshop for me, and to an extent, it was like visiting an old friend, albeit one that hasn't moved on with their life in the way you feel you have, and who isn't really "getting you" anymore.

There are of course things that I wish Sketch could do that it doesn't; for example, dragging layers between Sketch documents, and re-ordering pages. And if I'm honest, Sketch can be slightly shaky. There are still bugs, and it's not quite a completely mature product, although the developers are squashing bugs ruthlessly with an update schedule only ruined by Apple's dismal speed at reviewing apps for the Mac App Store. The stability is fine though really. I use it daily by choice for almost all my graphics work.

All in all, it's really worth checking out if you're a digital designer on a Mac. Stick with it past the "that's not how Photoshop does it" stage and it might reward you with a new, and sometimes much improved, way of doing things.

Responses to this article

5 responses (oldest first):

Have you ever tried Adobe Fireworks? It has actually done 90% of what Sketch can do for years… it's just Adobe don't care about providing designers with the best tools so has completely ignored Fireworks and let it stagnate.

Can't believe people seriously work with layer groups or multiple documents when Fireworks has had pages and 1 click export for years.

That said… screw Adobe, they're letting Fireworks die so I've been moving to Sketch. The only things Fireworks has over Sketch really are Animated GIF support (wouldn't really make sense in Sketch) and PSD/AI import.

I agree with the Fireworksuser. I have both and slowly start to use Sketch, but still run into bugs. I am not sure what the 10% is that Fireworks can't do. It has pages, master pages, layers, states, symbols, auto shapes, extensions such as Specctr for speccing and a lot more, the ability to add interactions, export prototypes and export to psd. I am sure in time, Sketch will grow into being a wonderful product. PS is slowly getting some plugins to help, but I would use it instead of PS for screen design. Adobe is coming up with some new products that look promising.