The Sketch versus Photoshop debate is still on, but many designers have already switched sides, including designers who used to think of Photoshop as their hammer and had the best plugins and scripts for their needs. But there were some things that Photoshop just wasn't equipped to do. Only after you use Sketch do these flaws in Photoshop become glaring.
Not that Sketch is perfect (you may miss Photoshop's Smart Objects), but it renders close to web quality, creates tiny documents as opposed to Photoshop's giant ones, offers built-in grids, lets you work on multiple art boards, is fast and lightweight, and allows you to tweak non-destructively. You can see that Sketch was created specifically for web and UI designers, to allow you to edit vector objects.
Here are some tips and tricks for Sketch that could make your workflow more efficient.
1. The 'Pages' feature
Not everyone knows how to use the 'Pages' feature in Sketch. It's especially useful to keep things organized when you're working on a large project that grows in scope as you work.
You can start a project on a single 'Page,' and as your project grows, you can split the artboard into multiple pages. Not only does this feature prevent your page from getting crowded with multiple artboards, but it also keeps your file from becoming too large!
The Sketch feature is a fantastic improvement over Photoshop, where it was tedious to create a separate document for every page of your UI.
The infinite canvas that you begin with could become one of your favorite features in Sketch, reminding you of the hours you spent doodling on Mischief. You can create as many artboards as you want on the canvas, with different screens of your app or different pages of your website, for instance. This way, you'll always have an eye on the broader picture.
But sometimes, you may need to separate artboards even further. For example, you may want one artboard with all the different states of the website homepage you're working on.
You may want another artboard that contains all the various articles that will go into your blog.
You'll find the Pages feature at the top left corner of the Layers list on Sketch. The shortcut to make this list visible if it's not, is Alt + Cmd + 1. Use the little Plus icon to add pages to your canvas. Use Tab to switch to the next page, rename the pages as you would do layers, drag to reorder them, duplicate pages and more.
2. Collapsing layers in the layers list
Many designers on Photoshop navigate files by layer with the Option shortcut, and by clicking the arrow next to the layer group to collapse all layers. This nifty little shortcut lets you look at all your layers and the artboard.
It is one shortcut you may find myself reaching for on Sketch, only to recall that the application doesn't allow it. When you're working on a file with all the vectors, masks and other layers open, it can make you crazy. Here’s a trick to keep things sane and organized:
Simply go to View, point at Layers List and hit Collapse Artboards and Groups. Voila! You no longer have to manually collapse the dozens of groups and layers on your list!
3. Working the zoom tool
The Zoom tool on Sketch is not as easy as hitting Z and dragging the marquee around to zoom. For a Photoshop convert, it can be a difficult few weeks during which you absent-mindedly hit Z and move around the layers, before having to hit Ctrl + Z to undo everything.
To use zoom in Sketch needs a little getting used to for ex-Photoshop users. You have to keep Z pressed down while you move the marquee around to zoom in on a selection. Give it a few days, and you shouldn't have any trouble getting used to the Sketch way of doing things.
4. Creating an artboard around a selection
Usually, you'd create an artboard and then draw in it. But sometimes, you're hit by an idea that you quickly create, and later want to place in an artboard.
You can easily create an artboard from a selection in Sketch. Start by selecting the elements of your design. Hit A, which is a shortcut for Artboard. It will open up preset sizes in a panel to the right of your workspace window. At the top of the window, you should see the option 'Around Selection.' Click on it, and the application will create an artboard that fits your design.
5. Moving shapes while you draw
Illustrator users will already know about this neat little trick, which can speed up your workflow. The usual way of moving shapes is to draw them first with the shape tool. Then, you can select the object and move it around to reposition.
But Sketch lets you move a shape you're drawing while you draw it! All you need to do to save yourself a few extra clicks of your mouse is to press the spacebar while you draw, reposition the shape, and release the spacebar to keep drawing.
You’ll find this feature will save you quite a lot of time when you’re working on elements that you’re not sure where to put. You can move things around as you draw to get a clearer picture of what the whole is going to look like.
6. Duplicating the previous transform
If you find yourself often applying the same transformation over and over again, you'll welcome this little time-saving trick. When working on a pattern with repeated design elements, for example, you don't have to manually copy and paste the element you're repeating several times. A quick shortcut to repeat the last transformation will save you tedium.
First, select the object and carry out the transformation you want. For example, you could draw a circle shape, select it and scale it to the size you want. Then, select the object again and hit Command + D. This shortcut will duplicate the drawing and paste the copy next to the first. You can repeat these transformations ad infinitum on your infinite canvas!
7. Changing default styling
This nifty little trick works well for tasks in which you find yourself using a certain style of shape that is different from the default. For example, on a project where you often use the default gray circle, but have to change colors and remove the gray border manually every time you draw, you need a shortcut.
There is a simple workaround to save your preferred style as default on Sketch. All you need to do to change the default styling is to give the circle the style you want. Then go to Edit and hit Set as Default. Your style preferences will get saved, and you won't have to go through the tedious process of manual styling every time you draw the shape.
After you begin to use these Sketch shortcuts and tips, you’ll find your office a happier place. You can save yourself so many moments of frustration that you’ll fast forget Sketch doesn't have support for as many shortcuts as Photoshop. All you need to do is make some time to add a few custom shortcuts to Sketch, and speed up your workflow even more (check out the link for some more quick Sketch tips from a fellow designer).
What are your favorite Sketch tips and tricks? Are you a full Sketch convert as well? Share your opinions below!