Glass Reflection Website & Blog Headers: 8 Steps to Custom Headers

In the end, it doesn’t matter what type of website you have - you are going to want something that is clean, trendy enough to catch the eye of your visitors, and be easy enough to create that you aren’t spending the next three years updating its look. One of the major design elements in any website tends to be its header for this very reason. Want a header that will fulfill the rest of the requirements? Take a serious look at glass; this style has been around a while for a reason - it looks great.

This tutorial will walk you through the creation of a website or blog header that features glass reflections. You can follow along in any version of Adobe Photoshop from 7 through the current CS2, and bar a few changes in menu wording, even in the free GIMP.

You may wish to reference Illustration 02 while performing this tutorial, as it offers screenshots of the steps to be performed. It is not as comprehensive as this guide, though, so you won't want to rely on it solely.

Making Glass Headers

One: Open a new canvas in Photoshop, sized appropriately for your layout (the one I’m using is  500 x 300 for use in the tutorial). Check that it is in RGB color. Set your foreground color to dark gray and grab your rounded rectangle shape tool to draw out a box that mostly fills your canvas. Rasterize this shape (Right-click its layer and choose Rasterize).

Two: With your rasterized shape selected, hit your layer styles (Layer, Layer Styles) and apply a white to gray gradient overlay, and then an Inner Shadow with default settings.

Three: Now, we want everything to be one solid layer and the background, instead of a shape with layer styles applied and the background. To do this easily, create a new layer (Layer, New, New Layer) and turn off your background by clicking the eye icon beside it. Then, right-click your new, blank layer and choose “Merge Visible”. This will place your layer styles into the shape, where they won’t be affected by cutting or anything else.