Tutorials

How to make a DIV layout
Kaze Kikotsu Style

First thing you gotta do is find an image you want to use for the layout. Let use this picture for this tutorial.

Okay, now that you have a picture, open up your graphic editing program. This tutorial pertains to Paint Shop Pro 7 only, if you use other programs you are going to have to guess. Anyway, first you open up the PSP. After it loads go to File then select New or hit CRTL+N. Most programs have that short cut to start a new canvas. When it asks what size you want it to be, go with 750-780 pixels wide and 300-400 pixels high. I suggest no higher and no lower. If it is too small you can not fit all that you want into the layout. I am goign to go with 750 wide and 350 high. After you enter in the size you want then hit OKAY or OK or whatever they have for you to confirm the settings. After it opens a new canvas you will see a (most likely) white area. Go to Edit then select Paste as new Layer or right click on the white are and select Paste as new Layer. Now your canvas will look something like this.

Now that it is pasted into your canvas go up to Image and select Resize. Choose the percent resize and resize it to be 50% less wide and 50% less high (These percents can change; it depends on the picture and what you are going for). Hit OK and now you should probably be able to see the whole image. Now select the Eraser Tool and fade the right and bottom edges and align the image in the upper left hand corner of the canvas. After you do that it should look something like this.

After that you can start adding in the boxed where your text will go. To do so, select the Preset (Auto) Shapes and select the Square. After doing that drag a small rectangle along the right side of the canvas and a more square like box on the left side below the picture. Be sure that the antailias is turned off and you have chosen colors for the boxes that make sense with the image. Your layout should look something like this now.

Now that you have that done, you may or may not have some white space on the right side where nothing is, if so just Crop that off and continue with the next step. Now you are going to want to add your site name and version number or whatever other text you would like to have on it. To do so select the Text (Font) Tool and type in the text you would like and set the colors so they match your layout nicely and make it have a nice text. I suggest not using, Times New Roman or Arial for the site name, for any small text they will work fine. If no colors that you use look right or you can not see the text then after making the text go to Layers and select Convert to Raster Layer then go to Effects and select 3D Effects then Drop Shadow. After that a window will pop up that looks like this.

Select the Offset and the Opacity and Blur and Color of the shadow to how you would like, after that hit OK. Once it applies to the image you can add any other text you would like. After adding the text now you need to save the image so you can use it. So hit File and then select Save As or hit CRTL+S or F12. After doing that you can choose where you want the image saved on your computer and then you can name it and save it. Make sure to save it as a JPG, GIF, or PNG and not as a Paint Shop Pro image. After you save the image you are all set. Except, now there is one last thing you got to do before you can code it. You need to make a background for the layout. This is very simple. Take the image and just crop the bottom half about 5 or 10 pixels up from the bottom and then save that as a separate image. And there you have it. You are set you start coding your layout.

Your layout should look something like this when you are done. How did you do?

Written by: Kaze Kikotsu. Questions? Comments? Complaints? E-mail Kaze Kikotsu.

Affiliates:

Apply