So the last couple of weeks I’ve been watching a few tutorials on Sketch from a recommendation of a friend who works primarily in the app development industry. He said that his people primarily use Sketch in place of Photoshop for a lot of reasons and I can honestly see why. Being a print designer for years I’d never layout a print ad in Photoshop or Illustrator so why would it make sense for there to be a stand alone piece of software solely dedicated to assembling websites, web collateral and mobile applications. There are some really interesting tips and tricks in these tutorials and Level Up Tutorials definitely killed it teaching me Sketch.
The positive parts that would get me to move would be the free form canvas that is infinite so you can create artboards on the fly, multiple sizes exporting, customizable toolbar and the fact that there is a MASSIVE community committed to creating assets for Sketch that are free and easy to use. The negatives would be no cloud access and library collaborations that Photoshop has that I’d most likely stick with photoshop to keep those assets.
Here are my notes on all 25 tutorials. They’re super easy to watch even if it’s one at a time because they’re no longer than 5-6 minutes long and the topics are pretty straight forward. Check them out and enjoy!
– Aa
Sketch App Tutorials – Series Introduction
https://www.youtube.com/watch?v=AV2OkzIGykA&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS
- perfect alternative to photoshop or illustrator
- vector based
- can set up text styles for CSS
- many different types of grids
Sketch App Tutorials – #2 Getting Around
https://www.youtube.com/watch?v=fndq5vWZTy8&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS&index=2
- Top left – insert
- Right panel is your inspector
- Left panel is your layers
- many key commands are similar to photoshop
- top bar has transform tools, zoom, pathfinder, etc…
- Mirror shows your project on your mobile device
- view brings grids, vector, raster, eat…
- to get a guide you double click on the ruler
- export is in the bottom right
Sketch App Tutorials – #3 Understanding Artboards
https://www.youtube.com/watch?v=A-0xWk6BFq4&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS&index=3
- Sketch App’s canvas is infinite
- Art boards help define boundaries
- Insert/artboard – inspector has multiple predetermined size
- works pretty much like photoshop
- CMND + D = duplicates
- exporting all or some by just checking some boxes
- works pretty much the same way as photoshop
Sketch App Tutorials – #4 Pages
https://www.youtube.com/watch?v=b3vBZvGxZo0&index=4&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS
- Under insert is pages tab
- You can add pages by clicking the +
- You have to make new artboards exportable in order to save it out
- You can Rename a page
- You Can Duplicate a page
- or delete a page
Sketch App Tutorials – #5 Styling Shapes With the Inspector
https://www.youtube.com/watch?v=w6-f2tzkCF8&index=5&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS
- the inspector changes depending on what you’re working on
- shared style options over CSS
- you can add multiple fills
- gradients, noise, etc…
- you can add multiple borders as well
- positioning tools are at the top of the inspector
Sketch App Tutorials – #6 Using Text Styles
https://www.youtube.com/watch?v=NN1_mz8PPoQ&index=6&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS
- type something
- stylize it
- Click no text style
- name it “Headline 1” for example
- You can make multiple settings
- You can Manage text styles
Sketch App Tutorials – #7 Grids and Layouts
https://www.youtube.com/watch?v=tDv0GWKdrpA&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS&index=7
- grids are in the top right
- grid settings – can modify the grid
- show layout – for web layouts
- click show layout again and you can modify layout settings
- can add column and rows
- you can make your grid the default in “make default”
- can use layouts in artboards
- can change layout specs per dartboard
Sketch App Tutorials – #9 Shapes In Sketch 3
https://www.youtube.com/watch?v=-1BMzQLq7zk&index=9&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS
- “R” gives you a rectangle
- Shift makes a perfect box or circle
- double click the object to transform specific points
- double clicking the point gives you pen tool options
- Union in the top right center merges shapes
Sketch App Tutorials – #10 Creating and Using Symbols
https://www.youtube.com/watch?v=aY0Vvz_FRNA&index=10&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS
- Create new artboard
- create all of your content
- group everything you want to make a symbol
- click create symbol button
- basically, symbol equals a Photoshop smart object but you don’t have to click in and save
- manage symbol in inspector bar to rename
Sketch App Tutorials – #12 Foundation 5 UI Kit
https://www.youtube.com/watch?v=NschtZQsrdw&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS&index=12
- https://github.com/stephenway/sketch-foundation-kit
- download the package
- Works the same way as the iOS Kit
- Lots of different Foundation 5 symbols
Sketch App Tutorials – #13 Bootstrap 3 UI Kit
https://www.youtube.com/watch?v=eF0J_6Phoi4&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS&index=13
- http://bootstrapuikit.com/
- Download the package
- no symbols in this kit
- https://www.sketchappsources.com/free-source/502-bootstrap3-symbol-library-sketch-freebie-resource.html
Sketch App Tutorials – #14 Installing and Using Plugins
https://www.youtube.com/watch?v=eF0J_6Phoi4&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS&index=13
- Github has Sketch plugins
- Lorem Ipsum
- Plugins/reveal plugins folder
- place downloaded plugins into this folder
- read the directions on how to operate it
Sketch App Tutorials – #15 Dynamic Buttons
https://www.youtube.com/watch?v=X_TMEkptrTo&index=15&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS
- https://github.com/ddwht/sketch-dynam…
- install plugins
- create a text layer
- type 20:40:20:40
- select the text layer and hit control+J
- Rename the button layer to the proportions you want
- adjust as the word length as you need to
Sketch App Tutorials – #16 5 extremely Useful Tips & Shortcuts
https://www.youtube.com/watch?v=GtVGL7hfqSA&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS&index=16
- Exporting
- 1. In Multiple Resolutions
- insert Slice
- export (on the right-hand size)
- click the plus
- 1x, 2x, 1.5x, etc… or whatever you need
- 2. Drag and Export
- Click a layer or group and drag it to your desktop
- 1. In Multiple Resolutions
- 3. Quick Keys
- R = Rectangle
- S = Slice
- V = Vector
- P = Pencil
- T = Text
- etc… Learn Em
- 4. Modify the menu
- view / Customize Tool Bar
- add tools
- move tools
- delete tools
- view / Customize Tool Bar
- 5. Copy CSS
- select the layer
- right click / copy CSS Attributes
Sketch App Tutorials – #17 extremely Useful Tips & Shortcuts Part 2
https://www.youtube.com/watch?v=d0l6YZ4cams&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS&index=17
- Measuring Distance
- select an image and hold down Alt
- Easy access to color picker
- select something
- CNTRL + C
- can even select color outside of Sketch
- Round to Nearest Pixel
- select everything
- scale it
- Layer/round to nearest pixel edge
- Create custom shortcuts
- System Preferences
- Keyboard
- Shortcuts
- App Shortcuts
- Sketch
- select something that doesn’t have a shortcut
- make it
- apply it
- App Shortcuts
- System Preferences
Sketch App Tutorials – #18 Plugin Management with Sketch Toolbox
https://www.youtube.com/watch?v=kpq-1KJ6slM&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS&index=18
- sketchtoolbox.com
- you can download the most popular plugins
- click install
- plugins / the plug in you installed
Sketch App Tutorials – #19 Extending Sketch with Free Resources
https://www.youtube.com/watch?v=1ZBDEH_hQ2U&index=19&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS
- http://www.sketchappsources.com/
- this site has a ton of free UI kits
Sketch App Tutorials – #20 How to Create Animated GIFs in Sketch
https://www.youtube.com/watch?v=cbZfveuc6ws&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS&index=20
- Go to the sketch toolbox
- search animated gifs
- install the plug in
- Insert Artboard
- Name the Artboard
- Duplicate the Artboard several times
- Make Grid / choose a number of frames
- Rename all of these artboards
- Copy and Paste elements into each frame
- Plugins / Generate Gif
- select settings and export
Sketch App Tutorials – #21 4 Great Artboard Plugins
https://www.youtube.com/watch?v=LmWlG3N57CI&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS&index=21
- Go to the sketch toolbox
- Type in artboards
- Cover Artboards
- Artboard Zoom
- Sketch Arrange Artbords
- Sketch Artboards
- Type in artboards
- Select Artboard
- Cmnd + 4 to zoom artboard
- Shift + , goes backwards
- Control + F fills the bg
- Plugins / arrange artbords
- evenly arranges dartboards
Sketch App Tutorials – #22 Sketch 3.4 New Features
https://www.youtube.com/watch?v=UbIBXO4p3E8&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS&index=22
- browse plugin directory
- better organized
- Copy and Paste works seamlessly in artboard
- Can uncheck autosave
- Android sizes
- Better masking features
- option click on eyeball locks a layer
- Zooming is faster
- can drag SVG directly into Sketch
- Can edit multiple grids at once
Sketch App Tutorials – #24 Local Sharing For On Device Display
https://www.youtube.com/watch?v=-tnw4ffjubE&index=23&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS
- click share in the upper right
- it’ll send it to a browser
- sign into chrome on your browser and phone
- go to recent tabs
- go to your computer
- click on the file name
- or copy the link and send it to yourself
- theres a full screen button on the top right as well
Sketch App Tutorials – #25 Flow Chart
https://youtu.be/AV2OkzIGykA?list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS
- open sketch toolbox
- search flowchart
- download AEflowchart
- Select start end
- plugins/aeflowcharts / startend
- select choices
- plugins/aeflowcharts / decision
- select outcome
- plugins/aeflowcharts / process
- Select everything on the left
- Cntrl + Shift + C
- you can select and delete by clicking and unlocking the folder reconnections
