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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • “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

  • 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

Sketch App Tutorials – #13 Bootstrap 3 UI Kit

Sketch App Tutorials – #14 Installing and Using Plugins

  • 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

  • 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

  • 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
  • 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
  • 5. Copy CSS
    • select the layer
    • right click / copy CSS Attributes

Sketch App Tutorials – #17 extremely Useful Tips & Shortcuts Part 2

  • 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

Sketch App Tutorials – #18 Plugin Management with Sketch Toolbox

  • you can download the most popular plugins
    • click install
    • plugins / the plug in you installed

Sketch App Tutorials – #19 Extending Sketch with Free Resources

Sketch App Tutorials – #20 How to Create Animated GIFs in Sketch

  • 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

  • Go to the sketch toolbox
    • Type in artboards
      • Cover Artboards
      • Artboard Zoom
      • Sketch Arrange Artbords
      • Sketch 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

  • 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

  • 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

  • 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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: