Skip to content
envato-tuts+
envato-tuts+
  • Design
    Design View all Design
    Start Learning
    • Software
      Software
      • Adobe Photoshop
      • Adobe Illustrator
      • Affinity Designer
      • Affinity Photo
      • Affinity Publisher
      • Adobe InDesign
      • Procreate
      • PaintTool SAI
      • Pixelmator
      • CorelDRAW
      • Inkscape
      • Sketch
      • Design Space
    • Drawing/Illustration
      Drawing/Illustration View all Drawing/Illustration
      Learn Illustration
      • Vectors
      • Digital Painting
      • Character Design
      • Pixel Art
      Learn Drawing
      • Animals
      • Drawing Theory
      • Human Anatomy
      • Cartoons & Comics
      popular software in Drawing/Illustration
      • Adobe Illustrator
      • Procreate
    • Graphic Design
      Graphic Design View all Graphic Design
      • Techniques & Workflow
      • Photo Manipulation
      • Infographics
      • 3D Design
      • Print Design
      • Apparel Design
      • Logo Design
      • Icon Design
      • Packaging Design
      • Book Design
      • Branding
      popular software in Graphic Design
      • Adobe Photoshop
      • Adobe Illustrator
      • Adobe InDesign
      • Affinity Designer
    • Typography
      Typography View all Typography
      • Fonts
      • Hand Lettering
      • Web Typography
    • Add-Ons
      Add-Ons View all Add-Ons
      • Photoshop Actions
      • Photoshop Brushes
      • Illustrator Brushes
      • Layer Styles
      • Procreate Add-Ons
      • Overlays & Textures
      • Photo Effects
      • Patterns
      • Text Effects
    • Graphic Templates
      Graphic Templates View all Graphic Templates
      • Album Cover
      • Book
      • Brochure
      • Card & Invite
      • Business Card
      • Flyer
      • Magazine
      • Menu
      • Newsletter
      • Packaging
      • Poster
      • Resume & CV
      • Social Media
      • Stationery
    • Theory
      Theory View all Theory
      • Art History
      • Global Influences
      • Design Trends
      • Color Theory
    • Mockups
      Mockups View all Mockups
      • Apparel
      • Banners & Ads
      • Book
      • Brochure
      • Flyer
      • Devices
      • Logo
      • Magazine
      • Mug
      • Packaging
      • Poster
    • Digital Crafting
      Digital Crafting View all Digital Crafting
      • Cricut
      • Digital Scrapbooking
    popular software in Design
    • Adobe Photoshop
    • Adobe Illustrator
    • Affinity Designer
  • Business
    Business View all Business
    Start Learning
    • Software
      Software
      • Microsoft PowerPoint
      • Keynote
      • Google Slides
      • Microsoft Word
      • Microsoft Excel
      • Microsoft Outlook
      • Google Docs
      • Google Sheets
      • Gmail
    • Presentations
      Presentations View all Presentations
      • Presentation Techniques
      • Pitch Decks
      • Public Speaking
      popular software in Presentations
      • Microsoft PowerPoint
      • Keynote
      • Google Slides
    • Templates
      Templates View all Templates
      • Proposal
      • Report
      • Invoice
      • Resume & CV
      • Business Card
      • Brochure
      • Flyer
    • Marketing
      Marketing View all Marketing
      • Sales
      • Email Newsletters
      • Creativity
      • eCommerce
      • Social Media
      • Infographic Templates
      • Writing
      • Branding
    • Finance
      Finance View all Finance
      • Funding
      • Financial Statements
      • Invoicing
      popular software in Finance
      • Microsoft Word
      • Microsoft Excel
      • Google Docs
      • Google Sheets
    • Management
      Management View all Management
      • Productivity
      • Strategy
      • Communication
      • Diversity & Ethics
    • Startups
      Startups View all Startups
      • Entrepreneurship
      • Business Plans
      • Microbusiness
    • Careers
      Careers View all Careers
      • Finding a Job
      • Freelancing
      • Time Management
      • Networking
      • Promotion
      • Education
    popular software in Business
    • Microsoft PowerPoint
    • Keynote
    • Google Slides
  • Photo
    Photo View all Photo
    Start Learning
    • Software
      Software
      • Lightroom
      • Adobe Camera Raw
      • Capture One
      • Gemstone
      • Affinity Photo
      • Adobe Photoshop
      • Pixelmator
      • Photo Mechanic
    • Equipment
      Equipment View all Equipment
      • Cameras & Lenses
      • Smartphones
      • Lighting
      • Tripods & Supports
      • Filters & Accessories
    • Photographing
      Photographing View all Photographing
      • Exposure
      • Composition
      • Light
    • Types of Photography
      Types of Photography View all Types of Photography
      • Social Media
      • Studio
      • Portrait
      • Event
      • Landscape & Nature
      • Still Life
      • Street
    • Editing & Post-Processing
      Editing & Post-Processing View all Editing & Post-Processing
      • Photo Editing
      • Workflow
      • Image Correction
      • Colour
      • Black & White
      • Portrait Retouching
      • Compositing
      • Printing
      • Portfolios
    • Theory
      Theory View all Theory
      • History of Photography
      • Running a Photography Business
    • Add Ons
      Add Ons View all Add Ons
      • Lightroom Presets
      • LUTs & Filters
      • Slideshow Templates
      • Photoshop Actions
    popular software in Photo
    • Lightroom
    • Adobe Camera Raw
    • Capture One
  • Video
    Video View all Video
    Start Learning
    • Software
      Software
      • Adobe After Effects
      • Adobe Premiere Pro
      • Davinci Resolve
      • Cinema 4D
      • Blender
      • Final Cut Pro
      • Apple Motion
      • OBS
      • Camtasia
      • Screenflow
      • Kapwing
      • Runway
      • Adobe Rush
    • Equipment
      Equipment View all Equipment
      • Cameras & Lenses
      • Tripods & Supports
      • Drones & Rigs
      • Filters & Accessories
      • Smartphones
      • Lighting
      • Audio Equipment
    • Production & Recording
      Production & Recording View all Production & Recording
      • Lighting
      • Audio
      • Composition
      • Screen Recording
      • Livestreaming
    • Post-Production
      Post-Production View all Post-Production
      • Video Editing
      • Color Grading
      • Motion Graphics
      • Audio
      • Workflow
    • Templates & Presets
      Templates & Presets View all Templates & Presets
      • Intros & Openers
      • Titles
      • Transitions
      • LUTs & Profiles
      • Text Effects
      • Particle Effects
      • Logo Animations
      • Slideshows
      • Presets
      • Scripts & Plug-ins
    • Types of Video
      Types of Video View all Types of Video
      • Instructional
      • Documentary
      • Stock Footage
      • Animation
      • YouTube
      • Social Videos
      • Music Videos
    popular software in Video
    • Adobe After Effects
    • Adobe Premiere Pro
    • Davinci Resolve
  • Web Design
    Web Design View all Web Design
    Start Learning
    • Software
      Software
      • Sketch
      • Figma
      • Adobe XD
      • Sublime Text
      • Visual Studio Code
      • MailChimp
      • Webflow
      • Campaign Monitor
    • WordPress
      WordPress View all WordPress
      • WordPress CMS
      • WordPress Themes
      • WordPress Plugins
      • WordPress Hosting
      • Elementor
    • HTML/CSS
      HTML/CSS View all HTML/CSS
      • HTML
      • CSS
      • JavaScript for Designers
      • Bootstrap
      • Animation
      • HTML Templates
      • Landing Pages
      • SVG
    • Email
      Email View all Email
      • Email Design
      • Email Templates
      • Email Marketing
      popular software in Email
      • Campaign Monitor
      • MailChimp
    • UX/UI
      UX/UI View all UX/UI
      Learn UI Design
      • Forms
      • Icon Design
      • Navigation
      • Prototyping
      • Wireframing
      • Web Typography
      • Material Design
      • Design Theory
      • Design Systems
      Learn UX Design
      • User Research
      • User Testing
      • Responsive Design
      • Usability
      • Accessibility
      popular software in UX/UI
      • Sketch
      • Figma
      • Adobe XD
      • Webflow
    • SEO
      SEO View all SEO
      • Content Strategy
      • Conversion
      • Performance
    • eCommerce
      eCommerce View all eCommerce
      • Shopify
      • WooCommerce
      • BigCommerce
      • Magento
    popular software in Web Design
    • Sketch
    • Figma
    • Adobe XD
  • Code
    Code View all Code
    Start Learning
    • WordPress
      WordPress View all WordPress
      • Plugin Development
      • Theme Development
    • HTML/CSS
      HTML/CSS View all HTML/CSS
      • HTML
      • CSS
      • JavaScript for Designers
      • Bootstrap
      • Animation
      • HTML Templates
      • Landing Pages
      • SVG
    • Mobile Development
      Mobile Development View all Mobile Development
      • iOS Development
      • iOS Templates
      • Android Development
      • Android Templates
      • React Native Development
      • React Native Templates
      • Ionic Development
      • Ionic Templates
      • Corona
      • Firebase
      • Kotlin
    • JavaScript
      JavaScript View all JavaScript
      • React
      • Vue.js
      • Node
      • jQuery
      • Angular
      • Web APIs
    • PHP
      PHP View all PHP
      • Laravel
      • PHP Scripts
      • CodeIgniter
      • Yii
    • Coding Fundamentals
      Coding Fundamentals View all Coding Fundamentals
      • OOP
      • Functional Programming
      • Databases & SQL
      • Security
      • Testing
      • Workflow
      • Design Patterns
      • Rest API
      • Machine Learning
      • Authentication
      • Version Control & Git
      • Performance
      • XML
      • AJAX
      • Regular Expressions
      • Tools
      • Game Development
      • Terminal and CLI
    • Python
      Python View all Python
      • Django
    • Ruby
      Ruby View all Ruby
      • Ruby on Rails
    • Cloud & Hosting
      Cloud & Hosting View all Cloud & Hosting
      • AWS
      • Web Servers
      • Hosting
      • Scaling
      • Databases & SQL
  • Music
    Music View all Music
    Start Learning
    • Software
      Software
      • Audacity
      • Audition
      • Reaper
      • Pro Tools
      • Fairlight
      • Premiere Pro
      • Ableton Live
      • Cubase
      • Garageband
      • Logic Pro
      • Reason
    • Equipment
      Equipment View all Equipment
      • Microphones
    • Audio Recording
      Audio Recording View all Audio Recording
      • Voice Recording
    • Audio Production
      Audio Production View all Audio Production
      • Audio Editing
      • Podcasting
      • Sound Design
      • Music Production
    • Royalty Free Music
    • Sound Effects
    • Music Theory
    • Instruments
      Instruments View all Instruments
      • Guitar
      • Drums
    popular software in Music
    • Audacity
    • Audition
    • Reaper

  • Sign In
  • Tuts+ YouTube
  • Envato Elements
  • Envato Elements
  • |
  • Tuts+ YouTube
  • |
  • Sign In
  • envato-tuts+
  • Design
  • Business
  • Photo
  • Video
  • Web Design
    • Software
        • Start Learning
        • Sketch
        • Figma
        • Adobe XD
        • Sublime Text
        • Visual Studio Code
        • MailChimp
        • Webflow
        • Campaign Monitor
    • WordPress
        • Start Learning
        • WordPress CMS
        • WordPress Themes
        • WordPress Plugins
        • WordPress Hosting
        • Elementor
      All WordPress
    • HTML/CSS
        • Start Learning
        • HTML
        • CSS
        • JavaScript for Designers
        • Bootstrap
        • Animation
        • HTML Templates
        • Landing Pages
        • SVG
      All HTML/CSS
    • Email
        • Start Learning
        • Email Design
        • Email Templates
        • Email Marketing
      All Email
      • popular software
      • Campaign Monitor
      • MailChimp
    • UX/UI
        • Learn UI Design
        • Forms
        • Icon Design
        • Navigation
        • Prototyping
        • Wireframing
        • Web Typography
        • Material Design
        • Design Theory
        • Design Systems
        • All UI Design
        • Learn UX Design
        • User Research
        • User Testing
        • Responsive Design
        • Usability
        • Accessibility
        • All UX Design
      • popular software
      • Sketch
      • Figma
      • Adobe XD
      • Webflow
    • SEO
        • Start Learning
        • Content Strategy
        • Conversion
        • Performance
      All SEO
    • eCommerce
        • Start Learning
        • Shopify
        • WooCommerce
        • BigCommerce
        • Magento
      All eCommerce
  • Code
  • Music
  1. envato-tuts+
  2. Home
  3. Web Design

