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.

Four: We’re ready to make our glass. Set your foreground color to 1b6fa4 and use your rounded rectangle tool to create a second box, inside the metal background, which will become our glass. Right-click and Rasterize this layer.

Five: The first step in really making this look like glass is to create the illusion that it is sitting inside of the metal. To do that, go to your layer styles (Layer, Layer Styles), and choose “Bevel & Emboss”. Most of the settings will remain at their default. You need to change “Style” to “Outer Bevel”, and the size to “3 px”. Everything else is left alone.

Six: Believe it or not, we’re nearly done. Our next step really starts making the glass look like glass. Once more, hit your layer styles. This time, choose “Inner Glow”. Change the Opacity to 100%, the color to 3fb1f9, and the Source to Center.

Seven: Ready for the final glass touch? Set your foreground color to white, and use your rounded rectangle shape tool to create a thin box in the upper third of your glass. Right-click and Rasterize this shape. Then, click “Filter”, choose “Blur”, and click “Gaussian Blur”. Set the size to about 19 pixels.

Eight: Our very last step! First, type the text you want to show on your header. Then, duplicate the text (Right-click, Duplicate Layer). Now, click “Edit”, choose “Transform”, and click “Flip Vertical”. Lower the Fill of this layer until it is “ghosted” and you end up with something like Illustration 01.