Intro to Sketch
Workshop by @nicolesaidy
design your landing page
Today's mission
Intro
-
Powerful lightweight professional design application
-
Compatible with Mac only
-
Perfect alternative for Adobe Photoshop & Illustrator
-
Made for digital design
-
Download the free trial for 30 days
getting started
-
Toolbar (top)
-
Inspector (right)
-
Shapes
-
Layers
-
Vector
-
Hand tool
-
Group layers
-
Zoom in/out with cmd +/-
-
Double click to edit shape
-
Export assets
getting around
-
Infinite canva
-
Multiple artboards: a way to organize content
-
Create artboard with artboard tool
-
Predefined artboards
-
Export artboard
artboards
styling
-
Shape types
-
Duplicate shape with Alt+drag
-
Editing shapes with vector tool
-
Alignment tools
-
Shared styles
-
Mask
styling shapes
-
Text inspector
-
Text styles
styling text
Symbols
Symbols allows you to reuse elements easily across Artboards and Pages
-
Creating Symbols
-
Editing Symbols
-
Organizing Symbols
-
Resizing Symbols
plugins
-
Icon font
-
Unsplash.it
-
Content generator
- Download this folder & open it
- Copy the 3 plugin folders
- Go to Sketch > Help > Reveal Plugins in Finder
- Open the Plugin folder
- Paste the folders here
how to install the plugins
To use the Icon Font plugin, you have to install the icon fonts on your mac:
-
Open the "ttf-files" folder and double-click on each font file to install it
-
Open Sketch and go to Plugins > Icon Font > Install Font Bundle > Select the font-bundles-master folder
-
Confused? Watch this
how to install the icon fonts on your mac
-
Go to the plugin's Github repository
-
Click on "Clone or Download" > Download Zip
-
Unzip the folder
-
Open Sketch and go to Help > Search for "Reveal Plugins Folder"
-
Move the downloaded folder to the Plugins folder
(for the future) how to install a plugin
tips & tricks
-
Export multiple resolutions
-
Swipe layer to export
-
Measure distances: Alt
-
Color picker: Ctrl+C
-
Make grid
-
Copy CSS attributes
-
Mirror with phone
Step #1
build the layout
(10 minutes)
Step #2
create style guide
(15 minutes)
For inspiration:
Step #3
style your landing page
(20 minutes)
awesome design resources
github.com/nicolesaidy/awesome-web-design
nicolesaidy.com
@nicolesaidy
Intro to Sketch - Workshop
By nicolesaidy
Intro to Sketch - Workshop
- 93