you'll set up all our art boards for our various screen designs. First you'll select the Desktop HD size. For the second art board, you'll select the Tablet 9" Portrait. Then you'll set up the app layout. You'll use the iPhone 7 size. Now import our colors.png file provided to select our colors. And save our file.
- [Instructor] To begin our project, we'll create a new document. So once you launch Sketch, and you see this splash screen, you can double click on the new document icon, either from the templates tab or the recents tab. Once you double-click this, we'll get an untitled document. First thing we'll do is come over here to the pages panel. Let's toggle open the pages listing. Let's double-click on page one. Let's name this "design." Next let's come up to the insert panel. Let's come down and add some artboards.
So when we select "insert artboard," on the right-hand side, before we get an artboard, we need to pick a particular size. So let's start by coming over here and opening up the responsive web design group, and let's come down and select "desktop HD." Now this artboard is very large. It's larger than the screen I'm recording on. So up in the toolbar in Sketch, let's come up here next to the magnifying glass and let's click the negative sign to zoom out. So now we can see the entire artboard. You can hold the space bar. Click and drag and just move the artboard over to the left.
Let's come back to the insert panel. So now we'll add another artboard. So let's go up to the insert menu. Let's come down and choose artboard again. For this one, let's open material design, and let's come down and choose tablet nine inch portrait. There's our second artboard. Again I'll hold the space bar, click and drag over to the left. Now let's add two more artboards for our mobile app. So again back to the insert panel, down to artboard. Let's come up and choose IOS devices. Let's choose iPhone 7.
Pan over. Now I'm gonna hold my option key and click and drag to create a copy of the iPhone 7 screen. And now let's come over and rename our last two artboards. So let's come in here and double-click on iPhone 7. I'm gonna name this app dash launch. This'll be the launch screen design, and let's double-click on the copy, (typing) and we'll name this app dash organic. So now we have our four artboards created.
Next let's go back to the exercise files, and in the CH01 folder, let's open up the artwork and colors. Let's find colors dot png. Let's click and drag this, and I wanna drag this so that it's not over top of any of the artboards. So I'll drag it down here to the bottom for a moment. Let's pan over. This did get put inside of this artboard, but I'll just grab this and move it outside the artboards so it shows up over here. So now in the layers panel, we can see each of our artboards which are all part of the design page, but the colors artwork here, which we're gonna sample from, is outside of the artboards.
So it sits out here, listed at the same level as the artboards. And now before we continue, let's come up the file menu, let's choose save. Let's name our file "my design." And we'll choose the desktop, and then hit save. And so now with our artboards created, next we'll add some layout guides to each artboard.
- Creating artboards
- Adding a navigation bar
- Working with fonts
- Adding artwork and logos
- Exporting artboards and assets
- Collaborate with Sketch Cloud
- Making design changes