How To Use Highlights In Web Design

By Matt, December 15th, 2008 in Tutorials, Web Design | 22 Super Comments

One of the big trends in web design right now is using highlights and bevels to separate colors. This is a very good technique, as it provides a smooth contrast between two colors and makes for a great clean look. Even I have used this technique on the Spoonfed background. Notice how I used a 1 pixel line to separate the blue and the gray colors.

How/When To Use Highlights

Using this technique is a great way to separate background colors to make the design flow better. It gives off a very professional feeling when used in CSS.  It is best to use this highlight technique as a separator between two different background colors, or between headers and menus. Although these highlights are only 1 or 2 pixels high, they can really make a big difference.

Style 1 – 1 Pixel White Line

This trick isn’t at all hard and it is very easy to accomplish. The easiest and simplest highlight is just using a 1 pixel white line extending across the whole page. This style looks best on grays and lighter colors.

In Photoshop, use the horizontal Single Row Marquee tool to select a 1 px line where two colors meet. Then fill the select area with white.

The image below shows how I used a thin white line to divide the light blue and gray in the background. Take a look at the background to see how it looks when incorporated with the rest of the site.

Here is where I used a single white line in the Spoonfed Design background. Notice that I also used some shading above the line to add emphasis to the effect. Shading might be something to consider, but you would have to play around with it to see how it looks.

Style 2 – Bevel

Bevels, 2 pixel lines consisting of a dark and light line, are another excellent way to contrast between two different colors. If you want to separate two similar colors, such as a white and a light gray, use a bevel to make a distinct divider. This isn’t the only place to use it, though.

Here I used a bevel as a divider between gray and white. I kept the single white line, but added a line above the white line. Notice that the second bevel line is a darker gray than the other gray color. It is important to have a slight contrast to make the bevel more distinct and flow better.

Using the bevel with a gray and white can create a professional minimalist look but at the same time, it is simple and easy.

Style 3 – Highlight On Bright Colors

So far I have explained how to use this effect on minimalistic colors, but what do you do with bright colors with high contrasts?  When making a divider between two bright colors you can’t use white because it wouldn’t flow nicely. To solve this problem, you must use a lighter shade of the bottom color. For example, I used a bright green above the darker green to separate the green and dark gray.

Here is the highlight in use. If I had used white instead of the light green, it would look out of place. Although small, the highlight can add a lot of energy to the design. These are the colors Envato used in their corporate page: http://envato.com/.

Some Examples of Bevels

Here are a few examples of how bevels in highlights were used. Make sure to visit the website to see the highlights in better detail.

Envato

The guys over at Envato use this technique at least once in each of their sites. I think they influenced this becoming such a big trend.

Freelance Switch

Take a look at Freelance Switch to see how Envato uses bright highlights and bevels.

CSS Mania

CSS Mania uses a single line highlight across the top of the background. It is a great example of the single line technique.

Donor Tools

Donor Tools uses the bevel on the bottom of the navigation. See how they used a bevel as a separator because the background color was white.

Designchuchi

Designchuchi uses a few bevels and highlights to make for an excellent clean look. The highlights help the blues and grays to flow together.

Throw In Your Two Cents.

Please, feel free to leave a comment about your thoughts, opinions, or whatever.