Design

From Photoshop to Sketch

About one year ago I stopped using Photoshop and switched to Sketch, why? My biggest issue with Photoshop is that it’s not a focused tool; Adobe seem to be constantly adding features that aren’t related to web and mobile design. Most recently, Photoshop added 3D Printing. This makes the application slower and more complicated. Enter Sketch. Sketch is a lightweight, focused tool that is perfect for designers.

Sketch has dramatically impacted my workflow, the biggest change being that I now wireframe, mockup and final design all in one app. Meaning that I can build upon and evolve a single design file, instead of starting afresh as I switch between applications.

In this article I’m going to talk about five key features of Sketch. I hope you enjoy!

1. Artboards and Pages

Sketch has an infinite canvas, but within this canvas you can create a series of fixed frames called ‘artboards’. I use artboards to replicate screen sizes, so if I’m designing for iOS, I’ll set the size of each artboard to the screen size of an iPhone 5 (640 x 1136px). Pages are multiple infinite canvases inside one document.

When designing a mobile app, I use pages to define the different sections of the application. For example; one page for ‘settings’ and another page for ‘edit profile’. Then within each page, I lay out the design using artboards, so I can clearly see how each screen flows from one to another.

2. Sketch Mirror

Designing for mobile? Sketch Mirror for iOS allows you to instantly preview your artboards on an iPhone, iPod Touch or iPad. It updates auto-magically and you can even preview iPhone and iPad artboards at the same time!

Working with Android? You can use a plugin called Sketch Preview with Skala Preview.

3. Symbols

Symbols are reusable objects, but what makes this feature powerful is that when you update a symbol, it’s updated everywhere throughout your document! Too good to be true, right? For example, if I’m designing a website I’ll be reusing the navigation across multiple screens.

Previously, if I updated the navigation I’d have to update every screen. Not with symbols, as it updates all the navigation elements for you. Saving you precious time.

4. Exporting

If you’re a photoshop user you’re going to love this section. You’ll be relieved to know that exporting in Sketch is easy. You can either export whole artboards or individual layers. Adding a slice is as simple as selecting a layer and clicking ‘make exportable’.

If you design for iOS and Android, you’ll know that you need to export your assets for a range of resolutions. Sketch has your back. You can export layers as @2x, @0.5x and @3x with a single click! As Sketch is a vector tool, there are no scaling issues.

You can even drag layers to the desktop to export!

5. Plugins

Sketch has a great community behind it, and as a result, there are some great third party plugins available to supercharge your Sketch experience. There are many different plugins, and there isn’t time to talk about them all, but one that is definitely worth mentioning is Sketch Measure. Sketch Measure allows you to quickly add specifications to your design work; developers are going to love you! 🙂

If you have any questions about Sketch, just tweet me or send me an email. Thanks for reading!

  • Every Interaction

    Thanks for sharing Richard, read a lot about it over the years, but think this has just pushed me over the edge. Going to trial a transition this month.

    • Great to hear! 🙂 Let me know if you have any questions.

  • Ryan

    hmmm… I can do 2,3, and 4 in Photoshop. 1 could be replaced with comps in cc for photoshop to an extent. I do wish there was better canvas control in PS though. 5 is also well supported in PS community.

  • Colby

    I agree with Ryan. So many of these things can be done in PS, but Sketch is built for it rather than so much third party support. I’m currently transitioning but I like how sketch is so much more snappy and not so heavy.

  • Tim McKinstry

    I find Photoshop to be a clunky beast for web design. Switched to Fireworks and it was a breath of fresh air. Now Sketch seems like the next logical move.

    Thanks, good read.

  • Rich Smith

    I made the switch a while ago too, it has some teething troubles at times but Sketch’s export function has literally saved me days worth of time, and therefor; profit and my sanity… i’ve turned down work since that has required me to produce PSD’s, that’s how much of an impact it’s made!

    • Great to hear you’re enjoying Sketch! The export function is definitely one of the best features.

  • Ok so I am new to sketch and on a deadline… I have like 20 artboards in my file. I am hoping I can export each dartboard with its assets at 1x and 3x (because I am designing at 2x to their own folders. Or are the dartboards simply like layer comps you can only export as screen shots?

Subscribe to our mailing list