Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Adobe Illustrator for Web Design!
You have completed Adobe Illustrator for Web Design!
Preview
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