Sketch Basics due August 30, 2018

If you haven’t already

  1. Download and install Sketch
  2. Set up the Craft plugin

Video tutorials to watch

Exercise to hand in

In order to continue leveling up your Sketch skills, we are going to kick off with a simple tracing exercise.

  1. Watch the above video tutorials.
  2. Download the images located in the Google Drive in the “Images to Trace” folder.
  3. Create a new artboard the size of the image.
  4. Decrease the opacity of the image
  5. Lock the image layer (hold down the Option key and hover over the layer and a padlock icon will appear instead of the hide icon)
  6. Use the background image as your guide to recreate the screen.
  7. Find a font that is as similar as possible and adjust the size and spacing as needed. (You likely won’t find the exact font, so don’t worry!)
  8. Keep an eye on the details! Watch out for gradients, drop shadows, icon size and weight, etc.
  9. Have fun!
  10. Upload your final Sketch files to the Google Drive in the “Completed Work” folder.

Suggested Resources

In order to be ready before we start using Sketch more frequently, we strongly encourage you to start getting familiar with the Sketch docs.

Start with these:

Suggested Additional Plugins

Sketch Runner
Sketch Runner helps you to get around Sketch quicker by giving you an intuitive interface to supercharge your daily workflow. Stop searching through your menu & start running commands directly from your keyboard.
Anima Toolkit - Sketch to HTML
This plugin enables you to export both HTML & CSS files directly out of Sketch. It is a valuable paid plugin that can help you stay one step ahead and, you can study your designs in depth from an engineering perspective.
Launchpad For Sketch
Launchpad; a Sketch Plugin that integrates seamlessly into Sketch and enables defining and viewing different iPhone/iPad sizes including Portrait/Landscape.
Sort Me
Sort me will help you get organized. As you create new layers in rapid successions by using Make Grid or other duplication techniques, your Sketch document will become messy. Remember to hit “download Zip” from github not clone :)
Magic Mirror
Magic Mirror. Presentation has always played a big part in all designer’s workflows. Like a nice icon, it shows the care that went into the app. It gives people a story before they jump in. Apple is famous for presenting beautiful photography and mockups in 3D. Most times we rely on Photoshop to do that sort of image editing, but with Magic Mirror, you can achieve the same results in Sketch.