Glassy Website Layout

Designing and Developing Your Layout

In this tutorial, I will show you how to create and develop your very own Advanced Glassy Professional Website Layout using Photoshop. As you probably know, Developing a website takes more than a simple design (ie: coding, lots of hard work, and good developed websites generally have lots of nice content). At the end of this tutorial, I will provide you with a link to a very helpful site that will take you from your websites design to the next part of development. Now, Lets start designing our website layout!

Getting Started - Content Box Design

The first thing we will be designing for our website layout is the content box, or the area where we will keep all of our content. Take a look at what we will be creating:

Step 1 - The Background

Create a new document with the dimensions 400x250. Let's first select a background color for our content boxes and website layout. I will be using the color #151515 for my background. Select this as your foreground color. Using the paint bucket tool ( ), fill your documents background with the selected foreground color.

Step 2 - Content Box Color

Now, select a new foreground color of #202328. Using the Rounded Rectangle Tool ( ) create a rectangle shape in your document like the one shown below:

Step 3 - Blending Options

Apply the following blending options to your content box:

Drop Shadow

Distance: 0px
Spread: 0% Size: 5px

Bevel and Emboss

Size: 0px
Soften: 0px
Angle: 90*
Altitude: 53*
Shadow Mode Opacity: 60%

Attributes not listed should be kept at default settings. You should now have a content box design such as the one shown below:

Step 4 - Inner Content Box

We are now going to place a content box within the content box we have previously designed. This means that the outer content box design will act as a border of the inner content area which will actually contain the content. Select a new foreground color of #363C48. Using the Rounded Rectangle Tool (( )) again, create a smaller box within the first box.

Step 5 - Inner Content Box Blending Options

Apply the following blending options to the inner content box:

Inner Shadow

Opacity: 50%
Distance: 0px
Choke: 35px
Size: 5px

Bevel and Emboss

Size: 0px
Soften: 0px
Angle: 90*
Altitude: 32*
Highlight Mode Opacity: 50-75%
Shadow Mode Opacity: 20%

OPTIONAL!!! Gradient

Using the gradient will make things difficult when trying to code your layout unless you are sure you know what you are doing. Your content box with these blending options applied should now look like the one shown in the example below:

Step 6 - Glossy Reflection

Duplicate your Rounded Rectangle Layer and move (( )) the duplicated version (while holding shift) a little below the first content box as shown in the diagram below:

The red content box shown below is the one being moved. As you can see, we have only moved it a slight bit from its original position. Now we need to Select this content box. To do this, hold control, and click the duplicated content box layer in your layers palette. A selection should be brought up surrounding the content box in the layer.

Inverse the Selection you made (Select > Inverse). This will draw a selection around everything except for your previously selected areas (basically a negative of your old selection). Finally, while holding Ctrl + Alt + Shift, click on your original rounded rectangle layer. By holding on Ctrl + Alt + Shift, you are creating a Boolean selection, which will only keep parts of your original selection where there is something in the layer you click. Hide your Duplicated Content Box Layer:

Select your Gradient Tool (( )) from the toolbar in Adobe Photoshop, and then create a new layer above the rest of your layers. Select the Foreground Color to Transparent Gradient Preset, and then select white as your foreground color:

Now, while holding shift to keep your gradient filling at angles of 45* increments, fill in your selection by dragging straight down (start above the top of the selection by a considerable amount, and drag just below the bottom of the selection):