Padded Frame Tutorial


Using Paint Shop Pro 6 or 7


1. Open a new image 300x300, transparent.

2. Fill the image with your background pattern or color.

3. Selections, select all, modify, contract 50, then invert selection.


 

4. Add a new layer, fill your selection with your pattern or color.


5. Effects, inner bevel, using the image below for your selections.

inner bevel table

6. Invert selection again,expand 1 or 2 pixels.

7. Add a new layer, move this layer between your first and second layer, name it cutout.

layer table

8. Use the cutout effect, Opacity=100, blur=5, horizontal=4, and vertical=4.

9. Add another layer and do the cutout again, only do horizontal=-4, and vertical=-4.

You can adjust the opacity on the layer palette if the cutout is too dark.

10. Merge all layers and you are finished, except for slicing the image.

11. I use Ulead's Smart Saver to do this, slicing the image into 9 equal parts.


12. The following is the html I use for this sort of web page.

Don't forget to adjust the height and width attributes in your td cells to match the size of your images.


<html>
<head>
<title>Untitled</title>
</head>
<body TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 bottommargin="0" rightmargin="0">

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td width="100" height="100">Your top left image here</td>

<td background="your top middle image here>&nbsp;</td>

<td width="100" height="100">Your top right image here.</td>

</tr>

<tr>

<td background="your middle left image here" >&nbsp; </td<

<td background="your middle image here"> insert your content here in this middle cell</td>

<td background="your middle right image here >&nbsp;</td>

</tr>

<tr>

<td width="100" height="100">your bottom left image here</td>

<td background="your bottom middle image here" height="100">&nbsp;</td>

<td width="100" height="100">your bottom right image here</td>

</tr>

</table>

If you have any questions about this tutorial please don't hesitate to email me.
To see what this looks like as a web page see this set.

:: Home ::  :: Email ::

Copyright ©Dana Lea Moore, all rights reserved.

1/8/01