StarryIlove
10-04-2004, 12:08 PM
Creating layouts using the image slicer in PSP7 is pretty easy to do.
To start off design the layout you want to use. Remember to make text areas lighter if you are using black text. I have used an image sized 700x600.
I made a selection where I wanted my text to go and used Fill > White > Opacity 30%. That means my text box will blend in with my layout but I can still read my text.
I then add a similar area again for links next to the text box area.
Save your image as lay.gif jpg or png
I'm now ready to slice.
Go to: File > Export > Image Slicer.
Your image will open up in a new smaller window. Hit the minus magnifying glass till you can see your layout all in that box. Now hit the button at the top shaped like a knife. To the right of the # button.
Go to your image and click along the left hand side of your text box. Drag down a little so you get a vertical slice. Do the same for all sides of your text and link areas remembering to drag a little in the direction you want the slicer to cut.
If you have a title in your layout you may want to make this a link. Slice around the title and select the arrow tool. Now select your title piece. Add the details of your home page link e.g. http://your domain.com Don't forget to add alt text.
Click "optimize cell" and ensure our setting are ok. Make sure transparency is off and use optimised octree for best image quality but slower download times. Check the apply optimization to whole image box.
If your happy with your layout you can save now. Choose save as. Save the HTM file with whatever you want your page to be called, most probably index.htm if it's your main page. Save it to your desktop or somewhere you can find it easily. If you want to change a line rub it out with the eraser tool. (To the right of the knife) and replot it. Preview your image in IE or netscape by pressing the eye button. Leave this window open.
Now you need to open your file that you saved. Find out the name of the text area image by right clicking it in the preview and clicking "properties" now find this image in the text area. It will be lay1x1.gif or something similar.
Once you've found the relevent image you need to insert this code in the td tag before it.
style="background-image: url('lay1x1')"
Now delete the image details <img src="lay1x1.gif" height="xx" width="xx"> (or something similar.)
You can now add a div element in the cell to the height and width of the image in the background. Change elements in bold.
Repeat this process for any other areas you want text.
Now your done. Upload using ftp or copy and paste into your HTML editor. Don't forget to upload the images to the same directory.
A simple but effective way to make a layout.
PM any questions or if you would like examples.
To start off design the layout you want to use. Remember to make text areas lighter if you are using black text. I have used an image sized 700x600.
I made a selection where I wanted my text to go and used Fill > White > Opacity 30%. That means my text box will blend in with my layout but I can still read my text.
I then add a similar area again for links next to the text box area.
Save your image as lay.gif jpg or png
I'm now ready to slice.
Go to: File > Export > Image Slicer.
Your image will open up in a new smaller window. Hit the minus magnifying glass till you can see your layout all in that box. Now hit the button at the top shaped like a knife. To the right of the # button.
Go to your image and click along the left hand side of your text box. Drag down a little so you get a vertical slice. Do the same for all sides of your text and link areas remembering to drag a little in the direction you want the slicer to cut.
If you have a title in your layout you may want to make this a link. Slice around the title and select the arrow tool. Now select your title piece. Add the details of your home page link e.g. http://your domain.com Don't forget to add alt text.
Click "optimize cell" and ensure our setting are ok. Make sure transparency is off and use optimised octree for best image quality but slower download times. Check the apply optimization to whole image box.
If your happy with your layout you can save now. Choose save as. Save the HTM file with whatever you want your page to be called, most probably index.htm if it's your main page. Save it to your desktop or somewhere you can find it easily. If you want to change a line rub it out with the eraser tool. (To the right of the knife) and replot it. Preview your image in IE or netscape by pressing the eye button. Leave this window open.
Now you need to open your file that you saved. Find out the name of the text area image by right clicking it in the preview and clicking "properties" now find this image in the text area. It will be lay1x1.gif or something similar.
Once you've found the relevent image you need to insert this code in the td tag before it.
style="background-image: url('lay1x1')"
Now delete the image details <img src="lay1x1.gif" height="xx" width="xx"> (or something similar.)
You can now add a div element in the cell to the height and width of the image in the background. Change elements in bold.
Repeat this process for any other areas you want text.
Now your done. Upload using ftp or copy and paste into your HTML editor. Don't forget to upload the images to the same directory.
A simple but effective way to make a layout.
PM any questions or if you would like examples.