Tutorials

25 Tutorials for learning Sketch

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.
330x280 llustration generic 25 Tutorials for learning Sketch

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. drop vector icon 25 Tutorials for learning Sketch

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. robot illustration 25 Tutorials for learning Sketch

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!moon app 25 Tutorials for learning Sketch

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:medicine 25 Tutorials for learning Sketch

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.

google docs icon 25 Tutorials for learning Sketch

6. Sketch 3 basics and app-icon design

How to create a cool todo list icon.todo list icon 25 Tutorials for learning Sketch

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.storm trooper icon 25 Tutorials for learning Sketch

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.bomb icon 25 Tutorials for learning Sketch

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.mail icon 25 Tutorials for learning Sketch

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.ios 25 Tutorials for learning Sketch

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:colorful switch 25 Tutorials for learning Sketch

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.bolean thumb 25 Tutorials for learning Sketch

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.tatto icon 25 Tutorials for learning Sketch

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.ui 25 Tutorials for learning 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.art boards 25 Tutorials for learning Sketch

16. Harnessing Vector Awesomeness in Sketch

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

subraction shapes thumb 25 Tutorials for learning Sketch

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.

group layers 25 Tutorials for learning Sketch

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.getting started with sketch 25 Tutorials for learning 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.google sheets icon 25 Tutorials for learning Sketch

20. 7 Min Workout App Iconworkout icon 25 Tutorials for learning Sketch

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.

comment icon 25 Tutorials for learning Sketch

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.joypad icon 25 Tutorials for learning Sketch

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!pattern libary 25 Tutorials for learning Sketch

24. iOS Navigation Bar

Explain working with gradients, shadows and more.APP 25 Tutorials for learning Sketch

25. iOS Navigation Bar

Explain working with gradients, shadows and more.SVG Sprites 25 Tutorials for learning Sketch

IStock - Stock vector resources and photography images

You may also like

Please Leave a comment