Switching To Sketch - A Guide To Getting Started

In this guide aimed at Photoshop users contemplating a switch to Bohemian Coding's Sketch, I will go into some of the key features that Sketch has to offer, their functionality and the advantages that a Sketch workflow has over Photoshop, and also share some tips & tricks that will help you on your way to UI designer's heaven!

So, You've Had Enough of Photoshop?

If you're reading this post, then the chances are that you are very much aware of the shortcomings that Photoshop suffers from when it comes to UI design. The simplest way to sum up the problem with Photoshop is that it wasn't designed for us. It is a digital imaging and photo editing software package, with some vector capabilities tacked on. For UI design it is bloated, inefficient and lacking in essential features.

In 2011 I wrote a similar article to this one, about getting to grips with Fireworks as an alternative to Photoshop. Since then a lot has changed, most notably Adobe has officially discontinued development of Fireworks. Although Fireworks is still available, nobody is holding their breath for it any more. But! There is some good news too. And it comes in the form of Sketch. Sketch is a (relatively) new, professional tool created for UI designers. And compared to any of the Adobe software packages it is being developed and improving at an incredible rate!

Getting Familiar with Sketch

The First Steps

The first thing you will notice when you launch Sketch, is just how clean and simple the interface is. Don't let this simplicity deceive you. Everything you will need is right there in front of you. The difference is that unlike Photoshop you are only seeing the tools that you need for your job. It shouldn't take long to familiarize yourself with the layout; Along the top of the window you have the toolbar, on the left are the pages/layers and on the right is the inspector (this is where you apply styles etc.)

You might be wondering about the canvas at this stage. When you create a new document you are presented with an infinite canvas, there are no edges (so please don't go looking for them!). When you decide that you do need some boundaries to your work, this is achieved by creating Artboards (I'll go into Artboards in more detail later). For now just know that the canvas is infinite and let's draw something!

From the toolbar select click the first icon on the left, which is the shape selection tool. From the list, select a rounded rectangle and draw your shape onto the canvas. As would be expected you have now created a new layer which can be seen on the left of the app window. Over on the right in the inspector you can now have some fun and experiment with styles. Most of the styles you can apply will be similar to Photoshop's Layer Styles, such as Fills, Borders and Shadows. However in Sketch these styles are more flexible in how they are applied. You can for example have the equivalent of 4 Gradient Overlays, and as many Inner/Drop Shadows or Strokes as your heart desires, all on the same layer. That's how simple it is to get started in Sketch. Next we will go into some of the Key Features in more detail.

Key Features

Pages, Layers & Artboards

When working on a larger web project in Photoshop, it is common to have multiple .psd files for different pages, and various states within the project. Sketch however has the ability to add multiple pages. Each new page that you create in Sketch is like setting up a new document within your current document. The beauty of this is that it consolidates a whole project to a single document. Each page within Sketch has its own set of layers, you can duplicate an existing page to move all of its layers over to a new page. This is really handy when you are mocking up similar pages of the same website.

Artboards work a little differently and are primarily for setting boundaries around your designs. They assist in exporting your artwork, and are particularly useful for creating and exporting icons or assets. They can also be handy if you know the exact size of the design you will be working on, for example if you are designing an iPhone screen you can create a 640 x 1136 pixel artboard.

Editable Properties

If you draw a shape, and later decide that you need to change the corner radius, add an extra point to a star or add a couple more sides to a polygon. You no longer need to delete the original shape and draw it again (WHAT!?).

Yes, in Sketch (unless you flatten an object) shapes always remain editable! Just select the object and head over to the inspector to adjust the appropriate values, your shape will update in real time.

Boolean/Combine Operations

Designers often use simple shapes as building blocks to create more complex interface elements, Boolean or Combine Operations are essential for this. Referred to as 'Path Operations' Photoshop, they are Union(ALT+CMD+U), Subtract(ALT+CMD+S), Intersect(ALT+CMD+I) and Difference(ALT+CMD+D). Boolean operations can be accessed from the Edit > Combine menu or by adding shortcuts to the toolbar.

