CSS

Simple Web 2.0 Design and CSS Tutorial

By Ed ⋅ March 17, 2008 ⋅  Email this post ⋅  Print this post ⋅ Post a comment

This tutorial aims at teaching you how to make a simple "Web 2.0" design.

Setup

To start, let's create a new document in Photoshop, 1024px (width) by 700px (height).

Guides

Now, lets set up predefined areas (for areas like the header, and content) using guides. We will be creating four guides for now.

• First Guide: Horizontal, position: 160px
• Second Guide: Horizontal, position: 620px
• Third Guide: Vertical, position: 62px
• Fourth Guide: Vertical, position: 962px

You should now have something that resembles the following (ignore the fact that there's the BG coloured in there, that wasn't supposed to be there just yet):

Background

"Web 2.0" seems to be all about gradients, so choose a foreground and background colour. I used foreground: #6d6657 and background: #302a1d. Use the gradient tool, then click at the top of the document, and drag down to the first horizontal guide (160px down). You should have something like the following:

Content Area

Choose the rounded rectangle tool, and set a corner radius of 10px. Now make sure that your window is expanded a little more than the actual document size so that you can begin to draw your content area just outside the top of the document. Start about 15px above the document, and at the first vertical guide (62px in). Drag out a rounded rectangle down to the bottom horizontal guide, and aligned with the right hand vertical guide (962px in). You should see the following:

Now, add the following layer style to the rounded rectangle:

Header

Now lets set up the header. Create a new layer and use the Rectangular Marquee Tool and draw from the top left of the document all the way to the right, and down to the first horizontal guide. Fill with a colour of your choice. If you're following this guide, I used #918977. Change the blend mode to 'Darker Color' and add a drop shadow using the following settings:

Now grab a decent pattern, there are some nice ones at SquidFingers. Choose one, open it in photoshop and define it as a pattern (steps 1 & 2 only). IMPORTANT: Remember the width of the image. Mine is 34px. Once you have your pattern defined, bring up the main layout document we're working on and Ctrl+Click on the image part of the header layer in the layers panel. This should have selected the header section. Create a new layer above and choose Edit > Fill. Select your newly defined pattern, and fill this header area.

Now, set the Blending Mode to Luminosity, and press Q to enter Quick Mask mode. In Quick Mask mode, with the new layer selected (with the nice pattern on it) - choose the Gradient tool.

Drag a gradient from the top of the screen, down to the first horizontal guide (160px down). You'll have a red gradient, don't worry about that - we're in Quick Mask mode and it's supposed to do that. Now press Q to exit the Quick Mask mode, then press delete. Your pattern should now fade out as it gets closer to the bottom of the header section:

Saving your Slices

That's your layout basically done (without any content / images). Now to save the slices for our XHTML layout. Create two new horizontal guides, the first one set with a position of 170px, and the second with a position of 610px. Now, use the slice tool, and create a slice from the top left, across the entire width, and down to the first new horizontal guide (170px down). Create a second slice starting from the left and down at 170px, drag it all the way to the right and down to the second new horizontal guide. Create a third slice with the remaining space. You should have the following:

Now choose 'File > Save for Web & Devices' and save the images. This process will create a folder in your directory you chose to save them in. Within this folder will be your three sliced images. Browse to that folder, and delete the middle image. We don't need this. Name the header slice 'header' and the footer image 'footer'. Move both the header and footer images to your web image directory.

Now, back in photoshop, using the Rectangular Marquee tool select from the top left, all the way to the bottom and go in the number of pixels that match the width of your pattern you used earlier from the left edge of the document. Goto Edit > Copy Merged, then click File > New Document and make sure the dimensions are <width of pattern>px by 700px. Paste in the copied image, then File > Save for Web & Devices. Save this image as 'main_bg'. This is your main background image. Now, choose the Single Row Marquee Tool, and click once in the middle section of your main document (anywhere that the second slice contains). Do the same as before with the vertical slice… copy merged, open a new document, paste it in and save for web as 'content_bg'.

You should now have 4 main images:

• header
• footer
• main_bg
• content_bg

Creating the XHTML / CSS

Firstly, lets set up our directory structure. We will be needing the following:

• index.html
• design.css
• folder for images

We will be wanting a final directory structure that resembles the following:

+-my layout/
  |
  +-img/
  | |
  | +- content_bg.png
  | +- footer.png
  | +- header.png
  | +- main_bg.png
  |
  +- design.css
  +- index.html

Navigate to your root folder for this tutorial (where the files are going to be saved). Create a new folder called img and copy your images into it.

Now create the XHTML document (index.html). Let's use the following Dreamweaver default as a nice structure to work from:

Add the following div tags between the BODY tags:

Now it's time for the CSS. Create the new CSS file (design.css) and add the following CSS code:

Now, attach the stylesheet to your XHTML document using:

anywhere between the HEAD tags.

Voila! We're done!

Extras

Play around with this simple layout design, create new images, change colours and edit the CSS. Take a look at my final design.

I changed the header image to include a logo and some links, and also added some images to the footer. It seems to be the web2.0 style that you incorporate faint logos at the bottom of your layout.