Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Adobe Illustrator for Web Design

Well done!

You have completed Adobe Illustrator for Web Design!

Sign up for Treehouse Back to Library

Buttons

4:41 with Ashley Burke

Create fluid buttons and use graphic styles and symbols.

Webalys Free Interface Design Framework - a Library of Graphic Styles, GUI Elements, and Vector Icons.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related 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 up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up