Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Sketch Basics

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Sketch Interface

5: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.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up