Why we’ve championed Sketch over Photoshop for design

Sketch is a wonderful tool, specifically created for website and app design. We made the switch from Photoshop to Sketch over a year ago, unsure as to whether it would live up to the hype – in fact, it sounded too good to be true! However, it’s exceeded our expectations and has become the tool of choice for our team.

See why below:

Layers

The application is very similar to Photoshop with its layer functionality. Any number of layers can be grouped and moved around with ease. What’s better than Photoshop is that you can select areas directly on the canvas and move all objects inside of that selection, which is very handy. Photoshop sort of does this, but we find it’s auto-select a bit clunky.

authenticstyle-Why we’ve championed Sketch over Photoshop for our designs 1

Vector

Ahh the beauty of lossless. We love that Sketch is vector, as we often work at 200% to make sure that all the small details are precisely where we want them to be. Objects remain crisp and can be adjusted to the decimal place – allowing for supreme accuracy. For this reason, it’s also useful for creating initial logo concepts.

Exporting abilities

Unlike Photoshop, objects can be exported as SVG natively, instead of having to resort to Adobe Illustrator. Having the different exporting abilities really comes in handy for a variety of projects’ needs.

Exporting designs is an effortless process too. Simply zoom out click and drag your mouse over all of the artboards and click the ‘make exportable’ button.

authenticstyle-Why we’ve championed Sketch over Photoshop for our designs 2

Symbols

Aka “global elements”. With Photoshop, we used to create elements and have to change them manually across every PSD. With Sketch, it’s far simpler.

Once we’ve created a style we’re happy with (for example a website header), we group the layers and turn them into a symbol. This means that any change can be made across all the designs, by simply creating it on the symbols page.

Even better, we can make buttons, contact forms and quote symbols and unlink to change the copy or size. Put simply, it’s a much more efficient way of working.

Limited image effects

This might sound like it wouldn’t be something we’d be after but by having a limited range of image effects actually focus our designs.

Airbrushing and such aren’t possible, but simple adjustments can be made to the crop, hue, saturation, brightness, contrast or blur.

You can also add colour overlays to images with a fill and opacity. The magic wand tool isn’t bad either!

Easy alignment options

By selecting a single element within Sketch, you will be allowed to align your creations according to the canvas. Selecting one or more will allow you to align multiple layers together. It really is that simple but it really makes a difference when you’re having to adjust your designs and they can be kept within this alignment for consistency.

authenticstyle-Why we’ve championed Sketch over Photoshop for our designs 3

All artboards in one file

We like to create mobile and desktop designs side by side and Sketch allows us to do this by enabling us to keep all artboards within one file. It means that entire site designs can be reviewed easily and therefore helps the overall design process.

Autosaving

This feature means that you’ll never lose any work. You can also undo a good number of steps, unlike Photoshop (where you have to make a point of changing that setting).

Sketch syncs with Avocode

We are all about the collaborative approach so this feature is a necessity for us. You know that old saying “two heads are better than one”? Well the fact that Sketch syncs with Avocode means that the team can easily feedback on early concepts, annotating on top of the designs themselves.

authenticstyle-Why we’ve championed Sketch over Photoshop for our designs 5

Easier for Developers

Sketch isn’t just for the designers amongst us but its benefits extend to developers too. It utilises CSS attributes and SVG code which can be exported in just a matter of clicks, making not just designers’ lives easier, but also that of the developers.

The application is also significantly lighter, at only 50MB compared to Illustrator’s 1.4GB or Photoshop’s 2.2GB. So, there’s no need to clear space on your hard-drive with Sketch, nor will their update downloads take quite as long which means that you can get back to designing faster.

authenticstyle-Why we’ve championed Sketch over Photoshop for our designs 4

Canvas rulers

Canvas rulers can be tricky and never in view or hidden when you want them to be… With Sketch, however, viewing and hiding canvas rulers is a snip with the shortcode ‘shift R’. It’s the simple things in life that really make us happy!

Easily stored document colours

Document colours are easily stored and accessible for quick reference. Instead of having to refer back to multiple Photoshop files to work out what colours were used for buttons, text, etc. and to get the exact RGB/HEX codes, Sketch lets you store these in the sidebar. This is really useful if we come back to a design we worked on a while ago.

authenticstyle-Why we’ve championed Sketch over Photoshop for our designs 6

Sampling colours

Sketch allows you to sample colours off canvas. This means that colours can be sampled from anywhere, which is a very nice feature. Especially if you’re moving a design from Photoshop to Sketch.

You can also use hex codes, which is our preferred method. This method so ensures greater accuracy of colour and removes the guesswork.

Duplicating canvases

Duplicating canvases are a breeze with Sketch. Simply click on the canvas you wish to copy, tap the copy and paste shortcut on your keyboard and hey presto, you have a duplicate!

Resizing canvasses

Along with duplicating canvases, resizing canvasses is also super easy. All you need to do is simply click on the name of the canvas and you can change the size of it – as if it were a simple rectangle.

authenticstyle-Why we’ve championed Sketch over Photoshop for our designs 7

Text styles

If a typeface or size/weight needed to be changed across designs, this used to mean hours of adjusting. Sketch has a solution for this common designer headache in their text styles’ feature.

With Sketch, you have text styles. Simply put, you can assign styles to text.

We, for example, always set H1s, H2s, H3s and paragraph styles. If anything needs to be changed across these groups you can change it for one instance and click the update icon to change it on every other instant. How marvellous!

 

In Summary:

These are just a few of the reasons we made the switch and championed Sketch over Photoshop within our agency.

It’s beautiful, clean and intuitive. Made for both web designers and developers, there are no unnecessary features.

If you were considering a change from Photoshop to Sketch, we’d really recommend it. Why not try one of their free trials and see what you think for yourself?

Subscribe to our newsletter

Get access to all our guides and resources

We will never treat your email address badly. We’ll love and cherish it and treat it right.

Would you like to be notified each time we post new digital media?