Div Layout II

• Added: Sep 25th, 2004
• Difficulty: Easy/Medium
• Author: Melfina
• Description: Second part of the div layout tutorial. Final touches & coding.
• Program version:
• Reads: 86999

Before reading: please note this is not the best way to create a div layout nor the best coding, but the easiest (at least for me). It was meant for beginners that know nothing about coding or not much. Once you understand this tutorial, you should improve by learning CSS and switching to XHTML.

Following the tutorial
- If you have any problem with this tutorial, please don't e-mail me. Use the forum instead.
- This tutorial has two parts. Click here for the first part.

Brushing the image
1. Create a new layer and take the brush tool . The brush properties are at the top of the window. To load a brush, click on the little arrow next to the active brush and then again on a little arrow. They're marked on the image below. Select Load Brushes... and browse through your files to add the brushes you want to use.

2. Play with the brush opacity and add brushes as you like. I can't tell you how to do this, just use your imagination.
3. You can also add effects to the image. To do so, always duplicate the image layer, so that you can change the layer blending modes and opacity later. To add effects, go to Filters and play around with them. Duplicate and add effects as many times as you like.

Final touches & customizing
1. Take the text tool and click where you want your text. Write it and change the text family and size. If you want to move it, do it with the Move tool. You can add special effects to the text right clicking on the text layer and clicking on Blending options. There are many effects you can use there,  so try them!
2. Optional Step: Once you've completely finished your layout, let's get into the customizing. See the blank space at the left of my image? That's a waste of loading time. Let's crop the image. Take the rectangular marquee tool and make a selection of what you DO want to keep, something like what is shown on the image below. Go to Image > Crop and now you'll have a smaller image.
3. Slicing: Take the slice tool and right click anywhere on the image. Click on Divide slice. Click on Divide horizontally into and put 7 slices down. How you divide it really doesn't matter, so you can make 7 horizontal slices and 7 vertical slices, or just vertical, as you like. Click ok. Now you see blue lines on the image, those are the slices.

4. Go to File > Save for web and a window will open. On the right you have the options to save the images. Select jpeg at around 60-70 of quality. Make sure Optimized is selected. Save it as index.html. Below, it must say HTML and images. Click ok.

Coding the layout
Photoshop already makes the basic structure of the html page for you, so we just need to add the coding for the divs, change the background image-color and add the style sheet.
1. Open index.html with Notepad. Add this bit of code just before </body>:

2. With Photoshop, take the rectangular marquee tool, open the info window if it's not already opened (Windows > Info). Right click on the cross at the bottom left corner of the info window and select Pixels so that the values show in pixels. Click and drag on your image where you want your content box to be and hold your cursor at the top left corner of the selection you've just made. Now you can replace the XXX with the proper values on the div.

3. Repeat steps 1 and 2 for the navigation div.
4. To change the background color, take the color with the Eyedropper tool in photoshop, and replace the color here: BGCOLOR=#FFFFFF with your color.
5. We need the boxes to expand with the text and content of your page, so we need to put a background image. With Photoshop, right click on the Rectangular marquee tool and select single row marquee tool. Click on the bottom of the layout psd. Go to Image > Crop and File > Save for web. Save it as a 60 quality JPG and name it background.jpg (save it on the images folder of the layout). Do not save the PSD now eh?
6. To put that image as the page background, put this inside <body>, where the background color is: background="images/background.jpg". For the moment it also repeats horizontally, and it looks horrible X.x We'll fix that with the CSS.

CSS Stylesheet
1. Add this before </head>:

A little explanation about this: background-repeat: repeat-y makes the background repeat only vertically and you need to replace the colors of body (text) and a (links) to the ones you want.

Finished! now you have a basic div layout. You can view my result clicking here.

Tutorial © Melfina. Do not reproduce in any way without previous permission from the author. Printed from http://celestial-star.net