I recently was in need of generating a glass effect for a site I was doing work on, and found a rich tutorial over on Evan Roberts’ blog (http://www.evroccck.com/web-design/fireworks-8-tutorial-create-a-button-w-glass-effect/) and  have expounded upon it a little bit to add some different feels to the end results.  Sometimes, people say creating images such as this are old fashioned web design ideas (dating to just post dot.com bust) and are not slated generally for Web 2.0.  Then others will say as long as it is asthetically pleasing for your target audience and such that this type of web graphic is great.

I say what ever you want to use that is appealing to your target audience is what you should use.  In this case I had a need to generate some Glass Goodness effects for a site layout (which I will be releasing a template based upon this just shortly).  The following will be a step-by-step, illustrated guide to creating some Glassy Goodness, focused on buttons.  There will be another tutorial that will focus on Glassy Goodness for use in other areas of a web site, such as a header or footer.

Step 1: Create a new Fireworks document, in this case I created it 400×400 pixels and 72dpi.

Step 2: Choose the rounded rectangle tool so that we can draw our rectangle that will be the base color and shape of the button.

Step 3: Draw the rectangle, any size is fine at this point, the next step will show the gradient that we will use.

Step 4: Set the fill to be a Linear Gradient and select any two complimentary colors, the colors we used for the base image are show here.  To set the colors, you will click on the color cube (swatch) next to the gradient fill type (linear) as shown in the second image below.

Step 5: Adjust the gradient fill to go dark color at the top of the rectangle to the light color at the bottom (you can try other combinations as well, and we have included at the end of this tutorial a collection of colors that we used).  See the image below for how we set ours up, please note the gradient fill starts at the top of the image and stops at the bottom of the image - this is important to get a clean linear effect.

Step 6: With the rectangle selected, we want to click on the Filters + button in the property inspector, and choose Shadow & Glow -> Inner Shadow and use the settings of 0 distance, 65% opacity, 4 softness, 315 angle.

Step 7: We will draw another rounded rectangle directly over the top of the existing rectangle making sure it is about 35%-50% of the original rectangles height, and that it is aligned to the very top of the existing rectangle.

Step 8: For the purposes of this tutorial, we will set the roundness of the corners to the fullest roundness possible.  Depending upon the application that we would be using this for, we may need to individually adjust the corners, which Fireworks will allow us to do, however for this we want them to be all the same and to match the top of the existing rectangle roundness.  It is important to note that when you hover over the yellow box that says click to switch corners, you are actually going to click and drag the control to adjust the roundness - dragging in makes the corners more round, dragging out makes them more square.  If you simply click on the control you will make the corners change from rounded, to beveled, to inset.

Step 9: In our “glassy goodness overlay” rectangle (the one we just adjusted corners on) we want to adjust the fill to be black and white rather than other colors.  Also note, that we adjust the linear gradient as in the previous rectangle by starting the dark color at the top (black) and light color (white) at the bottom of the rectangle.  Your image should now look as the one below that we have zoomed in on for detail.

Step 10: We need to now set the properties of the top rectangle to be transparent over the top of the original rectangle.  To do this we will set the opacity level and the layer setting to screen.  Some tutorials say to not adjust the opacity level, and really it is a personal decision on that - and my personal feeling is to adjust the opacity to give a bit of a softer effect, usually setting it between 15-40 in the opacity.  The settings I used for this tutorial are below.

Step 11: You sould now have the following image, if you have done the steps as they were written, if you have added to or changed some of the steps you may have a different image and that is okay, as long as it is the desired effect you were going for.  If not, try again because when I first started trying to make glassy buttons it took some experimentation.

I have also includled below a sample of colors to show that you can change the colors of the button by merely changing the color of the linear gradient on the first rectangle that we drew.  You can experiment with two and three color combinations, as well as making the rectangle be one solid color.

If you have any questions or comments about this tutorial, feel free to create you an account and leave a comment about it.

Tweet This