Layer Styling12:18 with Christopher Downer
Now that you have a basic wireframe, it's time to style it.
Refer to the Sketch documentation to learn more about all the features we cover.
So now we have a basic looking wire frame for the first screen for our application. 0:00 It's time to start styling it. 0:06 We'll begin with the background. 0:08 And I'd like to use a photo here. 0:10 I have this one which has some nice color to it with no majorly light or 0:11 dark points. 0:17 It might be too distracting behind our text. 0:18 To get us into the document I'm working with, I'll copy it, using Cmd+C, and 0:21 close the window. 0:26 I'll select my background layer, and paste it. 0:28 As we can see, this image is pretty big, so let's zoom out to resize, and place it. 0:32 [BLANK_AUDIO] 0:37 I'm happy with the position of this. 0:41 So I'll move it behind the background layer, and then adjust its color. 0:43 I'll make sure it's fully black and at 50% opacity. 0:47 Then, I'll apply a background blur with a radius of ten pixels. 0:52 This setting can be found by going into the inspector and 0:57 clicking the arrows by the Gaussian blur setting. 1:00 In the menu, select background blur. 1:03 There we go. 1:06 It's looking good but just a bit dull. 1:07 If we adjust the color on our imported image that could really help. 1:09 So we'll select it and enable color adjust from the inspector. 1:13 Here we'll boost up the saturation to make it more vibrant and 1:18 adjust the brightness a little bit. 1:22 Now that's done, we can select our bitmap and 1:25 background layers before grouping them. 1:28 If we zoom out, we can see the selection is quite large because of the image we 1:31 are using and how anything outside of the art board is being excluded. 1:35 Let's lock this layers so 1:39 we don't select it accidentally when you click off of another element. 1:40 Right-click the layer and select Lock Layer. 1:44 Our title bar is looking a little spartan, and 1:48 we need a button in here that would allow users to add to their timelines. 1:51 The best thing to use here would be a plus button, so let's draw one. 1:55 I'll zoom in to the top corner of the title bar and 1:59 draw a rectangle 20 pixels high and 2 pixels wide. 2:02 I'll be then sure to place this layer above the Navigation Bar. 2:09 I'll press Cmd+D to duplicate it, and then, in the Rotate 2:12 field of the Inspector towards the top, I'll replace the value of 0 with 90. 2:18 With that rotated, I'll select the layer below and 2:24 perform a union operation by the toolbar item and rename this layer to at. 2:26 To place it exactly where I want, I'll move it to the right edge of the art board 2:32 and nudge it left ten pixels with my shift and 2:37 left arrow key before changing its color to white. 2:40 If I zoom back out to look at the gray circles here on each of the rows, 2:44 they need to have their own color depending on their type. 2:48 For example, all check-in activity will be orange. 2:51 So, let's style them. 2:55 Let's zoom into the first item here at the top. 2:56 Let's turn this fill into a green linear gradient. 2:59 The top point is already selected. 3:03 So I'll change its color, then select the second point and adjust that. 3:05 [BLANK_AUDIO] 3:09 Next I'll apply a drop shadow and adjust its values so y is 1 and blur is 3. 3:17 With an opacity of 20, which we can edit under color. 3:24 Now I'm happy with that. 3:28 I'll zoom back out and copy and 3:30 paste this style to the other layers before I edit their colors. 3:31 In the menu bar I'll go to Edit and Copy Style. 3:36 I'll hold Cmd and click the layer from the canvas to select it. 3:41 I'll paste the style with Option+Cmd+V. 3:45 I'll do this for the other two layers and edit the gradients so they're blue, 3:48 red, and orange. 3:53 [BLANK_AUDIO] 3:54 Now all that's left is this big gray rectangle for our map view. 4:11 I'll go to Window and select it. 4:16 I'll copy using Cmd+C. 4:19 Close the window. 4:22 Select the box by holding down Cmd and clicking it. 4:26 And then paste it with Cmd+V. 4:30 The map should be selected. 4:32 Hold down Cmd and 4:34 click the gray rectangle layer that's underneath it in the layer list. 4:35 Once done, press Mask in the toolbar. 4:39 A new group has been created. 4:43 With the rectangle acting as a mask, meaning that any layers inside this group 4:45 won't appear outside the bounds of the shape. 4:50 Let me open up the folder and zoom out so I can see all the points of my image. 4:53 I'll hold down Option and drag one of the handles. 4:59 I'll then press Cmd+1 to zoom back into my artboard. 5:05 Let me just drag this image around into a slightly better position. 5:07 And I'll lock this layer, so I don't accidentally select it again. 5:12 I like this, but 5:16 I'm not a 100% sure on the right angled corners that are on the left side. 5:17 And I'd quite like them to be rounded. 5:21 I could drag the slider that says radius in the inspector, but 5:24 as you can see, this adjusts all the corners and we don't really want that. 5:27 So we'll press Enter to take this shape into edit mode. 5:32 The point in the top left corner is already selected now we're in this mode, 5:36 and if you look in the inspector, there'll be a corners field. 5:40 Select the text box and enter in 7. 5:44 Click on the point at the bottom and change its corner radius the same way. 5:48 [BLANK_AUDIO] 5:51 Then press Enter again to confirm the changes. 5:54 Now we need to include a route on here otherwise it's just a map. 5:57 So let's draw this using the vector tool. 6:01 Zoom into your document a little and then press V for vector. 6:04 Start mapping out your route, following along roads. 6:09 Don't worry about trying to make sure it's accurate or the right length. 6:12 Just do whatever you feel looks good. 6:15 It's only a mock up at this point. 6:18 Press Enter when you've placed your last point. 6:21 If we zoom back out, it doesn't look like much has happened at all. 6:24 But we will need to adjust our border properties to get this to look good. 6:27 I'll make the line thicker and give it a nice blue color and adjust the end and 6:31 joint types in the pop over from the color icon 6:35 to make sure there are no sharp corners. 6:39 No we haven't forgotten about our tab bar at the bottom. 6:42 Let's zoom into it and begin by changing some of these labels to something more 6:46 appropriate for this app by double clicking on the text layer. 6:49 [SOUND] I'll select the blue 6:53 history text layer and 6:58 change its shared style to tap bar text. 7:03 I'll then do the opposite thing for 7:12 the today text layer because this is the active tab. 7:14 Just select tap bar text active from the list. 7:18 I'll make this blue a white before making the other tabs white but 7:22 with a 60% opacity. 7:26 Because it is a shared style they'll all update magically. 7:28 For the tab icons, I have some that I've made earlier. 7:34 So I'll select that document, copy them, and paste them into my temp bar group. 7:37 After you line them up, just delete the alter layers, 7:47 as we won't be needing them anymore. 7:50 Let's put some icons on our colored circles for the log types. 7:56 For the woke up cell, let's draw a simple icon of an alarm clock. 8:03 I'll draw an oval from the middle of the circle. 8:07 So I'll press O, and holding the Option and 8:10 our Shift key to ensure it's the same height and width at 20 by 20. 8:13 Once done duplicate the shape and 8:19 make it two pixels smaller on each side by holding down the same keys. 8:21 After that select them both and press subtract. 8:28 I'll draw a small six by six pixel circle and place it in the top left of the shape 8:32 using the guides before duplicating again and moving over to the right edge. 8:37 Next, we'll need a rectangle that's two pixels high. 8:42 Its length doesn't matter, but I'll rotate it minus 45 degrees and 8:46 move it to the bottom left of the shape. 8:50 Duplicate this, and 8:55 flip the layer horizontally using the button next to the rotate field. 8:56 And drag over to the right. 9:00 Before I draw anything else, I'm just going to select all these layers and 9:02 perform a union operation on them. 9:06 If I click the arrow to the left of the layer preview, 9:08 I can see all the layers inside this shape. 9:11 Now our alarm clock icon is looking a little bit broken, and 9:15 we need to fix this. 9:18 In order to fix this shape, 9:20 we have to select the Oval 19 layer and drag it to the top. 9:21 Now we need to give our little clock some hands. 9:25 I'll collapse this group and draw in a 2-by-8 rectangle in the middle, 9:28 adjust its radius, and then duplicate the shape. 9:33 Now press Rotate in the toolbar. 9:38 The layer has now gone into a rotate mode. 9:40 So if you click and drag one of the handles, it will rotate. 9:43 The little crosshair shows us that the shape will rotate in the middle 9:46 around this point. 9:50 We can pick this up and move it anywhere. 9:51 So let's place it towards the bottom of the shape, 9:54 in the middle of the clock face. 9:56 If we drag a corner handle down towards the 4 o'clock position we can press Enter 9:58 to exit the mode, and even make this line a little bit shorter in height 10:03 by clicking and dragging the middle point. 10:07 With that done, select the two layers that are hour hands, 10:10 as well as the clock shape, and press Union. 10:14 Now, we name this layer, make it twice and 10:17 make sure it is in the same group as the green base layer. 10:19 We've now created quite a complex-looking shape just out of a few ovals and 10:24 rectangles. 10:29 For the rest of the icons, 10:30 I'll just import some I made earlier to keep this video brief. 10:31 But you can find them in the teacher's note download, 10:35 along with the tapable icons so you can see how they were made. 10:38 [BLANK_AUDIO] 10:41 We're almost finished with this screen. 11:02 All that's left to do is to update the fonts that we are using. 11:04 Right now it's Helvetica Neue which is the system font of IOS. 11:08 Whilst this is nice I think we should use a different font, Avenue. 11:12 So let's update our file. 11:17 Again we'll work our way from the top 11:18 to the bottom starting with the title bar text. 11:21 Hold down command and click the text layer in the canvas. 11:24 Click the typeface button in the inspector and select Avenida from the list. 11:28 You can type in this pop over to search for fonts too. 11:33 Now let's update the text in the cells. 11:36 Select the woke up text layer and open the font pop over. 11:38 You can see that all the titles and 11:43 times are using this font because of the shared style we gave the text earlier. 11:45 This is a huge time saver. 11:50 Let's update the font for the rest of the text in the document. 11:52 [BLANK_AUDIO] 11:55 And that's it. 12:01 The first screen of our app is completed. 12:02 The style for the rest of the application is already laid out 12:05 with our use of typography and colors. 12:08 So, all that's left to do is to create the next screen 12:11 which is a profile view before preparing the documents for export. 12:14
You need to sign up for Treehouse in order to download course files.Sign up