Photoshop Users: How To Switch To Sketch

Many requested that I write a tutorial on how to get started with Sketch so here it is. Sketch is the best alternative to Photoshop and is completely focused on user interface design. I must admit that the resources for Sketch are underwhelming right now and I am on a mission to fix that. Note: while it’s good to learn through analyzing (or even re-using) works of others, do it only so that you can start your own. Re-imagine based on the problems you’re trying to solve. Learn the techniques so that you can apply your very own design thinking.

A Follow-up To My Previous Sketch Articles

• Sketch VS Photoshop
• Sketch VS Fireworks
• The Best Hidden Features In Sketch

Download the Free Trial

Head over to BohemianCoding and download the trial. There’s no reason to be put off by an application because of the price, especially when it’s about 10 times less than Photoshop. Use an application because it makes you design more efficiently and because you absolutely love using it. How would you know if you haven’t tried it?

Migration: My Icons

As a user interface designer, icons are about the only components for which you won’t be starting from scratch. First thing you should know about is the SVG format. It’s a pretty universal vector format that’s frequently used for icons and increasingly in CSS instead of embedding images for resolution independent results.

Thankfully, Sketch will allow you to import SVG icons and edit the vector points. Those icons will even be layered when imported so that you can apply Union, Subtract, Intersect and Difference on them to achieve the result you had in mind.

Icon Sets To Start With

There are free sets and there are paid ones. The paid ones are fairly affordable and it’s a great way to support fellow designers. Here’s a list of SVG-friendly icon sets that I personally use:

• Pixicon by Jackie Trananh ($5)
• Symbolicons ($35)
• Glyphicons ($59)
• Entypo (Free)
• Batch by Adam Whitcroft (Free)

PSD Icon Sets:

• Brankic1979 (Free)
• IconSweets2 ($8)
• Broccoli by Visual Idiot (Free)

How To Export Photoshop Shapes To Sketch

If you happen to have a set of icons that are exclusively made for Photoshop, the process is a bit more complicated to suck the SVG out of them. This process requires Photoshop and Illustrator:

1) In Photoshop, select all the Photoshop shape layers and Merge Shapes.

2) Go to File > Export > Paths to Illustrator and save the file as .ai (Illustrator)

3) In Illustrator, select all the shapes and apply a black color.

4) Go to File > Save As… and select format SVG

5) Import the SVG file to Sketch and edit them.

Migration: My Patterns

Unless you’re a pure flat designer, you should be pretty open about using textures in some of your designs. Your client might request it. Sketch does have a preset noise setting, but in case you want more, you should save your Photoshop patterns as individual pattern images and import them to your Sketch’s pattern library. Sadly, there is no migration tool. But if you need something to start with, try Subtle Patterns

What About My PSD Files?

Here’s your chance to start fresh. As a designer, you should avoid looking back at your old work anyway. Since Sketch is 100% vector, there is no way to import your PSD with all the styles intact. From my personal experience with Fireworks, that process wasn’t perfect neither: many styles were wrong. Even the typography looked bad.

The good news is that reproducing your Photoshop designs in Sketch is a breeze. It’s very simple to draw shapes, eyedrop the colors and apply the same shadow settings as on Photoshop. The icons and patterns part was the hardest and most crucial step since they’re part of your core library. As a designer, you should always focus on your foundation (design principles, bare design components, pixel perfection, etc.) and stop relying on trivialities such as styles, filters, actions and other application-dependent customizations. The tool doesn’t make who you are.

Sketch UI Kits To Start With

Sketch may be new but there are very good designers who already started sharing Sketch files. To be frank, it’s even easier to customize a Sketch file than a PSD. Enjoy:

• Sketch iOS Kit by Marcelo Marfil
• Safari and iOS6 Template by Benjamin De Cock
• Navigation Bars
• iOS Message UI by Ben Breckler

I’ll Even Share My Own

I don’t usually share my design files but since it should help new users to get started in Sketch, I will break my own rule.

• Pinterest Concept
• iPhone (Phone image by Paul Flavius Nechita)
• Dribbble Concept

Tutorial Videos And Tips

Marcelo Marfil made a few videos on how to create a custom UI in Sketch.

Final Thought

Unless you’ve spent more than 3 months full-time on Sketch like me, you will still rely on Photoshop for references, editing old PSDs and for other needs such as photo editing, drawing and other heavy graphic design duties. However, it’s good to know that there is an alternative to Photoshop that is entirely focused on user interface design. A tool that combines all the essentials of Photoshop, Illustrator and Omnigraffle. A tool that will give some competition to Adobe.

If you have useful Sketch files such as UI kits, Phone templates and icon sets you’d like to share, feel free to give me a shout at @mengto on Twitter!