home info scripts guides links contact

Making Divs

making divs can be easily done with gradients if you know how to use them. that way, your gradients will be perfectly blended into your header image and have great flow from image to content.

when making an image, i suggest that you leave a lot of space like i did on the image below, that's why i always start off with an 800 by 600 canvas, since there's always plenty of room to work with. if you don't have a lot of space at the bottom of your image, just use a gradient to cover the entire bottom of your image to make a space.

Now, figure out how you want your divs. I want my navigation to be on the left and my content to be on the right. This means that the left div is smaller and the right div is bigger. So make a new layer (Ctrl + Shift + N) for your divs.

i am going to start with the left side, or the navigation. so use your Rectangular Marquee Tool to select the area you want your navigation div to show up. Drag the tool out to make it as wide as you desire the div to be and have it be the entire height of the image. I have highlighted my selected area in red for your convenience.

The area you selected should look like this. Now, take out your gradient tool by right clicking the paintbucket.

To use the gradient tool properly, you'll have to put it on the correct settings. After choosing your gradient tool, go to the top left of your window and you'll see this bar (click to see it)

Look at this section on your bar and double click the drop down menu with the gradient thumbnail:

A gradient editor menu will show up, you can edit your colors if you haven't already, but choose the second thumbnail, called foreground to transparent:

Now be sure that on the top gradient bar menu that you have transparency checked off:

Without deselecting the area, take your gradient tool and drag it from the bottom of your image towards the top. go a little higher than where you want your div to start so it flows from image to content smoothly like so:

Now repeat this process for your content div, by selecting a slightly larger area taking up the whole length of the picture like so:

And then use your gradient tool and drag it up like so, just like the navigational div:

here is the end product:

you can make even more divs by repeating this process for your very own layouts.


copyright 2008 Maggie N