In this free course, you’ll get a full rundown on everything you need to learn about Sketch to get started building websites, apps, icons, and more.
By the time you complete the course, which lasts roughly two and a half hours, you’ll understand what Sketch is, how it works, and how to use its various tools to build custom projects from the ground up.
Who is This FREE Course For?
- Mac users
- Beginner UI, UX, Icon, and web designers
- Vector fans
Watch Full Course: Sketch for Beginners
This course will instruct you on everything you need to know as you learn Sketch. It’s a great option for creating designs for Mac users and is pretty versatile in its feature set and output capability. The course begins by assuming you are a beginner and covers the everything from the UI of Sketch and layers all the way through Boolean operations and Smart Layout.
You’ll be able to follow along with the course by using source files created specifically for this course.
2. What is Sketch?
Sketch is a vector graphics editor, but it’s so much more than that. As you learn Sketch you’ll come to realise it’s actually a digital design platform that can be used for creating designs, prototypes, and developer handoff.
Since its inception in 2010, the software has been adopted by many who were seeking an alternative to Photoshop for creating UI designs.
3. Interface Tour
Before getting started, you need to get familiar with the lay of the land, so to speak, within the Sketch app. Let’s take a look at the features and tools at your disposal within Sketch. You can follow along by downloading the demo file mentioned previously called Financial App Dashboard Concept.
4. Working with the Different Types of Layers
Layers are the building blocks of any design project in Sketch. And Sketch includes several different types. Follow along as we delve into the varieties of layers including:
5. Grouping, Locking, and Hiding Layers
As you learn Sketch, and you begin to work on projects, it’s only natural that in time you’ll amass quite a few layers. Thankfully, there are a few wants to manage your laters after you’ve created them. Dive into the specifics of how to group layers for easier management of your designs.
Likewise, learn how to lock layers so they can’t be edited and hide layers to experiment with your design’s possibilities.
6. Moving, Resizing, and Aligning Elements
This lesson is extremely important. After all, you’ll be moving, resizing, and aligning elements an awful lot in Sketch, so it’s vital you get the steps for doing so efficiently down in order to better manage your design projects.
7. Using Guides, Grids, and Layout
Sketch has three features called called Guides, Grids, and Layout and they are used for resizing and aligning content. Let’s learn about each and its role to play in Sketch development.
8. Working with Text
Watch video lesson [1:06:24] ↗
Text makes up the majority of the content you’ll use for your design project. That’s why having proper control over how your text looks is so important. Sketch offers robust text manipulation tools for resizing and adjusting text and text styles. Let’s learn how to use them.
9. Adding and Editing Shapes
Watch video lesson [1:17:52] ↗
There are many different types of shapes in Sketch. There are simple ones like rectangle and circles and more complex ones like polygons and stars. Follow along as we demonstrate how to add shapes and edit how they appear including fill color, styles, borders, and more.
10. Reusing Shapes and Styles
Watch video lesson [1:36:45] ↗
Similar to how changing a text style will affect every bit of text that’s adopted that style, so too will shapes be affected by altering their assigned layer styles. Creating layer styles can save you a lot of time when building complex UIs that will reuse elements repeatedly throughout.
11. Working with Images
Watch video lesson [1:48:23] ↗
You can add images to Sketch in a few different ways. From the standard drag-and-drop to using images as shape backgrounds, this lesson explores the finer nuances of using images in your designs.
12. Using the Vector Tool
Watch video lesson [1:56:30] ↗
You can create hand drawn shapes in Sketch using the vector tool. Rather than drawing lines to create shapes you’ll be making points which will be connected automatically. Let’s take a look.
13. Working with Boolean Operations
Watch video lesson [2:05:14] ↗
Boolean operations are great for creating complex shapes. But in Sketch, they’re fantastic for creating icons. This lesson explores what Boolean operations are and all the powerful things you can do with them.
14. Reusing Elements Through Symbols
Watch video lesson [2:15:04] ↗
In Sketch, using Symbols is all about reusing content. And by doing that you’re actually speeding up your workflow. The nice thing about Symbols is that whenever you make a change to the Master Symbol, all the other instances will receive those changes automatically.
15. Sketch Smart Layout
Watch video lesson [2:25:15] ↗
Smart Layout is Sketch is all about resizing a symbol automatically when the content inside of it changes and it accomplishes this by maintaining the same space between items. This lesson showcases how to use Smart Layout effectively with plenty of examples of how it works in real-time.
16. Exporting from Sketch
Watch video lesson [2:30:36] ↗
Once you’re done creating your design in Sketch (and before handing it off to a developer) you’ll need to export some assets, i.e. icons, images, etc. There are multiple ways to do this in Sketch, and we’ll show you the process in detail in this final lesson of the course.
More FREE Courses on Tuts+
Starting out? Learn everything you need to know about web design and development, right here on Tuts+.
Web Design for Beginners | FREE COURSE
If you’re new to web design, this course on web design for beginners will teach you everything you need to know.
HTML & CSS for Beginners | FREE MEGA COURSE
In this free course, you’ll learn how to code with modern HTML and CSS, the main building blocks of any website. If you want to become a successful web developer, this is where you need to start!
Sketch Tutorials on Tuts+
Looking to learn Sketch? Check out our Sketch tutorials on Tuts+.
- A to Z of Sketch: Tips & Tricks!Andrei Marius03 Aug 2021
- How to Design a Car App Design UI in SketchAndrei Marius17 Feb 2020
- How to Design a Food Ordering iPad App UI in SketchAndrei Marius12 Feb 2020
- How to Design a Finance App Signup Process in SketchStelian Subotin28 Jan 2020
- How to Design a Fitness App UI in SketchAndrei Marius20 Jan 2020
- How to Design a Travel App Login Screen in SketchAndrei Marius16 Dec 2019
- Efficiency Tips for Working With Sketch Artboards and LayersAdi Purdila26 Feb 2018
- 18+ Sketch UI Kits and Sketch App Resources for DesignersBrenda Barron22 Jun 2022