Sketch for Beginners

Adi Purdila
Adi Purdila Jul 5, 2023

Lessons

Play lesson (3 mins)
Read Related Content

Play lesson (6 mins)
Read Related Content

Play lesson (7 mins)
Read Related Content

Play lesson (12 mins)
Read Related Content

Play lesson (8 mins)
Read Related Content

Play lesson (21 mins)
Read Related Content

Play lesson (10 mins)
Read Related Content

Play lesson (11 mins)
Read Related Content

Play lesson (19 mins)
Read Related Content

Play lesson (12 mins)
Read Related Content

Play lesson (8 mins)
Read Related Content

Play lesson (9 mins)
Read Related Content

Play lesson (10 mins)
Read Related Content

Play lesson (10 mins)
Read Related Content

Play lesson (5 mins)
Read Related Content

Play lesson (7 mins)
Read Related Content

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 Course For?

  • Mac users
  • Beginner UI, UX, Icon, and web designers 
  • Vector fans

1. Welcome

Welcome to the Adobe InDesign course! Ready to get started? Want to learn what to use InDesign for? We'll start right at the beginning and move together through the software, step by step.

Together, we'll create a full-page brochure. This includes covering all of the tools to get there and everything you need to know to get it ready for print.

Download Course Files

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: 

  • Artboard 
  • Text
  • Shape
  • Image