In Sketch, boolean operations are completely non-destructive. You can adjust or re-order them at any point. To view the contents of a combined shape just click the litle black arrow to the left of the shape's name in the layers panel.

CSS Styles

An essential feature for any web designer is the ability to export CSS attributes. Illustrator and Fireworks very recently adapted this feature but for some reason Photoshop is still lacking. Although there are third party extensions available for Photoshop that emulate this functionality, it is something really should be a native feature.

Sketch has implemented CSS styles just right. Simply right click any object on the canvas or in the layers panel and select 'Copy CSS Attributes'. You now have the styles copied to your clipboard, simple and efficient! The exported code isn't always perfect, but it is very usable, and even adds comments using your layer names which is a bonus.

Autosave & Versioning

Because Sketch is a native OS X application, it benefits from the latest Mac technology. Autosave, and versions are two of those features, and they will free you to focus more on your design, and less on remembering to repeatedly press CMD+S. Versions also takes care of versioning without you needing to think about it. Click on the file name at the top of the app window and select 'Browse All Versions'.

You also have full iCloud integration for your Sketch documents which I'm sure will come in handy for some users.

Styles

One of my personal favourite features from Fireworks was its ability to work with Styles. The same is now true of Sketch. Linked Styles are specific to each individual document, when you create a new style and apply it to one or more objects, they become linked and whatever changes you make to the styling are reflected on all elements synced with the same linked style.

You also have Text Styles which work in a very similar way, except you guessed it, with text layers. Text Styles save information such as font size, spacing, colour etc. and can be accessed via the inspector when editing any text layer.

Grids Done Right

The implementation of grids in Sketch is fantastic. To use the grids, click on the rules and grids icon in the toolbar and select grid settings. From here you can set the number of columns, the width and gutter size of your grid. By default it has settings for the standard 960 grid system. In addition to grids you also have Guides. Create a new guide by double clicking on the ruler where you want your guide to appear.

Time-saving Tips & Tricks

Customize the Toolbar

Everybody's workflow is unique in some ways, and there are tonnes of tools to choose from and re-arrange to suit yours. Simply right click the toolbar and select 'Customize Toolbar..'. There are quite a few useful tools in there that are hidden by default.

Editing Bitmaps

Although Sketch is vector application, there may come a time when you need to make basic edits to bitmap images without needing to resort back to Photoshop. To edit a bitmap image, first double click on the image and you will then be able to draw a marquee selection. Hitting the Delete key will erase the selected section of the image, and using the CMD+C and CMD+V shortcuts will allow you to copy and paste sections of the image.

iOS 7 Style Background Blur

For iOS developers this tip could come in very handy. If you want to emulate the iOS7 semi-transparent blurred background effect, first draw a white rectangle above the artwork that you want to be blurred in the background. Set the Opacity of the white shape to about 90% and select the 'Background Blur' feature which can be found by clicking the arrows next to Gaussian Blur.

Sharing with non-Sketch users

Sharing files is an essential part of the design industry. Although some people may be confused with anything other than a .psd or .ai file, especially a .sketch file. Sketch can export to PDF, SVG and EPS. All of which are flexible, open formats that can be read by many different applications (including Adobe Illustrator).

Free Sketch Resource

I created a Flat UI Kit especially for Sketch. Go ahead and download it and play around with it within the program. Let me know what you think!

Flat UI Kit for Sketch

The set included standard elements like navigation bar, tooltips, buttons slides etc. The kit is super easy to customize due to Sketch “Link” feature, that allows you to change “linked” elements style with one action only.

View Free Resource >

Next Steps

I hope this guide has been helpful and will help you on your way to getting to grips with Sketch as an alternative to Photoshop. Of course this guide has only covered a handful of the many features that Sketch has to offer. If you're still unsure then download the free trial and play with it for 15 days!