Glassy Website Layout

In Part one of this tutorial, you learned how to create the basic interface for your content box layout in Adobe Photoshop. In Part two of this tutorial, you learned how to make your content box appear a little more interesting by adding some minor details to spruce it up in Photoshop a bit more.

If you have not yet gone through the previous two parts of this website layout photoshop tutorial, I strongly suggest that you begin from part one and continue on from there:

Glassy Website Layout Part 1
Glassy Website Layout Part 2

Once you have completed the first two parts of this photoshop tutorial, please continue on! In part three of this tutorial, you will learn how to slice your content box for use in a website layout. Enjoy!

Slicing the Content Box in Photoshop

Some people believe that the slicing tool in Adobe Photoshop is needed to slice their website layouts. However, this is not the case, and often results in terrible web page design. Using the methods shown in this tutorial, you will learn how to easily slice your content box and make it ready for the web.

Here is what you should have so far:

Now, when we take this content box into consideration for our website layout, we need to first consider how our content will expand, and how our content box must expand with it. Some designers try and use frames so that all of the content fits in the box, rather than take the time to learn how to make the box expand with the content.

First, consider the following diagram:

As you can see, I have divided our content box into 3 main areas. The top section has been labled header, and will be the top of our content box. This section will not change in our layout, and our content will appear below it.

The next section is the content area. This is the area which will expand vertically with our content. Notice that the background of our content area is the same the entire way through (in other words, if we took a horizontal selection across the entire content area only one pixel high, we could stretch it, and it would still look exactly the same.

The footer like the header will not change, and will be displayed below our content area.

'Slicing' the Images from our Content Box

Here is where we will begin to slice our content box. Slicing is basically a term used to describe how we split up an image into several parts to make a layout. First, lets cut out a header (I will use the red area shown above).

You may want to keep track of the dimensions of your images. If you want to make this easy on yourself for the coding part, you could simply use our images, but otherwise, you will want to keep track of the height and width of the images you are slicing out.

Now, using the Single Row Marquee Tool ( ) cut out a section of the content area:

This is probably hard to see, because it is only 1px in height.

Finally, cut out a footer:

This is basically all there is to the adobe photoshop portion of this tutorial. Now lets move onto the coding.

I will not go into any specifics on how the CSS works in this tutorial, but I will give you a quick overview of the code once you have taken a look at it. Save all of the images you sliced as header.jpg, contentbg.jpg, footer.jpgCopy Paste the following into a text editor such as notepad:

The Code

To download the code, go here, right click, and then click view source.

Final Information

You will need to alter some of the styles attributes based on the dimensions of your images. All of my images had a width of 400 pixels, so that is where that came from. My header was 57 px, which corresponds to the style shown above etc.

However, the content area is a bit different. I used 25 pixels of padding on both sides of the content style so that the text did not overlap the sides of the content box and fit nicely into the website layout. I then subtracted the sum of both paddings (25+25=50) from 400 to get the width of 350 pixels.

Thats it! Click to see a live example of the final layout!

Website Layout