The Artboard layer in SketchThe Artboard layer in SketchThe Artboard layer in Sketch
The Artboard layer in Sketch

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

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

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

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

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

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.

Sketch vector toolSketch vector toolSketch vector tool

13. Working with Boolean Operations

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

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

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

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
HTML & CSS for Beginners | FREE MEGA COURSE (7+ Hours!)

Sketch Tutorials on Tuts+

Looking to learn Sketch? Check out our Sketch tutorials on Tuts+.

  • A to Z of Sketch: Tips & Tricks!
    Andrei Marius
    03 Aug 2021
  • How to Design a Car App Design UI in Sketch
    Andrei Marius
    17 Feb 2020
  • How to Design a Food Ordering iPad App UI in Sketch
    Andrei Marius
    12 Feb 2020
  • How to Design a Finance App Signup Process in Sketch
    Stelian Subotin
    28 Jan 2020
  • How to Design a Fitness App UI in Sketch
    Andrei Marius
    20 Jan 2020
  • How to Design a Travel App Login Screen in Sketch
    Andrei Marius
    16 Dec 2019
  • Efficiency Tips for Working With Sketch Artboards and Layers
    Adi Purdila
    26 Feb 2018
  • 18+ Sketch UI Kits and Sketch App Resources for Designers
    Brenda Barron
    22 Jun 2022
