25 Tutorials for learning Sketch

January 4th, 2016
Tutorials

I’ve heard about Sketch now for some time, but really wasn’t convinced that it would be a tool worth learning. After finally spending some time using sketch, I have to say its one of best tools for digital web design and interface design. Since adobe killed fireworks a few year ago it certainly does a great of filling the void. The beauty of sketch and what makes it such a good application is it’s so easy to use and incredibly fast, and doesn’t carry a lot the heavy baggage, which comes along with a tool such as Photoshop. It’s a tool which I plan to use in almost any web project going forward. It’s a vector based program an awesome addition to my web design workflow.

In this post I wanted to share a collection of tutorials, for learning Sketch. This roundup features 25 of the best tutorials for leaning Sketch, which will give you a great broad understanding upon how the different tools work and what’s actually achievable using sketch.

If you have a created any sites, tutorials or resources using sketch would love for you to share those in the comments section below.

Premium design assets for
your next project

Acess to a huge libary of design resources from Photoshop brushes to vector resources.

Join today

1. Create an Eye-Catching Water Droplet Icon With Sketch 3

Sketch is a very versatile tool which you can use on a daily basis for your work as a web and application designer. In this tutorial I will introduce you to the artboard, layer, drop-shadow, inner-shadow, text, border and fill functionalities within Sketch, and show you how to use it to create a simple, eye-catching icon.

2. How to use only rectangle,circle and line to draw illustration in Sketch

I drew 18 famous robots for Chato.ps (one of our company product) before,and lots of people ask me how to do it in sketch,is that difficult?actually not,it’s super simple and quick.so I made this tutorial to show the making of.

3. How to Create an Icon Design Workflow in Sketch App 3

Designing an app icon is no easy task. Both Apple and Android employ a Human Interface Guideline that outlines the recommendations and requirements for creating an app icon to accompany your application. It’s mandatory to submit app icons in a range of sizes, for various use-cases, that are compatible with both retina and non-retina screens. And then there’s the optional icons (settings, toolbar, navigation bar, tab bar, et cetera). Yikes!

4. Sketch Tutorial: Create a simple illustration of prescription bottle in Sketch

Recently I used Sketch instead of Illustrator to create a simple illustration. You can check it out below:

5. Create Google Docs Icon

In this Sketch Tutorial, we’ll learn how to design Google Docs’ Icon from scratch. We’ll play around with vector points and learn a few bad ass shortcut keys.

6. Sketch 3 basics and app-icon design

How to create a cool todo list icon.

7. Exploring Shapes to Create Star Wars Characters: A Guide for Non-Designers

When it comes to the epic that is Star Wars, there are very few ways to stay excited and be productive. Unable to concentrate on work, the only way I could channel my almost-paralysing excitement toward something productive was by whipping up a quick illustration of the new stormtrooper.

8. How to Create a Cartoon Bomb Icon with Sketch App

This tutorial will teach you the essential techniques required for creating custom icons with Sketch. And in the process you will create a cool, cartoon-style bomb icon.

9. How to create a flat styled icon in Sketch 3

Sketch 3 is getting very popular. More popular than you’d really imagine. You can check out some articles like this and this which talks about the new features it has just released.

10. Designing an iOS Fitness Application with Apple Watch Compatibility

In this tutorial, I’ll teach you how to design a simple and easy-to-use iOS fitness application for tracking outdoor running and cycling. Besides the iOS application, I’ll give you a design example for the Apple Watch interface as well.

11. Colorful switch

I want to keep this as simple but thorough as possible. This tutorial is designed for beginners so we’re going to take the time to describe a lot of things you may already know. Here’s the expected result:

12. Sketch 3 Tutorial | Boolean Operations

They might have a crazy name but they are a simple and critical set of tools for combining shapes in Sketch. In this tutorial I walk you through the different types of Boolean Operations as well as the different ways of interacting with and changing them.

13. Arr Matey! Create a Nautical Themed Tattoo Alphabet in Sketch

With this tutorial I would like to show you how to create a nautical themed tattoo inspired font set using Sketch. We will make use of simple shapes and the Vector tool along with Borders and Style Presets to quickly create the alphabet.

14. Designing a VSCO-Inspired Web Journal in Sketch

In this tutorial, I’ll teach you how to design a simple and sophisticated web journal application in Sketch, for both mobile and desktop. We’ll use the VSCO aesthetic as inspiration and, at the end of this tutorial, you’ll have become aware of many of the most important features of Sketch.

15. App user flows with Sketch

Artboards in Sketch are great for designing different screens and states of an app, but documenting how users navigate from one to another view isn’t obvious.

16. Harnessing Vector Awesomeness in Sketch

Vector shapes are Sketch’s flagship feature. Learn how to master them.

17. Group layers

If you work with layers, you’ll often want to apply options to several of them, for example change the color, resize them altogether – or simply just organize things. To be able to do that that you can make a layer group. Just select all the layers you want to group and press cmd + G. This way the layers also keep their aspect ratio if you resize them.

18. Get started with Sketch in 5 minutes.

Since writing about all the neat little tricks I’ve learned while using Sketch, I’ve had conversations with other designers who are unsure of where to start. Here’s what I do to set myself up for a new project in Sketch.

19. Create Google Sheets Icon

going to learn how to re-create Google Sheets’ Icon using Sketch 3. We’ll continue from last week and learn a few new features and explore new concepts.

20. 7 Min Workout App Icon

A short video tutorial to learn a create a 7 MWC “like-icon” with Sketch 3 … For educational purposes.

21. Comment Icon with Vectorize Stroke

A short video tutorial to learn a create a 7 MWC “like-icon” with Sketch 3 … For educational purposes.

22. Quickly Bring Flat Icons to Life

Flat icon design is simple and elegant. Sometimes it’s monochrome, but sometimes it needs to be a bit more than that. In this tutorial we take a look at how a monochrome icon can be turned into much much more very quickly.

23. How to build a pattern library in Sketch

Have you ever struggled with consistency in web design? This happens all too often, especially when working at scale. Luckily for us, pattern libraries are here to help!