Buttons4: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.
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