1 00:00:00,700 --> 00:00:06,310 So now we have a basic looking wire frame for the first screen for our application. 2 00:00:06,310 --> 00:00:08,360 It's time to start styling it. 3 00:00:08,360 --> 00:00:10,270 We'll begin with the background. 4 00:00:10,270 --> 00:00:11,440 And I'd like to use a photo here. 5 00:00:11,440 --> 00:00:17,450 I have this one which has some nice color to it with no majorly light or 6 00:00:17,450 --> 00:00:18,700 dark points. 7 00:00:18,700 --> 00:00:21,950 It might be too distracting behind our text. 8 00:00:21,950 --> 00:00:26,430 To get us into the document I'm working with, I'll copy it, using Cmd+C, and 9 00:00:26,430 --> 00:00:27,170 close the window. 10 00:00:28,560 --> 00:00:31,080 I'll select my background layer, and paste it. 11 00:00:32,830 --> 00:00:37,658 As we can see, this image is pretty big, so let's zoom out to resize, and place it. 12 00:00:37,658 --> 00:00:41,658 [BLANK_AUDIO] 13 00:00:41,658 --> 00:00:43,900 I'm happy with the position of this. 14 00:00:43,900 --> 00:00:47,980 So I'll move it behind the background layer, and then adjust its color. 15 00:00:47,980 --> 00:00:50,470 I'll make sure it's fully black and at 50% opacity. 16 00:00:52,475 --> 00:00:57,005 Then, I'll apply a background blur with a radius of ten pixels. 17 00:00:57,005 --> 00:01:00,375 This setting can be found by going into the inspector and 18 00:01:00,375 --> 00:01:03,765 clicking the arrows by the Gaussian blur setting. 19 00:01:03,765 --> 00:01:06,210 In the menu, select background blur. 20 00:01:06,210 --> 00:01:07,060 There we go. 21 00:01:07,060 --> 00:01:09,630 It's looking good but just a bit dull. 22 00:01:09,630 --> 00:01:13,870 If we adjust the color on our imported image that could really help. 23 00:01:13,870 --> 00:01:17,910 So we'll select it and enable color adjust from the inspector. 24 00:01:18,940 --> 00:01:22,770 Here we'll boost up the saturation to make it more vibrant and 25 00:01:22,770 --> 00:01:24,100 adjust the brightness a little bit. 26 00:01:25,730 --> 00:01:28,490 Now that's done, we can select our bitmap and 27 00:01:28,490 --> 00:01:31,090 background layers before grouping them. 28 00:01:31,090 --> 00:01:35,120 If we zoom out, we can see the selection is quite large because of the image we 29 00:01:35,120 --> 00:01:39,600 are using and how anything outside of the art board is being excluded. 30 00:01:39,600 --> 00:01:40,960 Let's lock this layers so 31 00:01:40,960 --> 00:01:44,625 we don't select it accidentally when you click off of another element. 32 00:01:44,625 --> 00:01:48,170 Right-click the layer and select Lock Layer. 33 00:01:48,170 --> 00:01:51,020 Our title bar is looking a little spartan, and 34 00:01:51,020 --> 00:01:55,340 we need a button in here that would allow users to add to their timelines. 35 00:01:55,340 --> 00:01:59,970 The best thing to use here would be a plus button, so let's draw one. 36 00:01:59,970 --> 00:02:02,690 I'll zoom in to the top corner of the title bar and 37 00:02:02,690 --> 00:02:06,460 draw a rectangle 20 pixels high and 2 pixels wide. 38 00:02:09,190 --> 00:02:12,698 I'll be then sure to place this layer above the Navigation Bar. 39 00:02:12,698 --> 00:02:18,100 I'll press Cmd+D to duplicate it, and then, in the Rotate 40 00:02:18,100 --> 00:02:24,130 field of the Inspector towards the top, I'll replace the value of 0 with 90. 41 00:02:24,130 --> 00:02:26,710 With that rotated, I'll select the layer below and 42 00:02:26,710 --> 00:02:31,740 perform a union operation by the toolbar item and rename this layer to at. 43 00:02:32,900 --> 00:02:37,310 To place it exactly where I want, I'll move it to the right edge of the art board 44 00:02:37,310 --> 00:02:40,320 and nudge it left ten pixels with my shift and 45 00:02:40,320 --> 00:02:43,190 left arrow key before changing its color to white. 46 00:02:44,610 --> 00:02:48,720 If I zoom back out to look at the gray circles here on each of the rows, 47 00:02:48,720 --> 00:02:51,690 they need to have their own color depending on their type. 48 00:02:51,690 --> 00:02:55,230 For example, all check-in activity will be orange. 49 00:02:55,230 --> 00:02:56,630 So, let's style them. 50 00:02:56,630 --> 00:02:58,650 Let's zoom into the first item here at the top. 51 00:02:59,710 --> 00:03:03,650 Let's turn this fill into a green linear gradient. 52 00:03:03,650 --> 00:03:05,790 The top point is already selected. 53 00:03:05,790 --> 00:03:09,413 So I'll change its color, then select the second point and adjust that. 54 00:03:09,413 --> 00:03:17,793 [BLANK_AUDIO] 55 00:03:17,793 --> 00:03:24,660 Next I'll apply a drop shadow and adjust its values so y is 1 and blur is 3. 56 00:03:24,660 --> 00:03:27,840 With an opacity of 20, which we can edit under color. 57 00:03:28,950 --> 00:03:30,300 Now I'm happy with that. 58 00:03:30,300 --> 00:03:31,930 I'll zoom back out and copy and 59 00:03:31,930 --> 00:03:36,330 paste this style to the other layers before I edit their colors. 60 00:03:36,330 --> 00:03:39,680 In the menu bar I'll go to Edit and Copy Style. 61 00:03:41,630 --> 00:03:45,280 I'll hold Cmd and click the layer from the canvas to select it. 62 00:03:45,280 --> 00:03:48,800 I'll paste the style with Option+Cmd+V. 63 00:03:48,800 --> 00:03:53,251 I'll do this for the other two layers and edit the gradients so they're blue, 64 00:03:53,251 --> 00:03:54,339 red, and orange. 65 00:03:54,339 --> 00:04:04,339 [BLANK_AUDIO] 66 00:04:11,459 --> 00:04:16,190 Now all that's left is this big gray rectangle for our map view. 67 00:04:16,190 --> 00:04:17,820 I'll go to Window and select it. 68 00:04:19,490 --> 00:04:22,000 I'll copy using Cmd+C. 69 00:04:22,000 --> 00:04:22,770 Close the window. 70 00:04:26,320 --> 00:04:30,100 Select the box by holding down Cmd and clicking it. 71 00:04:30,100 --> 00:04:32,150 And then paste it with Cmd+V. 72 00:04:32,150 --> 00:04:34,560 The map should be selected. 73 00:04:34,560 --> 00:04:35,580 Hold down Cmd and 74 00:04:35,580 --> 00:04:39,900 click the gray rectangle layer that's underneath it in the layer list. 75 00:04:39,900 --> 00:04:43,240 Once done, press Mask in the toolbar. 76 00:04:43,240 --> 00:04:45,320 A new group has been created. 77 00:04:45,320 --> 00:04:50,210 With the rectangle acting as a mask, meaning that any layers inside this group 78 00:04:50,210 --> 00:04:53,130 won't appear outside the bounds of the shape. 79 00:04:53,130 --> 00:04:59,080 Let me open up the folder and zoom out so I can see all the points of my image. 80 00:04:59,080 --> 00:05:02,529 I'll hold down Option and drag one of the handles. 81 00:05:05,060 --> 00:05:07,830 I'll then press Cmd+1 to zoom back into my artboard. 82 00:05:07,830 --> 00:05:12,110 Let me just drag this image around into a slightly better position. 83 00:05:12,110 --> 00:05:16,110 And I'll lock this layer, so I don't accidentally select it again. 84 00:05:16,110 --> 00:05:17,220 I like this, but 85 00:05:17,220 --> 00:05:21,850 I'm not a 100% sure on the right angled corners that are on the left side. 86 00:05:21,850 --> 00:05:24,000 And I'd quite like them to be rounded. 87 00:05:24,000 --> 00:05:27,930 I could drag the slider that says radius in the inspector, but 88 00:05:27,930 --> 00:05:32,680 as you can see, this adjusts all the corners and we don't really want that. 89 00:05:32,680 --> 00:05:36,580 So we'll press Enter to take this shape into edit mode. 90 00:05:36,580 --> 00:05:40,910 The point in the top left corner is already selected now we're in this mode, 91 00:05:40,910 --> 00:05:44,310 and if you look in the inspector, there'll be a corners field. 92 00:05:44,310 --> 00:05:48,040 Select the text box and enter in 7. 93 00:05:48,040 --> 00:05:51,749 Click on the point at the bottom and change its corner radius the same way. 94 00:05:51,749 --> 00:05:54,228 [BLANK_AUDIO] 95 00:05:54,228 --> 00:05:57,580 Then press Enter again to confirm the changes. 96 00:05:57,580 --> 00:06:01,360 Now we need to include a route on here otherwise it's just a map. 97 00:06:01,360 --> 00:06:04,440 So let's draw this using the vector tool. 98 00:06:04,440 --> 00:06:09,090 Zoom into your document a little and then press V for vector. 99 00:06:09,090 --> 00:06:12,160 Start mapping out your route, following along roads. 100 00:06:12,160 --> 00:06:15,760 Don't worry about trying to make sure it's accurate or the right length. 101 00:06:15,760 --> 00:06:18,050 Just do whatever you feel looks good. 102 00:06:18,050 --> 00:06:19,420 It's only a mock up at this point. 103 00:06:21,030 --> 00:06:24,240 Press Enter when you've placed your last point. 104 00:06:24,240 --> 00:06:27,720 If we zoom back out, it doesn't look like much has happened at all. 105 00:06:27,720 --> 00:06:31,560 But we will need to adjust our border properties to get this to look good. 106 00:06:31,560 --> 00:06:35,950 I'll make the line thicker and give it a nice blue color and adjust the end and 107 00:06:35,950 --> 00:06:39,000 joint types in the pop over from the color icon 108 00:06:39,000 --> 00:06:40,940 to make sure there are no sharp corners. 109 00:06:42,770 --> 00:06:46,180 No we haven't forgotten about our tab bar at the bottom. 110 00:06:46,180 --> 00:06:49,977 Let's zoom into it and begin by changing some of these labels to something more 111 00:06:49,977 --> 00:06:53,038 appropriate for this app by double clicking on the text layer. 112 00:06:53,038 --> 00:06:58,834 [SOUND] I'll select the blue 113 00:06:58,834 --> 00:07:03,622 history text layer and 114 00:07:03,622 --> 00:07:12,199 change its shared style to tap bar text. 115 00:07:12,199 --> 00:07:14,587 I'll then do the opposite thing for 116 00:07:14,587 --> 00:07:18,120 the today text layer because this is the active tab. 117 00:07:18,120 --> 00:07:21,200 Just select tap bar text active from the list. 118 00:07:22,580 --> 00:07:26,850 I'll make this blue a white before making the other tabs white but 119 00:07:26,850 --> 00:07:28,470 with a 60% opacity. 120 00:07:28,470 --> 00:07:31,600 Because it is a shared style they'll all update magically. 121 00:07:34,080 --> 00:07:37,560 For the tab icons, I have some that I've made earlier. 122 00:07:37,560 --> 00:07:42,530 So I'll select that document, copy them, and paste them into my temp bar group. 123 00:07:47,180 --> 00:07:50,340 After you line them up, just delete the alter layers, 124 00:07:50,340 --> 00:07:51,760 as we won't be needing them anymore. 125 00:07:56,820 --> 00:08:00,540 Let's put some icons on our colored circles for the log types. 126 00:08:03,000 --> 00:08:07,560 For the woke up cell, let's draw a simple icon of an alarm clock. 127 00:08:07,560 --> 00:08:10,220 I'll draw an oval from the middle of the circle. 128 00:08:10,220 --> 00:08:13,560 So I'll press O, and holding the Option and 129 00:08:13,560 --> 00:08:19,130 our Shift key to ensure it's the same height and width at 20 by 20. 130 00:08:19,130 --> 00:08:21,540 Once done duplicate the shape and 131 00:08:21,540 --> 00:08:26,340 make it two pixels smaller on each side by holding down the same keys. 132 00:08:28,180 --> 00:08:32,190 After that select them both and press subtract. 133 00:08:32,190 --> 00:08:37,520 I'll draw a small six by six pixel circle and place it in the top left of the shape 134 00:08:37,520 --> 00:08:42,590 using the guides before duplicating again and moving over to the right edge. 135 00:08:42,590 --> 00:08:46,045 Next, we'll need a rectangle that's two pixels high. 136 00:08:46,045 --> 00:08:50,820 Its length doesn't matter, but I'll rotate it minus 45 degrees and 137 00:08:50,820 --> 00:08:52,550 move it to the bottom left of the shape. 138 00:08:55,020 --> 00:08:56,240 Duplicate this, and 139 00:08:56,240 --> 00:09:00,410 flip the layer horizontally using the button next to the rotate field. 140 00:09:00,410 --> 00:09:02,450 And drag over to the right. 141 00:09:02,450 --> 00:09:06,040 Before I draw anything else, I'm just going to select all these layers and 142 00:09:06,040 --> 00:09:08,950 perform a union operation on them. 143 00:09:08,950 --> 00:09:11,880 If I click the arrow to the left of the layer preview, 144 00:09:11,880 --> 00:09:15,120 I can see all the layers inside this shape. 145 00:09:15,120 --> 00:09:18,600 Now our alarm clock icon is looking a little bit broken, and 146 00:09:18,600 --> 00:09:20,250 we need to fix this. 147 00:09:20,250 --> 00:09:21,810 In order to fix this shape, 148 00:09:21,810 --> 00:09:25,960 we have to select the Oval 19 layer and drag it to the top. 149 00:09:25,960 --> 00:09:28,900 Now we need to give our little clock some hands. 150 00:09:28,900 --> 00:09:33,480 I'll collapse this group and draw in a 2-by-8 rectangle in the middle, 151 00:09:33,480 --> 00:09:36,400 adjust its radius, and then duplicate the shape. 152 00:09:38,350 --> 00:09:40,870 Now press Rotate in the toolbar. 153 00:09:40,870 --> 00:09:43,560 The layer has now gone into a rotate mode. 154 00:09:43,560 --> 00:09:46,998 So if you click and drag one of the handles, it will rotate. 155 00:09:46,998 --> 00:09:50,570 The little crosshair shows us that the shape will rotate in the middle 156 00:09:50,570 --> 00:09:51,885 around this point. 157 00:09:51,885 --> 00:09:54,000 We can pick this up and move it anywhere. 158 00:09:54,000 --> 00:09:56,570 So let's place it towards the bottom of the shape, 159 00:09:56,570 --> 00:09:58,560 in the middle of the clock face. 160 00:09:58,560 --> 00:10:03,690 If we drag a corner handle down towards the 4 o'clock position we can press Enter 161 00:10:03,690 --> 00:10:07,880 to exit the mode, and even make this line a little bit shorter in height 162 00:10:07,880 --> 00:10:10,480 by clicking and dragging the middle point. 163 00:10:10,480 --> 00:10:14,000 With that done, select the two layers that are hour hands, 164 00:10:14,000 --> 00:10:17,110 as well as the clock shape, and press Union. 165 00:10:17,110 --> 00:10:19,610 Now, we name this layer, make it twice and 166 00:10:19,610 --> 00:10:22,950 make sure it is in the same group as the green base layer. 167 00:10:24,840 --> 00:10:29,250 We've now created quite a complex-looking shape just out of a few ovals and 168 00:10:29,250 --> 00:10:30,440 rectangles. 169 00:10:30,440 --> 00:10:31,920 For the rest of the icons, 170 00:10:31,920 --> 00:10:35,410 I'll just import some I made earlier to keep this video brief. 171 00:10:35,410 --> 00:10:38,113 But you can find them in the teacher's note download, 172 00:10:38,113 --> 00:10:41,188 along with the tapable icons so you can see how they were made. 173 00:10:41,188 --> 00:10:51,188 [BLANK_AUDIO] 174 00:11:02,528 --> 00:11:04,910 We're almost finished with this screen. 175 00:11:04,910 --> 00:11:08,410 All that's left to do is to update the fonts that we are using. 176 00:11:08,410 --> 00:11:12,840 Right now it's Helvetica Neue which is the system font of IOS. 177 00:11:12,840 --> 00:11:17,200 Whilst this is nice I think we should use a different font, Avenue. 178 00:11:17,200 --> 00:11:18,810 So let's update our file. 179 00:11:18,810 --> 00:11:21,590 Again we'll work our way from the top 180 00:11:21,590 --> 00:11:24,320 to the bottom starting with the title bar text. 181 00:11:24,320 --> 00:11:28,420 Hold down command and click the text layer in the canvas. 182 00:11:28,420 --> 00:11:33,400 Click the typeface button in the inspector and select Avenida from the list. 183 00:11:33,400 --> 00:11:36,670 You can type in this pop over to search for fonts too. 184 00:11:36,670 --> 00:11:38,880 Now let's update the text in the cells. 185 00:11:38,880 --> 00:11:43,120 Select the woke up text layer and open the font pop over. 186 00:11:43,120 --> 00:11:45,370 You can see that all the titles and 187 00:11:45,370 --> 00:11:50,520 times are using this font because of the shared style we gave the text earlier. 188 00:11:50,520 --> 00:11:52,400 This is a huge time saver. 189 00:11:52,400 --> 00:11:55,488 Let's update the font for the rest of the text in the document. 190 00:11:55,488 --> 00:12:01,168 [BLANK_AUDIO] 191 00:12:01,168 --> 00:12:02,480 And that's it. 192 00:12:02,480 --> 00:12:05,090 The first screen of our app is completed. 193 00:12:05,090 --> 00:12:08,410 The style for the rest of the application is already laid out 194 00:12:08,410 --> 00:12:11,230 with our use of typography and colors. 195 00:12:11,230 --> 00:12:14,730 So, all that's left to do is to create the next screen 196 00:12:14,730 --> 00:12:18,060 which is a profile view before preparing the documents for export.