How to Create a Plastic Button in Fireworks CS3
I really like to use Fireworks to create buttons and in this video tutorial I’ll show you how to create a plastic button that can be placed on website or on any other application.
So first of all what we want to do is, we want to draw a rounded rectangle. I’m going to go ahead and use the rectangle tool to do that. So I’m going to select that from the toolbox and then I’m going to just draw my rectangle and you could modify the size later. So I’m going to go ahead and make a pretty big one, so you can see it easily. And then down on properties I’m going to set the rectangle roundness to 100% and then press ENTER and there I have my plastic button and I have some totally round edges to it.
So what I’m going to do now is that I’m going to change the fill to whatever color I want, pick this bright color, and then I’m going to change the opacity. And I want to make this slightly lighter. So I’m going to change the opacity to 85%. Press the ENTER button and I have a slightly lighter opacity now. So what I want to do next is I want to actually get another one of these exactly like it. So make sure that you have this selected. Use your pointer tool if necessary. Go up to edit and then go to duplicate. And go ahead and move the second one out of the way a little bit and we’re going to go back to the first one. Click it to select it. And now we’re going to apply a gradient fill. So we’re going to go up by the fill category and we are going to go to gradient and then choose linear.
Then go back down to fill category again, go to fill options, go to edit and the color, one of the colors, it doesn’t matter which one, you need to pick a lighter shade. So I’m going to keep this orange and I’m going to change this purple color to a lighter orange color. And this is going to give us a nice reflection to make it look more like plastic. So I’m going to go ahead and click with my eyedropper to get that color, go back here and I’m going to go to my color picker and then I’m going to slide upwards so I can get a lighter color and then click OK. Then click off this box to close it and then again, to close the other one.
Now, what we want to do is we want to have this light source, this plastic look coming from the bottom of the fill. So we’re going to need to rotate. To rotate, grab a hold of the square of the gradient modifier and then we’re going to go all the way up and then to move it you grad a hold of the circle. Let’s try that one more time and we’re going to place it where we want the square about in the middle of the button and we want basically just a nice subtle white near the bottom, a lighter color. And you can always change your gradient if you’d like and make that even lighter and that will give you an even more plastic look.
So now we’re going to select that second plastic button that we had created and we are going to change the fill to white and then we’re going to apply a blur to it, make sure that it’s still selected, go to filter, to blur, and then your Gaussian blur. It’s got to say it’s going to convert it to bitmaps, click on OK. Then for blur radius we’re going to go ahead and we are going to set it at five and then click on OK and of course the different blur is going to give you a different look.
Now, we’re going to take it and we’re going to place it over our first button, release it and then we’re going to change the opacity and I’m going to change the opacity to 35%. You may need to adjust it a little more. Click off of it. And I have a pretty good plastic button so far.
There is one extra thing that I want to add and that is that I want to add a reflection to it. So I’m going to make a reflection look like it’s coming off of the top. So to do this, I’m going to go ahead and draw another rectangle. I’m going to use my rectangle tool again and I am going to draw another rectangle right at the top and this is going to be thinner and smaller just like that. I’m going to set the edge around this to a 100%. Make sure that the fill is still white. I’m going to apply another blur to it. Click OK. And this time I’m going to set it just to a 2% or a 3%, you want it to be pretty subtle, click on OK.
And then you could change the opacity. And I’m going to change the opacity to 30%. Actually I’m going to increase it to 45%. At this point, you can go back and you can change the size of the reflection. If you want you can go back and you could a blur. I like to move it exactly to the top in the middle of my plastic button, click off. And there you’ve created a plastic button in Fireworks.
Transcription by:
Scribe4you Transcription Services