Member Workshop
Sketch in a Day

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.

SECTION 1
Creating New Files & Designing on a Grid System
• Sketch templates, artboards, & pages
• Creating a new file
• 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

SECTION 2
Shared Graphic Styles (Reusable Appearance)
• Creating a shared graphic style
• Attributes that are not part of a shared graphic style
• Changing & renaming graphic 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 Elements)
• Creating & editing symbols
• Customizing content inside a symbol
• Resizing symbols
• Renaming symbols
• Detaching from a symbol

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