Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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
Helpful Links
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up