How to make a 3d frame for an HTML table

You may have come across some fancy 3D frame surrounding pictures in HTML pages; you wondered how they did, here I am to show you the process.

If you have PaintShop 7 or 8 (I am not familiar with PaintShop 6) it takes a couple of minutes; of course you will like to try different effects and sizes and collect an impressive collections of frames for any occasion.

Step 1

In my case I want to create a thin frame for the pretty Elena; her picture is 96x120 pixel and
therefore I will start with a file 100x124, allowing for 2 pixels on the four sides.
Step 2

Select the whole image pressing CTRL A and reduce the selectioned area with Selection-> Modify -> Contract specifying two pixels
Step 3

The internal area is now selected (which we don't want), so we invert the selection with Selection -> Invert



Step 4

Zoom on the picture to work more easily and fill the frame with the fill tool and the colour you prefer




Step 5

Keeping the selection active (i.e. don't press CTRL D) we add two 3D effect: inner bevel and shade in.



Step 6

We now prepear the HTML page defining a table with a field containing our frame

<table>
  <tr>
    <td background="./images/cornicePiena.gif" WIDTH="100" HEIGHT="124" BORDER="0" ALT="">
      <table>
        <tr>
          <td><IMG SRC="images/UA1417_small.jpg" WIDTH="96" HEIGHT="120" BORDER="0" ALT=""></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td align=center><FONT FACE="tahoma" SIZE="2" COLOR="#000077">Pretty Elena</td></FONT>
  </tr>
</table>

Step 7

This is what you should see:
Pretty Elena
Try with thicker frames to render better the 3D effect, in silver or gold.

Step 8

If you have a picture of some Viking warrior instead, you may like to have some iron frame; here are some steps to obtain the effect

As explained above, define a frame 10 pixels thick and add noise to it selecting Effects > Noise > Add

Step 9

The dots become streaks if we add a motion blur, angle 90 (horizontal) and intensity of 2 or 3

Step 10

You can now play a bit with Color > Colorize to obtain the metal you prefer; by setting Hue and Saturation both to zero the result is gray.

Step 11

This is what you should see:
Ugly viking
Again, by setting Hue and Saturation both to different values you can reproduce various metals.

Assisted by
EditPlus This page and almost every page in my life was written using EditPlus, the great editor.