Part 1: Artboards and Shapes
This year, I was TA for a UX Design course at General Assembly in San Francisco. I scoured the internet for Sketch tutorials for absolute beginners, but couldn?t find any that covered all the basics without mentioning Photoshop. So I put on a workshop and made this tutorial for the students.
This tutorial will teach you the absolute basics of Sketch 3, whether you have background in design or not. Part 1 (what you?re reading now) focuses on artboards and basic shape creation, Part 2 covers layer and text styles, and Part 3 covers symbols and exporting. Let?s get started!
Creating Artboards
Create a new document by clicking File > New. When you see the blank screen, look in the top left corner for the ?Insert? menu. This menu contains all the tools you need to create new layers.
Start by creating an Artboard, which is like a canvas. The size that you select determines the final dimensions of the image you export.
Once you select the Artboard tool, you can either draw an artboard freehand like this:
Note: If you need to resize an artboard, simply select its name and drag the white boxes that show up on the corners.
Or you can look at the Inspector column on the right side. As you can see, there are preset dimensions for several different device sizes. I?ve selected iPhone 5.
What if you want to see the entire canvas? Let?s try zooming out using the tool located on the top of the screen.
You can also do this by selecting View > Center Canvas or by using the shortcut ? + 1
Adding shapes
Now that your artboard is fully visible, let?s add a rectangle to it. Located in Insert > Shape > Rectangle.
I made a thin bar at the top of the artboard, like a navigation bar in mobile apps.
Next, locate the right side menu, officially called the ?Inspector?. There is a ?Border? section here with a checkbox. Uncheck it to remove the default border.
Let?s also change the fill in the section right above the border. I used #104F8A. You can enter this number in the box below the eyedropper icon.
Notice that if you click the + sign at the bottom of the fill window, you can save this color swatch for later!
Ready for more?
Move on to Part 2
Megumi Tanaka is a UX Designer in San Francisco. She has been writing design tutorials since 2003.
Originally published on http://megumi.co
