This course will give the participant a solid understanding of Sketch so they can create designs for different size screens, and tap into the power of symbols (reusable design components), as well as build clickable prototypes. The class will also cover Sketch’s native prototyping tools.

3 days - $1,895.00

Course taught by an expert website designer.

Prerequisites:

Basic knowledge of a computer is required.

Course Outline

Creating New Files & Designing on a Grid System
Creating a new file
Artboards & pages
Setting up a layout grid
Creating colored backgrounds for text Importing text

Adjusting the Layout for Tablets & Mobile Phones
Designing with Bootstrap’s grid
Adapting the design for tablets
Adapting the design for mobile phones

Inserting & Masking Photos
Importing photos
Cropping a photo (masking) Custom shaped masks

Inserting Vector Graphics, Fills, Shadows, & More
Importing & modifying vector graphics Making grouped objects easily selectable Layer opacity vs. fill opacity
Aligning & distributing layers
Reusing colors found in the design Adding a drop shadow

Layer Styles (Reusable Appearance)
Creating a layer style
Changing & renaming layer styles
Making a style to darken full-width background photos

Text Styles (Reusable Appearance)
Creating text styles
Editing text styles
Renaming styles & organizing into folders

Symbols (Reusable Components)
Creating & editing symbols
Customizing content inside a symbol
Controlling the layout & resizing of symbols
Renaming symbols
Moving symbols between pages

Exporting Assets: SVG & PNG
Exporting artboards
Exporting for web as SVG & PNG Exporting into folders

Exporting Assets: 1x & 2x JPEG
Exporting as JPEG
Properly setting JPEG quality

Symbols: Overrides & Custom Data
Controlling Symbol
Overrides Overriding
Images Within a Symbol
Custom Data Sources
Masks vs. Image Fills

Symbols: Nested Layer Styles & Nested Symbols
Using Layer Styles in Symbols
Nesting Symbols

Smart Layout
Using the Tidy button
Adjusting Symbol Spacing Reordering Content
Using Smart Layout for Symbols

Shared Libraries (Symbols, Styles, & Colors)
Creating & Using Shared Libraries

Vector Drawing & Graphics Tips & Tricks
Drawing Custom Vector Shapes
Borders: End & Join Options
Multiple Borders
Multiple Ways to Rotate
Copying & Pasting Layer Style
Rounding Vector Corners

Creating a Clickable Prototype with Sketch’s Native Tools
Creating a Prototype
Linking between artboards
Hotspots
Fixed Position Elements

Sharing Native Prototypes & Sketch Cloud Documents
Sharing a Prototype with Others (via Sketch Cloud)