In order to make your design pop out a bit more in a certain area, we use highlights in our designs.
It will make your web buttons look stylish and your web backgrounds look sharp and modern. You will learn
two types of highlight techniques after reading this tutorial, the simple and advanced highlight.

Here are 2 key things you have to learn first :

1.) The properties panel , its important to master this panel , especially with dealing with the Width( W ) and Height ( H ) areas to create our highlight lines faster and more accurate.

2.) The gradient panel , we will be use linear gradient in our highlights , knowing how to edit them
will give the desired color/s you want.

So that’s about it, lets begin making a simple type of highlight suitable for a web button.

Simple Highlight

1.) Suppose we have this simple rectangle gradient button here, and we want to make it look sharper .

2.) We need to create a solid line using the rectangle tool, the width must be thesame with the
gradient we created. As for the color , we choose white. Or you must choose a color that is lighter
than the gradient, for example the gradient color is dark-red to black. If we put it on top, in the dark
red portion, our highlight color must be lighter than dark red, lets say medium red for it to be
visible.

3.)Align it to the top of the gradient.

4.) Scale both the highlight and gradient smaller to make them look like buttons. You will notice the highlight of the 2 small buttons
are different, one has a height of 2 , while the other has 1. You can also change the color of the highlight , or even reduce its opacity.

5.) So there you have it, a simple highlight tutorial in 4 easy steps, check the examples below for the different looks of this technique. Modifying the highlight color , changing its’ opacity , changing the height and even adding another highlight in the bottom.

Click here to download the adobe fireworks source files used in these buttons. > simple highlight

Advance Highlight

1.) We need to create a rectangle with a linear gradient, the gradient colors should be both white (

although you can change them in the next step ).

2.) The yellow circles represent the opacity of the color below it , it starts with a default value of

100. While the green circles are for the colors of the linear gradient , both colors should be white.

Click on that middle green circle and and choose white as the color, and the yellow circle above it. This process a 3rd gradient color in the middle and let’s you change its’ opacity if needed.

3.) Change the opacity value of the left and right gradient color, set it from 100 to 0, this would

make them transparent. For the middle color, check if if the opacity of the white color is set to 100. Notice the

changes on the gradient below.

4.) Now comes the tricky step, if you notice when selecting a gradient , a circle, black line and a

square appears. The circle controls the position of the gradient, while pulling the square extends

the gradient, the while line can serve as a guide if your gradient is straight or not.

In the topmost image is the default placement of our gradient , the square is below the circle, we

need to move the square to the right of the circle, make sure the line is straight, sometimes you will

see a crooked line if you don’t get this right.On the 4th image, just move the circle to the left , while pulling the extender to stretch the gradient.

The finished result is the 5th image with a height of 15.

Just like the simple highlight tutorial , if you

wish to change how the highlight looks, just change the height, you will notice the ideal height

would be around 1 to 4, although you can use a bigger value for larger images.

When placing the highlight on your designs, dont put it so close to the edge like the simple

highlight technique, instead give it some 1pixel or more space to make it stand out even more. You can see the space in the first image I used in this post or if you notice in this site, i used thesame technique in the navbar.

Click here to download the source file I used > advance fireworks website highlights

Feel free to ask anything if you have questions.