If you haven’t already
- Download and install Sketch
- Set up the Craft plugin
Video tutorials to watch
Here are some videos you need to watch before starting the exercise. You’ll notice that the version of Sketch used in the videos looks a little different, this is because the Sketch team is constantly updating its software but don’t worry, the functions are the same, just make sure you practice and explore anything that looks different (in this case mainly the resizing options panel).
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.
- 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
- Anima Toolkit
- a Plugin that integrates seamlessly into Sketch with various powerful features: Layout, a way to build responsive designs inside Sketch. Prototype, a feature that let’s you create links, breakpoints and smart layers to preview in a website. And Export a paid feature that enables you to export both HTML & CSS files directly out of Sketch.
- 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.
- 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.