Join Chris Converse for an in-depth discussion in this video Creating pages and artboards, part of Sketch Essential Training: The Basics.
- Now the first thing we're going to do is launch the Sketch application. So, once you've either purchased Sketch or downloaded a free trial, go ahead an launch it from the applications folder. Now if this is your first time launching Sketch or you have not unchecked this box on here that says, show this window when Sketch opens, you'll see this welcome screen. When you either click OK or close this, Sketch will open an Untitled document. If you don't see the splash screen, you can do to the File menu and go down and choose New. In either case, you'll get an untitled document here in Sketch.
Now what we're going to do here is we're going to create a series of artboards in a single page document. So, in the interface here we have this tool bar across the top. This tool bar is customizable. Like other Mac applications, if you right-click and choose Customize Toolbar, you can add or remove tools and customize this experience. I'll come down and click Done. On the left-hand side, we have a list of pages, artboards and layers. And currently, we only see page one showing up here. This little icon here, if I click on this, this will open up all of the individual pages.
If I click the plus sign here, I can add more than one page. So, now we have page one and page two. And I can click between the two of these. The section down here will show us all of the artboards and layers associated to the selected page. So, let's go back to page one, and the first thing we're going to do is create a series of artboards. So, let's go to the Insert menu, lets come down and choose Artboard. This is how we insert all types of elements into our canvas. So with Artboard selected, I move my cursor into the canvas area here.
I can click and drag and create an artboard. On the right-hand side is our Inspector panel. If you don't see the Inspector panel, you can turn this on under the View menu. You can come down here and check or uncheck the Show Inspector. Now this artboard is associated to page one. So, we can see down here the artboard listed. If we go to page two, here's no artboard showing. To add an artboard to page two, let's come down to Insert, come down and choose Artboard. And instead of clicking and drawing an artboard, you'll notice on the right-hand side, the Inspector panel shows us a whole series of pre-determined artboards.
So, we can open up Responsive Design, for example, and see a bunch of different sizes. IOS device sizes. Close these up. Icons for both Android and IOS. So, if I come in here and select one of these, for example, let's just grab a 120 pixel iPhone icon. That will be an artboard right here on the canvas. Now again, this artboard is associated to page two. If we click on page one, we can see artboard one that's associated to page one. Now for this particular project, I want to use a single page and four different artboards.
We're going to create four different sizes of a web layout to mock up what the responsive design stage should look like when our front end developer codes the page. So, I'll come in here to page two. I'm going to right-click and choose Delete Page. That will get rid of the page and the artboard. Then back on page one, let's select the artboard. Over in the Properties panel, we're going to set our sizes here. Now there are some template sizes that come with Sketch. But based on our particular design, I have some specific sizes I want to use. So, for the size width, let's come over here and change this to 1200 pixels.
Then I'll hit a tab and we're going to set the height to 1300 and 50 pixels. Then hit Return. Now the artboard's rather large, so I'll come up here in the tool bar to the Zooming tool. I'll click on the subtraction tool here to zoom out. I'm going to hold this "space" bar inside the canvas area and click and drag to move the canvas around. You can see the ruler showing up here as well. If you don't see the rulers, you can get to those by going up to the View menu, down to Canvas, and saying Show Rulers.
Now I'll zoom out one more time. Now we can see the entire artboard. Now let's come over here to the artboard listing down here under page one. Let's double-click this and let's name this 1200. And then hit Return. So, now with our artboard created for our large screen, we're going to create three additional sizes. Now I've already figured out the individual sizes that we're going to need. But as we're working inside of Sketch, if you find that you need the artboards to be a different size, you can always grab the corners and just drag them to make them larger. So, we're going to create three more sizes. One with the width of 768, another with the width of 600, and a final small size of 320 pixels.
So, back in Sketch, I'll hold the spacebar. I'll move the artboard so it's in the upper left-hand corner of the canvas. I'm going hold down the "option" key, click on the canvas and drag. This will give me a copy of that artboard. I'll space this so we have about 80 pixels in between the two artboards. I'm going to let go. This will be called 1200 copy. Let's come over here and rename this 768. With this selected, let's come over to the Inspector. Let's change the width to 768, and we'll set the height to 1200.
Press Enter or Return. Next I'll come in here, option drag the 768 over to the right. When the distance is the same we'll see 80 show up between the large and what's going to be our smaller screen. I'll let go, let's rename this to 600. Let's go over to the Inspector panel. We'll set the width of this to 600. And we're going to set the height to 1430. Then finally, let's come in here, let's grab the 600 artboard, option click and drag.
Let's rename this 320. And in the Inspector panel, we'll set this to 320 by 1820 pixels. And now with our four artboards on the stage, let's come over to the Pages panel. Let's collapse the pages, so we're just looking at page one. And now we can see our four individual artboards. And now before we continue, let's come up to the File menu. Let's choose Save. Let's target the Desktop and let's call this myWebDesign, and then the final extension is dot sketch.
Then come down and click Save. So, now with our file set up, next we'll start working on our first layout for the 1200 pixel wide artboard.
- Creating pages and artboards
- Adding a navigation bar
- Creating a logo
- Drawing custom shape-based icons
- Building links
- Adjusting layouts for medium screens
- Adapting layouts for small screens
- Exporting artboards and assets