Web Design: Pete's Multi-purpose Apha-Gradient PNG

This one is a bit more technical for web designers. This came about when I was redesigning the GetRight website (http://www.getright.com/) and wanted to make nice looking page section titles that could have different looks but without creating a new graphic for each one.

So I created a simple white-to-transparent gradient PNG that I could use for all the title backgrounds on each page. These titles are simply CSSed h1 through h6 tags. 1-3 being green variants from largest to smallest and 4-6 being the gray variants.

You can see it in action all over the site, but this page has several different types in close proximity:
http://www.getright.com/new.html
Both the green section titles and the gray year titles are using the same graphic overlay on different background colors. Different titles also are of different heights and the various ways the image is clipped (by adjusting the image alignment--or not) can also effect each look.

During the design of the site, I wasn't sure if we would use one color-scheme for the entire site, or a different one for each section (blue for download pages, green for support pages, etc.). As it turns out, Michael (the owner & my brother) liked the green titles so much that we used them on the entire site--but if we ever change our minds in the future, we need just change a few lines in the CSS file to switch the color scheme for some (or all) of the site without the need to change or re-create any of the title graphics.

In writing this blog article, I realized that this concept could have been used for buttons and other navigation pieces of the site as well. I wish I'd thought of this earlier (and I may now go back and make this change), as it would have greatly reduced the download size for some of the more graphically-intensive pages.

Here is a quick sample I made in just a few minutes in Photoshop:



This image consists of two gray-to-transparent gradients creating the texture for the top and bottom of the button (starting at about 70-80% opaque at the top and bottom edges), and then a black border gradient starting at 50% with the Photoshop 'bevel' effect on it just to mix things up a bit.

NOTE: Since this sample is just a quick thing I threw together, I didn't bother with rounded corners. Rounded corners would need to blend into an opaque mask (white or whatever the page background is) so that the background color you set later doesn't bleed around the edges. You've been warned.

You may be thinking "Hmm, that image doesn't look very exiting." And you're right, it doesn't...yet! But look here:

These all use the same graphic!

The only difference is the background color of the div or span containing the image. This concept can be used for many design elements that can be quickly color-coded (highlighted, customized, activated, etc.) to meet your needs.

The image above is 1.93k and is used 16 times on this page. But you only needed to download it once! If each color were a different graphic it would be around 31k combined download, and 16 server hits instead of 1.

If you look at the GetRight home page (http://www.getright.com/) I could have saved a lot of server load by using a system like this for each of those big buttons on the page. A project for next week...or sometime...