Designing Multiple Screens9:42 with Christopher Downer
In this video, we'll duplicate our artboard to begin designing a multi-screen app.
Refer to the Sketch documentation to learn more about all the features we cover.
The second screen we'll be making for this application will be a profile view. 0:00 The easiest way to start this one off will be by duplicating the art 0:05 board we've been working on. 0:09 You can see that the art board is styled a little differently than the other 0:10 layers on the list, because of its lighter color. 0:14 If we select it, we can right-click the layer and select duplicate from the list. 0:17 And it will make a copy beside, with all the layers intact. 0:23 There are some layers here that we don't want, though. 0:26 So let's remove them. 0:29 Select the Woke Up cell in the layer list, hold Shift and click check in. 0:30 Now, just press backspace to delete them. 0:37 Doing this is a lot quicker than adding a new whiteboard and 0:40 drawing or copying over the background elements, as well as the bars we need. 0:43 Let's remove the Add button in the title bar we added for the today screen and 0:48 change the title to your name. 0:52 I'll use the name John Appleseed. 0:54 We'll also want to update the tab bar at the bottom, so 0:58 the selected tab is My Profile. 1:01 I'll go to Select through the My Profile icon and 1:04 change it to Shared Style in the inspector to Selected Tab. 1:07 Let's change the text style, too. 1:12 Do the same for the Today icon, giving it the Unselected Style. 1:15 Now, let's add some content. 1:23 Starting with the header, whether it be a background image, avatar, or 1:25 some profile information. 1:29 We'll want to draw a rectangle that's 210 pixels high underneath the title bar. 1:31 When done, just group it. 1:37 [NOISE] And let's remove the time line there, from this art board. 1:38 What's going to go in here is our background image. 1:44 So let's select a bit map layer from our background group and 1:47 press Command and C to copy it. 1:50 Select the rectangle in our newly created group, and 1:53 paste the image using Command and V. 1:56 You may have guessed already, but 1:59 we will need to create a mask to ensure the image fits into the rectangle. 2:01 And I'll do that before I resize it. 2:05 This time, I'll right-click the rectangle we'll want to use as a mask 2:08 in the layer list, and click on User As Mask at the bottom. 2:12 Now select the bitmap image so 2:16 we can resize it, but don't forget to unlock the layer first. 2:18 You may have to zoom out to see the handles to resize it. 2:23 But if you hold down Option when you click and 2:26 drag one of the corner handles, it will scale the layer from the center. 2:28 I'll just drag this into position here a little until it looks good. 2:32 Now we need to draw an oval for the avatar that will sit here. 2:36 I'll draw one in and make sure it's 120 by 120 pixels. 2:39 I'll drag it into the center of the shape where the red guide lines appear. 2:44 And I'll just move it up slightly, so there's room for some text underneath. 2:49 For the avatar I'll open up this image, copy it, and 2:54 close the window as we don't need it anymore. 2:57 Then, with the oval still selected, 3:00 I'll paste it in holding down Shift along with the Command and V shortcut. 3:03 This will paste the layer at the same coordinates as the selected layer so 3:08 we don't have to reposition it. 3:12 Let's change the size of our image to 120 by 120 to match the oval. 3:14 You only need to update one of these fields in the inspector, as the locked 3:19 padlock icon in between them signifies that the images ratio will stay the same 3:24 when you resize, like holding down Shift when you click and drag a handle. 3:29 You can always click this icon to open it, if you don't want this to happen. 3:34 When done, press Command and select the oval that's underneath, and 3:38 press mask into toolbar. 3:43 Add some text underneath by selecting the text tool, and pressing T. 3:45 And then, click and type your location. 3:49 In this case, I'll type San Francisco. 3:52 I'll change the font back to Roman and give it a size of 14. 3:55 I'll duplicate this layer and 3:58 nudge it down whilst holding Shift, and type in 34 friends. 4:02 I'd like this text to be a little smaller and 4:08 not quite as bright, just like the sub-texts in my other art board. 4:10 So I'll change the text style to cell subtitle. 4:14 With each of these text layers, I'll need to make sure they're horizontally aligned. 4:18 So I'll press the align to horizontal center icon at the top of the inspector. 4:23 I will also make sure that my avatar is aligned to the center as well. 4:28 Once done, make sure these are all inside the folder we've created and 4:34 rename it to header. 4:38 Let's lock this bitmap layer again, so we don't select it accidentally. 4:40 In this blank area here, 4:44 under the header, we want to draw some boxes that contain some information. 4:46 I'll need a trusty rectangle for this. 4:50 So I'll draw the shape in, from the top left, and make it about 90 pixels high. 4:52 And I'll make sure it fits the width of the screen. 4:57 With that drawn, I'm just going to give it some padding from the edges. 4:59 So, I'll nudge it ten pixels left and down whilst holding Shift. 5:03 I'll adjust the width so it's at 355, ten pixels from the right edge as well. 5:09 I think this will look a lot nicer with some rounded corners. 5:15 So, I'll adjust the radius value to 5. 5:18 The information in this box is going to relate to the user's last bike ride, 5:22 which we've already documented in the other screen. 5:27 To start off, I'm going to select a red circle in the today art board and 5:30 create a Shared Style in the inspector. 5:34 I'll select Create New Style in the drop down and I'll name this Bike Ride. 5:38 Selecting the gray rectangle, I'll apply the Bike Ride style to it. 5:45 Then, I'll add some text here. 5:50 I'll create a new text layer and type Last Bike Ride. 5:52 I'll ensure that it's at a size of 14 and using a regular weight, 6:00 before moving it 10 pixels to the right and down from the top left corner. 6:04 On the next layer, I'll duplicate this and drag it over to the right side of this 6:09 box, and then I'll make this ten pixels from the edge. 6:13 Before I change this text, 6:17 I want to make sure it is right aligned by clicking on the icon in this control. 6:19 I'll make this text the time in which the bike ride was completed, 6:24 which we've noted down on the previous screen. 6:28 For the main path of this cell, 6:32 the text will be 3.4 Miles, the distance that we cycled. 6:34 The font size for this layer should be 36. 6:38 And this needs to line up with the Last Bike Ride text and have it so 6:40 it looks vertically centered in the cell. 6:44 [BLANK_AUDIO] 6:46 Once done, group these four layers and rename it to Bike Ride. 6:50 We'll need to create the groups for the other cells below. 6:58 And whilst we could just duplicate this layer and 7:01 move it down, there is an alternative method. 7:03 With the group selected to go Arrange in the menu bar and click on Make Grid. 7:06 A sheet will appear asking you to set up the grid you want to create. 7:12 For this instance, we want four rows and one column. 7:15 Leave the margin at a value of ten pixels and press Make Grid. 7:19 You can see that the other three identical groups have appeared exactly how we want 7:27 them, leaving us to update the style and text content. 7:31 I will make the second cell here, relates to my check in. 7:34 So, I'll make the orange check in background on our first art board 7:38 to a Shared Style, calling it Check In. 7:41 Once I'm on this art board, I'm going to go ahead and do the same for 7:45 this blue gradient and call it Food. 7:49 Back on the my profile art board, 7:53 I'll apply the check in style to the second item. 7:55 I'll change the text in the top left to Last Check In. 7:58 [BLANK_AUDIO] 8:01 Add the city on the right and change the main text to Sketch Café, 8:05 our check in location. 8:09 [BLANK_AUDIO] 8:11 We'll then change the next rectangle style to Food before entering the data for 8:16 Last Meal. 8:21 The calorie count will go on the right side. 8:22 [BLANK_AUDIO] 8:24 Lastly, for the fourth cell, we'll add in some data here that hadn't yet 8:31 appeared in our timeline for today, the amount of steps taken over the day. 8:36 I want to change this gradient first, but 8:41 it's still associated with the background style. 8:43 So if I change to this, 8:46 all the other layers using it will change too, which we don't want. 8:48 So I'll give this No Shared Style. 8:52 I'd like to be a pinkish purple type color, so 8:56 I'll open in the fill pop over and play around with adjusting the hue first. 8:59 So my gradient is in a similar style to the others. 9:04 Once we've got something that looks good, I'll change this text. 9:08 Steps Taken on the left, 231 Calories on the right. 9:11 And we'll put in 5,134 Steps in the main area. 9:16 Then finally, select our tab bar group, 9:24 hold down Option, and click To Front in the toolbar. 9:27 And there we have it, two screens of our fictional iOS app. 9:33 Next up, we'll apply some slices to these layers to prepare them for export. 9:37
You need to sign up for Treehouse in order to download course files.Sign up