Video description
Learn to use Bohemian Coding’s Sketch 3 for all of your
interface design work with this 3-hour comprehensive beginner’s
guide to the app that more and more interface designers are
choosing as an alternative to Photoshop. In this 3-hour video
tutorial, you get a complete introduction to using this lean, yet
powerful new program. Amar Sagoo, a senior interaction designer at
Google and avid Sketch user, starts by walking you through the
Sketch interface and explaining the tools and what they do. He goes
on to show you how to set up and organize your projects; position,
size, and style your graphics; create shapes; import work; edit
bitmaps; export graphics; and extend the power of Sketch with
templates, stencils, and plug-ins. You can download project files
to follow along with the exercises and reinforce what you’ve
learned. Even if you have no prior experience designing with
Sketch, after working through this step-by-step video tutorial, you
will have the skills and confidence you need to use Sketch 3 for
creating all of your online graphics. User Level:
Beginning/Intermediate Closed-Captioning in English
Table of Contents
Sketch Basics
Welcome
00:01:26
How Sketch works: vectors versus bitmaps
00:01:05
The Sketch user interface (UI)
00:02:26
Creating content
00:03:23
Selecting content
00:03:05
Moving, resizing, reordering, duplicating, and deleting layers
00:01:08
Zooming and panning
00:02:36
Styling basics
00:01:25
Viewing pixels and using a Retina display
00:01:21
Organizing Your Drawing
Artboards
00:03:16
Groups
00:02:51
Naming objects
00:01:56
Locking and hiding content
00:02:04
Tips for selecting content
00:02:47
Pages
00:01:45
More on positioning and sizing
Rulers
00:01:36
Moving and resizing using the keyboard
00:00:57
Tips for changing values in the inspector
00:02:07
Scaling proportionately
00:01:20
Smart guides and measuring
00:01:50
Alignment and distribution
00:01:36
Making grids of objects
00:02:03
Ensuring sharp edges by fitting to pixels
00:01:16
Manual alignment guides
00:01:04
Grids and layouts
00:02:18
Styling
More on using the Color panel
00:02:50
Opacity and blending
00:01:11
Gradients and advanced fills
00:02:43
More on borders and lines
00:02:26
Shadows
00:02:27
Text styling
00:01:58
Blurring and reflections
00:01:51
Replicating styling
00:02:36
Reusing styling and content
Reusable styles for shapes
00:01:41
Reusable text styling
00:01:23
Reusing content with symbols
00:02:36
Creating your own shapes
Creating your own shapes using paths
00:02:41
Advanced options and shortcuts for drawing paths
00:01:55
Joining paths, editing segments, and varying stroke width
00:02:04
Rotating, flipping, skewing, and perspective distortion
00:02:12
Combining shapes
00:03:24
Vectorizing stroke and text
00:01:36
Creating rotated copies
00:01:02
Text on a path
00:01:59
Working with bitmaps
Adding bitmaps
00:00:58
Editing bitmap content
00:02:14
Styling and adjusting bitmaps
00:01:28
Masks
00:03:26
Masking bitmaps with flexible proportions
00:02:42
Converting between vectors and bitmaps
00:01:33
Nine-slice images
00:01:21
Exporting
Exporting artboards
00:01:53
Exporting layers and groups
00:01:33
Exporting arbitrary regions with slices
00:02:15
Export options
00:01:21
More export options
00:01:45
Drag & drop export
00:00:38
Copying CSS attributes
00:00:47