Adding Arrows and Using Stroke5:13 with Ashley Burke
This mockup will have an image carousel. Represent the movement from the carousel using arrows and stroke.
Don't forget to check out the Downloads tab for your project files
Let's add in our social media icons here at the bottom. 0:01 I'm just gonna select them. 0:04 And by the way, when I select more than one, it's a shift + click. 0:10 And then I hold down option and drag out as before. 0:17 And I want these to line up with this and this and 0:22 this, so I'm gonna pull it over here to my 50 pixel marker. 0:26 But I do think it's a little spaced out awkwardly, 0:32 so I'm gonna make them a little more cozy. 0:35 And let's evenly distribute that. 0:41 Horizontal Distribute Center. 0:46 Okay. 0:49 Next what I wanna do is add a couple arrows here on either 0:50 side to represent that this is a carousel. 0:55 And there is a fun way to do that. 0:59 We're gonna use the Line Segment Tool. 1:01 Try to find the middle of the image. 1:03 And what's nice is the smart guide actually tells us, like, hey, 1:08 this is the center of the image. 1:11 You're so good, smart guide. 1:12 We just drew a line segment, but 1:14 I realized that we're not gonna see anything, cuz we have no stroke or fill. 1:16 We wanna have a stroke color, and 1:21 let's use our swatches since that's what we've been using. 1:25 Let's try a lighter color. 1:31 Okay, and so now with this selected I'm going to go up here into our control bar, 1:34 and you'll see we have stroke and it's set to basic right now. 1:39 We're gonna find the arrow library. 1:45 So let's click here, and then go to Arrows > Arrow Standard. 1:47 It's gonna give us some more options. 1:54 And I'm gonna pick this second option here, so that will change it. 1:58 It looks like this might be the same color as our box so we can't see anything. 2:04 Yeah, that is a problem. 2:10 And I'll move it out so you can see what's going on. 2:15 So this is what we just did. 2:17 Isn't that great? 2:19 We drew with the line segment and 2:20 then changed it to an arrow, so now we don't have to draw that ourselves. 2:23 Of course, this one should be on this side. 2:28 So I'll hold down option, drag over. 2:35 I'm going to align these arrows to the edges here of the 100 pixels padding. 2:41 This one needs to be reflected, so I'll go to Object > 2:47 Transform > Reflect. 2:51 And we're going to be reflecting it over the vertical. 2:56 Hit OK. 3:01 Move that over so they sort of match up. 3:06 Great. 3:11 And last but not least, we're gonna add some more circles here at the bottom 3:13 that are gonna be an indicator of image selection. 3:19 So there are five images in the carousel, say. 3:22 One is going to be highlighted to indicate that there are more. 3:27 So I'm going to draw a tiny circle. 3:32 And right now this circle is just a stroke cuz that's what we have, so I'm going to. 3:36 You can click and 3:41 drag over to just carry that same color to your fill. 3:44 I'll have the stroke selected again and hit none. 3:50 And then I'll go back to my selection tool by hitting B and click off. 3:55 And you can see that's what we have. 4:02 And then I want to create five of these. 4:06 So I option dragged over and then I'm going to 4:10 duplicate my previous action, which is fabulous. 4:14 So, we'll do Cmd + D, and so it will copy it and 4:19 also move it over exactly the same amount. 4:26 So, we have one, two, three, four, five, perfect. 4:31 I want it to only look like one of them is selected, so 4:36 I'm going to make these a lighter grey color. 4:39 Let's try that. 4:41 No fill. 4:44 So I'm switching this back and forth. 4:47 We wanna just affect the fill. 4:49 And I'll click off. 5:00 Perfect, so now you can see that the first image is selected, 5:01 but there are multiple images. 5:05 Next, we are going to be adding in type. 5:09
You need to sign up for Treehouse in order to download course files.Sign up