Yesterday I created a gel button for a customer’s website so I decided to turn it into a tutorial. I did this with Adobe Fireworks CS3 but you’re probably going to be able to do it with Fireworks MX or 8. Now I don’t pretend to be an advanced graphic designer; I mostly do basic stuff. But when I need more complex graphics, I rather outsource it.
- Start by creating a new canvas. The size doesn’t really matter as long as its large enough to hold the button you want to create. 200×100 should do the job.
- Select the rectangle tool and create a drag a rectuangular shape of 190×35.
- Set the rectangle roundess to 100.
- Set the gradient fill to “Linear”.
- Move the gradient anchor points so that it goes from top to bottom.
- Change the gradient colors so that it goes from light blue to dark blue.
- Select the rectangle, copy it and paste it so that you’ll have two identical buttons. You may want to give them different names so that you won’t confuse them.
- Hide the layer named “MyGelButton” so that you can work on the “Reflection” layer.
- On the “Reflection” layer, change both colors to white and set the opacity of the left side of the gradient to zero.
- Now make the “MyGelButton” layer visible again and send it behind the other one.
Your image should look something like this:
- Scale the “Reflection” layer by right-clicking on it and selecting “Scale” from the “Transform” options.
Then simply drag the bottom anchor point up.
- Duplicate the “MyGelButton” layer again (copy + paste) and name it “Blur”. Send this layer completely to the back.
- Select the layer named “Blur” and add click on “Filters => Blur => Gaussian Blur”.
- Set the blur radius to 4.7.
- Set the opacity of the “Blur” layer to 60.
- Your final image should now look like this:
Top Commentators