Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
I like button symbols. They are an efficient way to generate up to four visible states of a Navigation button: Up, Over, Down and Over While Down, and you can even add a hyperlink to them in the process. Almost any graphic or text object can become a button. Once you've created a single button symbol, you can reuse it over and over again for navigation without having to build the bunch of new graphics. Each instance of a button can have its own custom text, URL and target without breaking any links to the original symbol. And the button instance is self- contained, meaning that all the graphic elements and states are kept together.
So as you move the button around on the screen, you're actually moving all the different states to go with it. Let's see how to build a button. So I've got my exp_buttons.png file open here, and this was originally kind of a stylesheet for the client so they could see what the different navigational buttons would be like and what their different states would look like. And that's all well and good from the standpoint of being able to see them on one screen, but in my case, I want to turn one of these into an interactive button. The one I'm going to work with is the big Explore button that we see here. So I'm going to select it, and to create the button symbol, we can do this couple of different ways.
We can go to Modify > Symbol > Convert to Symbol, or we can right-click on the graphic and choose Convert to Symbol, or we can even press F8. That will bring us right to our Convert to Symbol dialog box. So the first thing I want to do is give this a name. I'm going to call it explore_btn, and I want to set this as a Button symbol. Don't worry about Graphic or Animation symbols in this case. I won't bother enabling 9-slice scaling or Common Library either.
I'll just leave those as they are, and we'll click OK. As soon as I do that, you'll see that I get that little cross here again inside, indicating this as an instance, and it's related to a master symbol. Now if you take a look over in the Document Library, you'll see that explore_btn is now listed in the Document Library for this document. Now, one of the thing I'll point out: We don't see it at the moment, but if I click on, in my Web section here, and activate my slices, you'll see that that button symbol is surrounded by a green rectangle.
This is what's referred to as a Web Slice, and this is needed in order for Fireworks to generate four different states to the button. And the slice is needed primarily if you're planning to add a hyperlink or a target or alternate text to this button, and then export it out as HTML images. We're going to hide the slice away from you for the time being though. What we want to look at here is creating the actual button symbol itself. We got our starting point. We've got our Up state. I'm going to double-click on the symbol, and you'll see we're going to edit in Place mode, and if you take a look in the Properties panel, you'll see down at the bottom, we've got a couple of different options here.
We've got something called States, and currently it's showing the Up State. And this gives us the ability by clicking on that dropdown menu to select or create up to four different states for that button. Now, I'm going to click on the Over State, and as soon as we go to that, you'll notice that everything disappears, because there is nothing currently on that state of this button symbol. We need to actually add something. Now, you can import a graphic to use as that Over State, but the easiest thing to do is to choose Copy Up Graphic, and that puts in an exact copy in exactly the same place as the original Up State of the button.
Now, it's also exactly the same button. It looks no differently from the original. So, we're going to make use of some of the other colors that we see listed, down inside of these other versions or other states of the button. So, I'm going to select my Over State, and this is a grouped object, meaning that there are several elements in here. We've got the button shape. We've got some text. We've got a highlight vector shape. We've got a star shape. All these things are actually separate elements. So, if I click on my Subselection tool, I can then go ahead and click on, for example, my actual button and what I want to do here is make a change to the fill.
Now, down below where my red button is, you'll see some information has been added in here. This is the fill color that was used to create the gradient for that Over State, C2282E. So, those are the numbers and letters we have to remember. That's a hexadecimal color value. I'm going to go into my Gradient Editor, and I'm just going to click on that blue color. We're going to change that to that red color, the C2282E. So, once the Color Picker shows up, I'm just going to select the hexadecimal value that's in there and type in C2282E, and I'll see I get that nice bright red, and I'll just press the Enter key, and that color is now added to the gradient, the other color is removed.
And you can see now our Up State looks like this. We've got that red gradient happening. Now, the other change that's happening here is the star. So we're just going to click on the canvas somewhere to basically close down the Gradient Editor, make sure my Subselection tool is still active, and I'm going to click on my star. And all I want to do here really is just fill it with white. So, I'm going to go into my Properties panel and change the color to white. The last thing we're going to do, you'll notice we have a stroke around that overall button, and we don't have a stroke on the rollover effect.
So, I'm going to click on that one more time and go into my Properties panel and set the color to none. So, we have no stroke on the mouse over or rollover effect. So, now we've got an identical version of what was listed out in flat format before. So, now we've got an Up State and an Over State. We're going to add in our other two states as well. Now, it's really important, in order to get to the next state, that nothing selected on the canvas when you do this. So I'm going to go back to my Over State and choose Down and again, it's empty because there is no graphic there to begin with.
I'm going to choose Copy Over Graphic. It brings up my red version. In this case, I want to add the colors that are part of the Hit State. Okay, so let's see here. We've got a yellow gradient, we've got a stroke around the button and our star, again, is hollow in the middle. So, I'm going to go and select that buttoned shape, go to my Gradient Editor, and we're going to change the color to DADA21. That gives me my yellow, just press the Enter key and press the Enter key again, and we'll collapse down the Gradient Editor.
Also, I want to add in my stroke. So, I'll go to my Stroke section in my Properties panel and in this case here, actually I better take another look at that color before I go that far, CBC59B. And I'll just change that color to those values, CBC95B, and now we have a stroke applied as well. So, it's coming together quite nicely. Our last one is our Selected State, so it looks a little bit different than the other ones. It's kind of almost a hollow button with a stroke.
Oh, I forgot one last thing, my star no longer has a fill, so we'll get rid of the fill color there. There we go. So we've just got the stroke. Okay, so our last bit is our Over While Down State. So, I'm going to choose, from my States menu, Over While Down and, again, there is nothing there to begin with, so we'll copy the Down Graphic, and we'll make some changes. Now, I'll just double check on my settings here. There is no fill, and the stroke is kind of a light gray color.
We've also got our red star this time. So, we'll select our main button area. We'll change our Fill to None. And we're going to add in our stroke color. It's going to go into my color picker and type in DOD2D3. There we go. Nice light gray, all right! Now, one other step, of course. We've got to change the color of our text and our star because they are kind of invisible at the moment.
So, I'm going to move in with my Subselection tool and select the text, and I'm just going to change that text color to black. The star; same kind of idea, just look for it and highlight it and change the color of the star to a nice, bright red, like so, and that gives us our overall look.
Now, I think the star is a bit too bright. How about another color? There we go. And that gives us our overall button states. So, I'm going to double-click to get us back to our regular view here. One of the nice things about working with Fireworks is you can preview these things and see how they are going to interact. So what we'll do is we're going to preview this button state before we wrap up this little exercise. I'm going to go to my Preview Window here, which you might remember from optimizing graphics.
I'll grab my Pointer tool, and I'll move my mouse over my button, and you'll see I get the different states: the mouseover state, and if I click I get my yellow state, and if I mouse back over again, I get my selected state. So, I get all of the range of my buttons by previewing them inside of Fireworks, so I get to see exactly what's what. And actually a good catch here is you notice I still have that white highlight showing up inside of the final state. So, I'll go back to my Original View here.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.