Layout Making for Slackers
Requirments: Paint Shop Pro (7 is the version used here)
Microsoft Frontpage
I am sure this could be adapted to photoshop and other types of imageslicers and
other WYSIWYG web editors. (What You See Is What You Get)
Step One:
Well first, you need your flat layout image. After you have created a flat
image, open it in paint shop pro and export the image slicer.
1.1
1.2
1.3
Figure 1.1 is your layout open in paint shop
pro.
Figure 1.2 is going to File>>Export>>Image Slicer
Figure 1.3 Is what the image slicer looks like.
Step Two:
After you open the image slicer, its best to familiarize yourself with commands
and tools.
2.1
2.2
Figure 2.1: The tool that is clicked in the center is the slicer tool. This is
the only tool you will need to use, unless you need to erase a slice line which
in case you use the button beside it that looks like an eraser.
Figure 2.2 Your zoom and move tools. Zoom out or in to get a better look at to
where you are slicing. Use the arrowed tool to move the image to the
right/left/up/down so see other parts close up.
Step Three: Slice Your Image
***Always slice the frame part first. It won't due to cut the links out and the
slice lines go through the frame. Its just easiest to slice the frame out first.
3.1

Figure 3.1 shows you an example of how slicing should go. Remember, anywhere
there is a square made by slice lines, this is an image that will get cut out of
your main image.
Step Four: Optimize the Image
4.1
4.2
4.3![]()
Figure 4.1 Click the Optimize Cell button.
Figure 4.2 Go to the colors tab and make sure it is on Optimized Octree.
It is set to web-safe by default. You might also want to check the transparency
tab to make sure its not setting a color transparent when there should be none.
Figure 4.3 Click Ok
Step Five: Save the page and close.
5.1
5.2
5.3
Figure 5.1 Click Save As
Figure 5.2 Create a new folder to put your layout in and then double click to be
in that folder.
Figure 5.3 Save the page. I usually name the frames page index2.html since
index.html is usually a splash page.
Extra Things:
x.1
x.2
Figure x.1: After you have sliced and the images are all in the file, go to the
file in your layout's folder and open a file named blank.gif, or it might be
spacer.gif. This is basically just a one pixel image of a white square. I
don't know why there is a blank image, but I always open the file and make the
white the transparency value so I don't have a white line on my layout anywhere.
Figure x.2: Make the background color white and make it transparent.
You are now done with PSP, it is time to open Frontpage. Click
here to go to the frontpage part.