Adi Purdila
Adi Purdila
Adi Purdila is a web design instructor for Tuts+. With over 100 courses and 200 tutorials published to date, Adi's goal is to help students become better web designers and developers by creating content that’s easy to follow and offers great value. Being self-taught himself, Adi strongly believes that constant learning (academic or otherwise) is the only way to move forward and achieve your goals. When not typing away at his keyboard, he loves woodworking and caring for his ever-growing family of rescue pets. You can stay up to date with what he's doing by following him on social media or visiting his website at adipurdila.com.
adipurdila
Unlimited Downloads
From $16.50/month
Get access to over one million creative assets on Envato Elements.
Over 9 Million Digital Assets
Everything you need for your next creative project.
Create Beautiful Logos, Designs
& Mockups in Seconds
Design like a professional without Photoshop.
Join the Community
Share ideas. Host meetups. Lead discussions. Collaborate.
Quick LinksExplore popular categories
  • Curated Design Assets
  • Best Cool Fonts
  • InDesign Magazine Templates
  • Photoshop Actions
  • InDesign Newsletter Templates
  • InDesign Templates
  • Curated Web Design Assets
  • Responsive WordPress Themes
  • WordPress Themes for Consultants
  • Wireframe Templates
  • Best Shopify Themes
  • Masonry WordPress Themes
  • Web Themes & Templates
  • WP Themes
  • HTML Templates
  • Shopify Themes
  • Bootstrap Themes
  • Free WordPress Themes
  • Video
  • After Effects Templates
  • Apple Motion Templates
  • Video Effects
  • Lower Thirds
  • Stock Footage
  • Placeit
  • Logo Maker
  • Video Maker
  • Design Templates
  • Free Templates
  • Mockups
  • Curated Video Assets
  • After Effects Slideshow Templates
  • Premiere Pro Video Intro Templates
  • Final Cut Pro Templates
  • Final Cut Pro Title Templates
  • Premiere Pro Video Effects
  • Curated Presentation Assets
  • Keynote Pitch Deck Templates
  • Google Slides Business Templates
  • PowerPoint Pitch Deck Templates
  • Best Shopify Mobile Themes
  • Best Presentation Templates
  • Free Tools
  • Image Resizer
  • Video Cropper
  • Video To Gif Converter
  • Elements
  • WordPress Themes
  • Stock Images
  • Website Templates
  • Logos
  • Fonts
  • Tuts+
  • Learn JavaScript
  • Photoshop Tutorials
  • How to Draw
  • How to Use WordPress
  • How to Use PowerPoint
Envato Tuts+
About Envato Tuts+
Terms of Use
Advertise
Help
FAQ
Help Center
envato-tuts+
30,210
Tutorials
1,240
Courses
42,531
Translations
B Corp logo
  • Envato
  • Envato Elements
  • Envato Market
  • Placeit by Envato
  • All products
  • Careers
  • Sitemap
© 2023 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.
  • Youtube
  • Instagram
  • Tiktok
  • Facebook
  • Twitter
  • Pinterest