Glassy Website Layout

If you are viewing this tutorial, I am going to assume that you have already been through part one of the Glassy Website Layout Tutorial . If not, please go take it before continuing. In this part of the Glassy Website Layout Tutorial, I will teach you how to make any final touches that may be needed in your content box before putting them into an actual layout form. We will be adding some stylish text, as well as glowing lights to our website layout.

Adding the text

First, select the horizontal type tool ( ). Select a stylish font (possibly tech related). If you are not satisfied with any of the fonts you find, you may want to visit dafont.com and download some of the fonts there. I will use the font "Querround". Click somewhere on your document, and begin to type the title of your content box (such as the word "Content"). Change the size of the font so that if fits the top of your content box nicely:

Set this layers blending mode to Overlay. This will give your font a great effect with the reflection in the background.

Creating the Glowing Lights

Now that we have the text on the left of our content box complete, let's add a little something to the right of our content box. Select the Brush Tool ( ) from the toolbar in Photoshop. Select a brush and set it up as shown below:

In a new layer, create a tiny dot somewhere in the top right of your content box.

Now, apply the following blending options to this layer:

Outer Glow

Blend Mode: Normal
Opacity: 100%
Color: Light Blue such as #C7DAFF
Size: 4px

Inner Glow

Blend Mode: Normal
Opacity: 100%
Color: Same as Outer Glow
Size: 1

Bevel and Emboss

Size: 0px
Shadow Mode Opacity: 50%

Click OK to apply the blending mode options.

Add a few more lights, and experiment with color until you are happy with your results in Photoshop. Half of being a creative designer is experimenting, so be sure to play with different colors and see which looks best on your layout.