Sketch Interface5:28 with Christopher Downer
This lesson gives a brief overview of the Sketch interface, such as toolbar, inspector, canvas and layer list. You will open a new document with an infinite canvas, and insert layers and populate the layer list.
Basic Features of Sketch 3
You can see more at the Bohemian Coding Features page
Group and Ungroup are used for keeping your document organized.
Forward and Backward are used for organizing your document.
Zoom buttons let you see more or less of your document depending on the zoom level, which is indicated by a percentage under the icon.
Editing controls allow you to manipulate your selected shape.
Mask and Scale allow you to clip layers to shapes and resize them.
Mirror allows you to view designs on your mobile device.
View allows you to show and hide visual aids that can be used when working with complex documents.
When Sketch's application window is opened, it's with a new blank document, so 0:00 you're ready to start working on your project. 0:04 Sketch's simple user interface, or UI, can be broken down in to four parts. 0:07 The tool bar along the top. 0:12 A large infinite canvas in the middle. 0:14 The layer list on the left, and an inspector sidebar on the right. 0:18 Let's start with the toolbar. 0:24 In here are all the tools you will need to make your designs. 0:25 I'll briefly go over each of the groups in the default set up. 0:29 The first item on the left is the insert menu. 0:34 Anything you select here can be drawn on the canvas and will create a new layer. 0:38 We will be seeing this menu quite frequently when using Sketch, 0:44 especially items with green icons inside the shape menu. 0:48 These are the building blocks for creating designs in the app. 0:52 Let's draw a rectangle by clicking on the item in the shape flyout. 0:57 Click anywhere on the canvas, drag, and hold the mouse button down, and 1:03 once you're happy with the size, release your mouse to create a shape. 1:08 Now, there is a layer selected in your document. 1:13 You may have noticed some of the icons in the toolbar are now active, 1:15 by looking more vibrant. 1:19 Going from left to right, I'll cover the rest of these icons briefly. 1:21 We will touch upon them all, in greater detail, later, in the next few stages. 1:26 Group and Ungroup are options used for keeping your document organized. 1:32 Create Symbol is a powerful feature, introduced in version three which you'll 1:38 see in action when we create our app interface in the final stage. 1:42 The zoom buttons let you see more or less of your document, 1:48 depending on the zoom level which is indicated by percentage under the icon. 1:52 Editing controls allow you to manipulate your selected shape. 1:58 Mask and Scale allow you to clip layers to shapes and resize them. 2:02 The next set of four icons which are currently disabled 2:08 are the Boolean Operations. 2:11 These will be explained in a later video. 2:14 Forward and Backward are also used for organizing your document. 2:18 Mirror allows you to view designs on your mobile device, 2:23 which we will touch on in a later video. 2:27 View, allows you to show and 2:31 hide visual aides, that can be used when working with complex documents. 2:32 And, finally, Export, which has it's own stage. 2:38 The canvas, where we drew the rectangle, is where all of our shapes and 2:43 layers are inserted. 2:47 It's infinite in size, so you can scroll in any direction, 2:49 giving you complete freedom in how to set up your drawings. 2:53 If you accidentally scroll off too far and can't find your layers, 2:57 go into the menu bar and press View, and select Center Canvas. 3:02 Over on the right hand side of the window is our inspector. 3:11 I will also cover this in depth in the next stage. 3:15 But here, we can find our layer's properties, such as size and position. 3:18 Options specific to the type of layer we have selected, and the layer styles. 3:24 This is where you can change the colors and styles of your layer. 3:30 Last but not least is the layer list on the left. 3:34 Here is where all of your layers on the canvas will appear, 3:38 where they can be organized and managed. 3:42 All the different types of layers can be found in the Insert menu in the toolbar, 3:46 such as, Shape, Text, and Images. 3:51 As well as some of the more advanced features, like Artboards and Slices. 3:54 Any layer can be selected. 3:59 And they can all be moved around the canvas. 4:01 The list will populate as you insert more layers. 4:04 For example, let me draw an oval shape onto the canvas. 4:08 [BLANK_AUDIO] 4:12 You can see it has been added on top of the Rectangle 1 layer in the list. 4:23 And if I change its color to make it stand out a little more in the inspector. 4:28 [BLANK_AUDIO] 4:32 I can click the backward icon in the toolbar to place it 4:41 behind the rectangle on the canvas and in the layer list. 4:45 If I click and drag the Rectangle 1 layer into the list and move it down below Oval 1 4:51 one, release and look at the canvas, the oval overlaps the rectangle. 4:56 In almost every document you create there'll be 5:05 some layers that overlap each other on the canvas. 5:08 So it's important to understand how the ordering works. 5:12 With this brief overview of the interface, 5:16 we're now ready to move on to learning the fundamentals of Sketch. 5:18 Where we start looking in depth at some of the features, 5:22 as well as some of the tools and options we've already come across. 5:24
You need to sign up for Treehouse in order to download course files.Sign up