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
Create fluid buttons and use graphic styles and symbols.
Webalys Free Interface Design Framework - a Library of Graphic Styles, GUI Elements, and Vector Icons.
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
Now we are going to create some buttons.
0:00
We could simply draw
a rounded rectangle and
0:03
then place type over it
to represent a button.
0:06
However, if we needed to come back and
0:09
change that text later we would also
need to resize the rectangle beneath it.
0:11
There is a work around for this.
0:18
We're going to be creating what's called
fluid buttons where the rectangle
0:19
shape will adjust, size dependent,
on the text itself.
0:25
So, it's a pretty cool thing.
0:30
First, we're gonna have and where were
gonna have buttons is right here.
0:32
So underneath here we'll
kinda have a more info.
0:36
So if they like this event,
this looks cool,
0:40
they can click a button underneath
it that says more info.
0:43
So the first thing we need
to do is write the text.
0:50
And you don't wanna click inside,
we wanna new text.
0:54
More Info, there we go.
1:02
Let's make this regular, and smaller.
1:08
Maybe not that small.
1:15
Let's make it 18.
1:16
I'm gonna turn my guides back on for
a second just so
1:17
I can make sure I'm lining
up every thing up correctly.
1:21
So let's see.
1:25
Go to my selection tool.
1:31
Move this up, there we go.
1:33
A little bit more.
1:37
So now we have our type.
1:39
And now we're gonna do the fun, cool trick
that allows this to be a fluid button.
1:41
So what we'll do,
is go in to the Appearance panel.
1:46
Which is not open currently.
1:52
So I'll go Window > Appearance.
1:53
I want to create a new fill layer.
1:57
So right here is the character.
2:00
Now I'm gonna create Add New Fill.
2:04
So New Fill Layer.
2:06
You can see that the type just changed.
2:09
The fill color changed from gray to black,
and that's because the fill is on
2:11
top of characters, and layer order
does matter in the appearance panel.
2:18
So I'm gonna click and drag this fill
to underneath my characters, which,
2:22
it looks like it's still black, so
if we want to go into our characters and
2:28
just double check, and just make
sure the fill is the correct color.
2:33
Let's double click here on characters.
2:36
This takes us inside that character panel.
2:39
And you can see that the text
is the same color, so
2:43
I'm gonna change this fill
color from black to white.
2:47
Yep, then I'm gonna go back to Type and
select this darker fill.
2:54
So this darker fill is
beneath the white one.
3:02
We'll go to Effect > Convert
to Shape > Rounded Rectangle.
3:08
[SOUND] You see what that just did there?
3:15
[LAUGH] So, we have our preview on.
3:18
And remember, you want it to be greater
than 45 pixels for a touch device.
3:23
Granted, if they're using a touch device,
3:30
they might not be using this art
board size, but it's a thought.
3:32
So let's try 10 by 10, that looks nice,
3:38
I'm gonna hit OK.
3:42
I actually don't want my
button to be black though,
3:46
so I'm gonna change this
color to a nice gray.
3:52
Click off and
now we have a really lovely button.
3:59
And what makes it a fluid button
is that this rounded rectangle
4:06
is an applied effect to the type so
if I type more the button
4:11
automatically and
dynamically scales to adjust to it.
4:18
So that's, that's how that works.
4:24
Okay, now I'm gonna close out
this Appearance Panel for now.
4:29
Hide my guides.
4:34
So, that was great.
4:36
You can see we're really,
we're really getting somewhere now.
4:37
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