7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 14Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Layers, Artboards and Pages

Sketch has features that allow you to organize your documents, and they’re more sophisticated than what most other web design apps offer. First of all, you have artboards. These allow you to create distinct canvases inside your document. Then, you have the pages which can be used to group various artboards. In this lesson you’ll learn about layers, artboards and pages. Let’s get started.

2.3 Layers, Artboards and Pages

Hey. Welcome back to Practical UI Design with Sketch. This app has some pretty awesome features that allow you to organize your documents way better than most graphic design applications out there. First of all, you have artboards. These will allow you to create distinct canvases inside your document. Then you have the pages, which can be used to group various artboards. In this lesson, you'll learn about layers, artboards, and pages. So let's get started. First of all, as I was telling you in the first lesson, this sidebar on the left will host the list of layers. So, whenever we draw an element on a page we get a new layer, which can be renamed, which can be hidden or shown, and which can be grouped with other layers. So if I duplicate this, and I select these two layers, I can group them together by hitting Cmd+G, or this button here on the top. And that group will actually take the name of the first layer plus the name of the second layer, but I can also rename this, so Group 1. I can also move layers around, like this, and I can create multiple groups. And I can move elements between groups, like this. If, for example, you want to rename a group, you can do so. Let's say, test 1, and then if you hit Tab it's gonna enter a rename mode on the next element. Whether it's a group or a layer. Another group, that's two, three, and hello. And hit Enter when you're done. Now, you can also filter the layers. Let's say you have a big list of layers and you want to find a layer called test 1, well you simply do this, test 1. And it shows it right there. Or you're looking for a specific group that starts with another and there you go. That's the group you're looking for. Great. Now, you also have this tool, which says, Show layers in the layer list. And if you click it, it turns off the layers, and you can no longer select layers in the canvas. And then here you have something called show slices in the layer list. Now this will allow slices which are used for exporting to be displayed in the layer list, but that will be dealt with in the exporting lesson towards the end of the course. So that's basically it for layers. Now I'm gonna show you one of probably the best features in this application and that is artboards. So with the artboards, you simply select the Artboard tool, and you have a bunch of different presets here. For example, iPhone Screens, iPad Screens, with various modes, Landscape, Portrait, Retina Portrait. And all of these have dimensions associated with them. Or you can select a Responsive Web Design, Mobile Desktop, or Desktop HD. Paper Sizes, Icons, Mac Icons, or you can even create your own preset. Give it a name and some sizes, and you're done. So once you figure out what you're trying to do, let's say you're building a mobile application. Well, I'm gonna select the Portrait here. And Sketch created an artboard for me. Now, this doesn't replace the canvas. This is an entity all on its own. So I can have multiple artboards on a canvas. Think of the canvas like your desktop, maybe, or your desk. And on that desk, you have a bunch of notebooks. And in those notebooks, you write various things. Well, artboards are like notebooks. They help you organize your elements a bit better. So for example, when you're building a website you might have an artboard for a mobile size and you might have an artboard for a desktop size. And in fact let's do that right now. So there you go. You have your desktop version on the one hand and the mobile size on the other hand and you can compare them side by side. This makes working on a project much easier and more efficient as well. Now if you have an empty artboard you can simply select it with a click and resize it to your will. And notice Sketch also gives me some visual cues, to tell me whether or not the dimensions I chose match another artboard. If I scale this down even further you'll notice that I also get a notification when their widths match, so that's pretty awesome. But if you have elements inside an artboard, then you cannot click and select it. You have to click it in the layers panel to select and edit that artboard. If you want to delete an artboard, you simply select it from here, delete, and then you can choose the artboard tool with A and drag new artboards. You can rename them here, Test for example, and also you have access to artboards by going to File > New From Template. And you have a few predefined templates. So for example, if you're building an iOS app icon, you click this. And it will give you a document with a bunch of different artboards. So you have one, two, three, four, five, six, seven, eight, nine, ten artboards in here, and they're already predefined. And you can create your own if you're working with this type of project really often. Very nice. So that's about it for artboards. Finally, I wanna talk about pages. Now, pages, you can see a button here. It's actually a drop-down that gives me a list of pages. And I can rename this, so let's say Homepage, and I can create a new one, let's say, Testing, and I can switch between them like this. Now, if I'm in the home page, I have an artboard and I'm drawing something inside that artboard, I can go to my pages and I can choose to duplicate a certain page by right-clicking on it and choosing Duplicate. And I'm going to name it Homepage 2. Now if you're wondering what you can use the pages for, well use them in conjunction with artboards. So let's say you're building a web application. You're gonna need some assets first like typography, like color palette, maybe button styling. Well you can create a first page that says Assets and in there, you're gonna put all of the things I mentioned before. And then you can have the second page called Homepage which will represent the main page of your site. And then another one called, I don't know, contact or whatever you need. So you see where I'm going with this. Sketch allows you to have all of these different assets and pages of a project into a single document. So it's easier for you to access and eventually it saves you a bunch of time. So, that's about it for layers, artboards, and pages. Next time on Practical UI Design with Sketch, you'll learn about two features that allow you to reuse elements and styles. These are called symbols and shared styles. See you soon.

Back to the top