Newest Tutorials    Most Popular Tutorials    Design a Tutorial    Contact    Bookstore

FastClick Ad Network
Daily Cooking Recipes

Photoshop Tutorials » View Tutorial
Search (3 or more characters):

Featured Photoshop Tutorials:
Changing color: Hair, Eyes, Clothes
Author: kromefx | Category:Color | Level:Intermediate | 12/11/2004
Rounded Corners
Author: kromefx | Category:Basics | Level:Beginner | 11/24/2004

     Title:     Complete Web Page Plus Code
Author:kromefx | view all by kromefx
Category:Web Layouts
Description:This tutorial takes you from the initial setup and design of a web site, all the way through producing W3C validated CSS and XHTML 1.0 for layout, while leaving room for integrating your own designs and color schemes. The .PSD is also available for download as well as the code.

| Page 1 | Page 2 | Page 3 | Page 4 | Page 5 | Page 6 | Page 7 |

Step 16
Now select another color from your color scheme. This will be for the left-hand panel. I have chosen a light grey. Use the Rounded Rectangle Tool to create another shape inside the guides shown below. If you wish you may even use a gradient under blending modes as long as the gradient is horizontal. I chose to use a light grey to lighter grey gradient. Then clip the new layer to the body layer so it will inherit the inner shadow.

Step 17
So that you can visualize what the page will look like, I have added some content. You do not have to do this at this time because this will be added in the HTML. I have used standard Lorem Ipsum text to fill the blank areas and removed the guides. I have also added one of the default shapes in Photoshop with some text to indicate where you might have some featured products, or other item relevant to your web site.

Step 18
Now we have the footer. Create a new layer group called footer. The footer will be basically like your header but smaller. Use the Rounded Rectangle Tool to draw a shape in between the guides shown below. Add the same inner shadow either by copying and pasting the layer style, or by manually adding it.

Step 19
Now duplicate the layer and add a gradient to it. Again Iím back to the same old blue to light blue to blue gradient. Clip this layer to the layer created in step 18 so that it will inherit the inner shadow. I have removed the guides to give you a better look.

Step 20
To keep a theme across the site, I have used the same image that I used in the header, but flipped horizontally and on the opposite side. If you use an image here, clip it to the layer created in step 19. Then add your copyright text to the right hand side of the footer. Guides have been removed for you to see how it looks.

| Page 1 | Page 2 | Page 3 | Page 4 | Page 5 | Page 6 | Page 7 |

Paul 3/14/2008 @ 6:56pm
Awesome Tut, keep up the good work!

Click Here to see the MOST POPULAR tutorials!

Add a Comment

You must have javascript enabled to use this form

(30 characters max)
Your Comment
(200 characters max)
Verification Code: 44924

Privacy Policy | Terms of Service | Disclaimer
Newest Tutorials | Most Popular Tutorials | Design a Tutorial | Contact