If you haven’t already
- Download and install Sketch
- Set up the Craft plugin
Video tutorials to watch
Deliverable
In order to continue leveling up your Sketch skills, we are going to kick off with a simple tracing exercise.
- Watch the above video tutorials.
- Download the image screens and icons located in the Google Drive.
- In Sketch, create a new artboard the size of the image.
- Decrease the opacity of the image
- 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)
- Use the background image as your guide to recreate the screen.
- Font = SF Pro Display. You can download it HERE
- Keep an eye on the details! Watch out for shadows, icon size, borders, etc.
- Have fun!
- 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.