Home
Photoshop
Web Layout
Complete Web Page Plus Code
Level: All levels Software:
Photoshop
Step 1 Ok first off, this is a fast paced tutorial meant for a reader with knowledge of how to use basic Photoshop tools. This tutorial assumes you have some experience with layers and shape layers as well as clipping masks. Only a brief explanation of each will be offered as they are outside the scope of this tutorial. Here is a quick look at what you will end up with (but larger, of course!).
Step 2 Now let's begin. First and foremost you need a color scheme. It is not good enough to choose colors randomly as you go along and trying to figure out what looks good. There are tools to help you with color schemes. Here are two of my favorite: Color Picker and Colourlovers. Often times I will create a new layer with the color samples of my chosen color scheme for quick access. You may also use swatches to accomplish the same thing. I leave it up to you to substitute the colors I use with the colors you have chosen. For this particular example, I have gone with a blue monochromatic color scheme which is possibly one of the most overused color schemes on the internet. I choose this scheme in hopes that you would find it boring and opt to use your own color scheme instead!
Step 3 Now that you have your colors in mind go ahead and create a new document. It should be 800 X 800 pixels. According to web standards, web pages should be no wider than 770 pixels due to a still large number of users who use 800X600 resolution. We have made this one 800 pixels wide to account for the creation of a background for the entire page.
Step 4 Now that you have your document, you need to set up guides. These guides will be a great asset and assure that all of your creations on the page are lined up in exactly the right width, height, and location. To create a new guide go to View > New Guide. You have the option of horizontal or vertical, and a box to type in an amount of pixels. You need to create the following horizontal guides: 15, 25, 175, 185, 215, 225, 700, 710, 775, 785. You also need to create the following vertical guides: 15, 25, 275, 775, 785. You can toggle viewing the guides or not by pressing Ctrl and ; together. You also need to make sure that View > Snap is check marked, and that View > Snap To > Guides is also check marked. When you’re finished, it should look like the image below.
Step 5 Ok. For each different part of this project, I’m going to create a new layer group (or layer set if you’re using version 7). I advise that you do the same to keep it organized, but it’s up to you and won’t make a difference on the end result (except for readability and ease of navigation throughout your file). Create a new layer group called background. You should create a new layer and fill this layer with any color, it won’t matter as we will change it to a gradient. Now go into blending modes of this layer. Click on gradient and add a vertical darker-colored gradient. If it is not exactly vertical, then it will not work with the code given at the end of this tutorial.
Step 11 Now add your logo, or simply the name of your web site. It should be centered between the guides shown below. I used a default Photoshop shape for this one, with the regular old Arial font.
Step 12 Now move on to the menu. Create a new layer group called menu. Use the Rounded Rectangle Tool
to create your menu between the guides shown below. Copy the layer style from the bottom shape layer of your header and paste it to this layer. It should be just an inner shadow.
Step 13 Now duplicate the layer and add a gradient to it in the blending options. Match one of the colors in your color scheme. Then clip this layer to the layer below just as we did with the header. Again, I used a regular old blue gradient. You could have done all of this on the first layer of the menu, without using a clipping mask. However the clipping mask allows you to add other things to this layer group if you so desire. We will not do that in this tutorial.
Step 14 Now add your text that will be your links. This text will eventually be replaced with actual HTML text, but just so you can visualize what’s going on, I have added some text to the image and removed the guides.
Step 15 Let’s move on to the body. Create a new layer group named body. Set your foreground color to the color you want to use for the body, I chose white. Then use the Rounded Rectangle Tool
to create the body shape layer in between the guides shown below. Add the same inner shadow that you’ve added to the menu and header layers.
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.
Step 21 Make sure everything is exactly the way you want it, because in this step we're going to have to merge layers together and they will no longer be editable in the same fashion. I advise you to save a copy of your file now for this reason, that way you can edit it later. We are not going to use the slice tool because we are going to use custom code to help optimize the site and the slice tool doesn’t account for things such as expanding text areas and background images. If you’ve kept each set of objects in their own layer group (or layer set), this step will be much easier. Start off by hiding all of the text and content layers, if you have put any in.
Step 22 Right now you should have the following layer groups (or layer sets in Photoshop 7): Background, Container, Header, Menu, Body, Footer. On each layer group, click the group to select it and then press Ctrl-E. This will flatten that layer group so that the entire group becomes one layer.
Step 23 Now hide all layers except the background layer then select the background layer (this is the layer you put the background color or gradient on, NOT the background layer created when you made the new document!). Use the single column marquee tool to select one column of vertical pixels. Copy and Paste into a new image. The dimensions should be 1 X 800. Use the zoom tool to zoom in and find the very bottom pixel. Use the eyedropper tool to get the color value of this pixel. This will be used as your background color in the CSS code, so write it down or store it in a document somewhere. Now to keep things the same, you should create a new folder somewhere on your computer. Call this folder web_page. Inside the web_page folder, create another folder called images (all lowercase). Save the background file into the images folder, and name it bg.gif. use File > Save For Web to keep your files to a minimum size. Be sure that the .gif option is selected so that your images will work with the HTML/CSS given at the end of this tutorial.
Step 24 Now hide the background layer. Unhide the container layer and select it. We will have to make 3 separate selections to create the container layer in our code. You must also know the height of your pattern, if you used a pattern. The pattern I used repeats every 10 pixels, so I will have to make sure each selection is an even multiple of 10. Since I used a 15 pixel radius on the original curve, I will have to select 20 pixels to get the top and bottom portions of the container. Then I will make a 10 pixel high selection in the middle to define the background to be used as a pattern. I’m using the fixed size option of the marquee tool to ensure that I’m selecting the appropriate amount of pixels. View the image below to see where I copied and pasted 3 different selections into new images. After each image name I am putting the size of the image. Your images must be the same size to work with the xhtml and css code provided. Save each of these images into the images folder, and name the top one container_top.gif 770X20, the middle one container_bg.gif 770X10, and the bottom one container_bottom.gif 770X20. Use the guides to ensure that you are selecting the appropriate area, and when you save make sure transparency is check marked. You may also wish to add a matte color that is close to your background color. You must also make sure that when you create the new document for each of these, that your background is set to transparent and not white or another color. All files from now on will have to be saved with transparency.
Step 25 Now hide all layers except the header and select the header layer. Ctrl-Click on the header layer to create a selection out of it. Copy and paste it into a new image and save this image in the images folder and name it header.gif 750X150. You may want to change the matte color to a color that will match your container color.
Step 26 Now hide all layers except your menu layer and select it. Do the same as you did for the header except call it menu_bg.gif 750X30.
Step 27 Again we'll have to make 3 different selections for the body. Hide all layers except the body layer, then select the body layer. Select the top, a portion of the middle for the background, and the bottom. Save as body_top.gif 750X14, body_bg.gif 750X1, and body_bottom.gif 750X14 into the images folder.
Step 28 Hide all layers except the footer and select it. Now Ctrl-Click the footer to make it a selection. Copy and paste the footer layer into a new image and save the file as footer.gif 750X65.
Step 29 You're all done! You may download the zip file in the next step. The zip file contains the original .psd of this tutorial, as well as the HTML and CSS files you need to make the web page work. Edit the HTML and CSS with a text editor or HTML editor to customize them then copy them over to the folder you created for your web site. I have put comments all through them indicating where you might want to change things. The HTML and CSS code are cross browser compatible as well as W3C validated, so you shouldn't have any problem with it. It is coded to allow the body portion or left panel portion of the web site to expand vertically however long you need it to. The rest is up to you!
Step 30 Download the .zip file of the .psd and web page files here.
Step 31 View the web page in action here.
More Photoshop: Most Popular Materials | Fresh Materials
| TutorialKit New Photoshop Tutorials