Just a few short years ago the gloss, or shiny look took the world of web interface design by storm. From a visual design perspective it became synonymous with web 2.0 – the modern crème de la crème of internet buzzwords! But is the glossy button falling from grace? Perhaps, but that won’t stop us from exploring some fun Fireworks techniques as we create some glossy buttons in Adobe Fireworks.
Before we get started: I’ve switched to Fireworks CS4 for these tutorials for several reasons, the biggest being the text engine bug introduced in the CS4 product release has been fixed. This is a pretty straightforward tutorial, but in the future if there’s any major differences between CS3 and CS4 and how my tutorials relates to the versions I’ll make note of it.
Getting Started
Lets create a new file by going to File > New and setting our canvas size to 1000 pixels wide by 1000 pixels tall. Set your canvas color to white and ensure your resolution is at the standard 72 pixels/inch. Set your zoom to 100% by holding CTRL and pressing +/- or using the scroll wheel on your mouse (if you have one). Now select the rectangle tool from the vector section of the tools panel on the left. Lets draw a square in the center of the canvas. To force the shape to stay truely square, or “constrain the proportions”, you’ll want to hold down the Shift key as you draw the shape. Depending on what you were doing with Fireworks last time you used it, your new square could be any color. Lets change it to blue by selecting the black pointer from the tools panel and clicking our square to highlight it. In the Properties Panel at the bottom you’ll see the fill color of the selected object. Click the paint chip next to the paint bucket icon and enter this HEX code into appropriate box at the top of the pop-up: #0B4E80. Press Enter to save the color change. Before we move on let’s make our blue square “rounded” by adjusting the Rectangle Roundness setting in the Properties Panel. Set this as you see fit, but I’m making mine at “8″.
You should have something like this so far:
Layers of Fun
Before we go much further, make sure you’re looking at and are familiar with the Layers panel. If you press F2 on your keyboard this will toggle Fireworks Layers panel on and off. It’s important to understand how layers work in Fireworks (or any graphic design program for that matter), so if you need to brush up I suggest you press F1 to bring up the help screen, search for “layers” and read the section on “Working with Layers”. Why am I worried about your understanding of this concept so much? Because we’re going to be building the effects of our glossy button one on top of another using layers.
With the layers panel open click to highlight our blue square. Now press CTRL-C to copy our square and CTRL-V to paste a new copy onto our canvas. You won’t notice much on the state, as Fireworks will copy the new vector shape directly on top of the existing one. You will however notice a new blue square at the top of the layers panel on the right.
Now, select the ellipse tool (same place you found the rectangle tool, hold down your mouse click to see all of the shapes) from the tools panel on the left. Now draw an oval over the top half of our blue square. Change the color of the oval to anything other than blue for now, and then adjust the opacity to 50% in the property inspector.
Mine looks like so:
I use the opacity slider quite often just to align and manipulate shapes. Since I can see both vectors now along with how they overlap, it allows me to figure out where I want everything.
Making sure you have nothing selected already by clicking a blank area on the canvas. Now click the top blue box, hold down the shift key, and then click the oval on top so both shapes are selected. In the top menu click Modify > Combine Paths > Punch. If you did it correctly you should have two blue shapes left, the top most having the shape of the oval cut out of it. Select that shape and change the fill type from solid to linear. Your gradient will most likey start out wonkey, so click the color chip and set the left (top in this case) to #073252 and ensure the right (bottom) color is set to the original blue #0B4E80.
You should end up with something like this:
Get your Gaussian Blur On
Before we start this step change your canvas color to black. To do so, click a blank space on the canvas and adjust the “canvas color” selection in the properties panel in the lower left to the appropriate color chip. Now select the ellipse tool from the tools panel on the left and draw an oval in the middle of our square shape. Change the color of the oval to white (#ffffff), and then add a Gaussian blur by clicking the plus symbol in the filters panel at the bottom of the screen and selecting Blur > Gaussian Blur. I set my glow to 40, feel free to play around with yours as you see fit. Flatten the new blurred shape by selecting it and clicking Modify > Flatten Selection.
Marquee Effects
Select the black pointer from the tools panel on the left. If you click the towards the edge of the rear blue square (not the half square we created) you should be able to highlight it. Now copy (Ctrl+C) and paste (Ctrl+v) a duplicate square on top of the existing one. With our new square copy highlighted, go to Modify > Convert to Marquee. You now have a “marquee” or mask drawn on your canvas in the shape of our original rounded rectangle. This means that everything inside of the marquee can be manipulated with our tools, and everything outside is protected. Lets inverse this effect go clicking to select > select inverse. You’ll now notice that our marquee is drawn around not only the rounded square but also the canvas itself. We can now delete the “glow” that extends outside of our square shape. Now press Ctrl+D to remove the marquee. Click our new timmed glow bitmap that’s on top of our square and move it down behind the half-square using Ctrl+Down Arrow. While the glow is still selected, change the opacity to 80 in the properties panel. You should end up with something similar to this:
Using some of the techniques we went over in this short tutorial you should be able to create some nice modern graphic web elements. Feel free to experiment and post back here if you run into any questions!
Here’s the link to my final Fireworks PNG.
Tags: adobe fireworks, Fireworks, Gaussian Blur, Gradient, Masking, Raster, vector
