Sketch is a Mac app that was built with the specific needs of a modern web designer (or app designer) in mind. Unlike some other image editing programs—which were originally created for print, photo retouching, or illustration—the entire focus of the Sketch app is on designing user interfaces.
Sketch uses Artboards, so you can efficiently design web layouts for mobile, tablet, and desktop (or screens for apps). It’s vector-based, so you can scale for a variety of screen sizes with ease, as well as export hi-res (Retina) graphics for the web or apps. You’ll find tools and features specifically relevant to User Interface (UI) design, native and adjustable grids, and a quick workflow for exporting your work.
Includes Downloadable Class Files (works on Mac)
ISBN: 978-1-941333-28-0
Setup & Introduction
Downloading the Class Files
About Sketch & Keyboard Shortcuts
Section 1
Setting Up: Do This Before Other Exercises!
- Setting up your class files
Creating New Files & Designing on a Grid System
- Creating a new file
- Inserting Artboards
- 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)
- Customizing the Amount of Rounding for Each Corner
Inserting Vector Graphics, Fills, Shadows, & More
- Importing & modifying vector graphics
- Making grouped objects easily selectable
- Layer opacity vs. fill opacity
- Aligning & distributing layers
- Copying & pasting appearance
- Adding a drop shadow
Section 2
Color Variables & Layer Styles (Reusable Appearance)
- Creating & Using Color Variables (Color Swatches)
- Creating a layer style
- Making a style to darken full-width background photos
- Renaming, Grouping, & Deleting Styles ,
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
Section 3
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, & Color Variables)
- Creating & Using Shared Libraries
- Color Variables
Section 4
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
- Fixed Position Elements
Sharing Native Prototypes & Workspace Documents
- Sharing a Prototype with Others
- Workspace Documents
Creating a Clickable Prototype with Craft (by InVision)
- Installing Craft
- Creating an InVision prototype & Linking artboards
- Creating overlays & fixed headers
- Updating the design
- Sharing the prototype
Bonus Material
Exporting Assets for iOS Apps: PNG & PDF
- Exporting as 1x, 2x, & 3x PNG
- Exporting as 1x PDF
Plugins
- How to Use Some Recommended Plugins
Reference Material
Links to Useful Resources
Sketch Mirror: Viewing Designs on Your Phone/Tablet
- Using Sketch Mirror to view Sketch files on a phone or tablet while you work
Image Optimization Tools (Free)
- ImageOptim: Reduce the file size of PNGs & JPEGs
- ImageAlpha: Reduce the file size of transparent PNGs
- SVG Optimizer: Reduce the file size of SVG
Web File Formats Quick Reference
- Comparison of JPEG, GIF, PNG, SVG, & PDF
Common Device Sizes
- 1x, 2x, & Bootstrap container sizes for iPhone, iPad, & desktop
Recommended Preferences
- Color Management
- Disabling Auto Save
- Zoom In On Selection
Examples of What You Learn
Why Our Books Are Unique
Our books are packed with step-by-step exercises that walk you through projects. You’ll learn by doing exercises, not reading long explanations. The goal is to give you hands-on practice with the program, getting you started quickly with the things that are most important for real life work.
