Graphics Zone - Thumbnail Borders

VISIT-X

Creating Dynamic Thumbnail Borders
by BarryHilton, Adult NetSurprise

In this tutorial we'll be designing dynamic thumbnail borders, making your pages destinctive and attractive, while keeping file size and work to a minumum! We'll be designing our border in Photoshop, then using small images to make our border using tables in HTML. Start by opening a new image... Click Here to view Screen Shot with Instructions

Paint the background black... Click Here to view Screen Shot with Instructions.

Set up your marquee to be 10 pixels less in height and width than your image, this will give you a 5 pixel border. NOTE: If you want different sized borders, the marquee size is calculated: Marquee Size = Image Size - (2 x Border Width)... Click Here to view Screen Shot with Instructions.

Use the arrow keys on your keyoard to nudge the marquee into the center of the image... Click Here to view Screen Shot with Instructions.

Invert the marquee selection so it becomes the border area... Click Here to view Screen Shot with Instructions.

And paint the border white... NOTE: We'll be altering the color using an overlay effect later, so it can be saved and used over again quickly and easily with different colors... Click Here to view Screen Shot with Instructions.

Now add your color overlay! In our example we're using a deep red... Click Here to view Screen Shot with Instructions.

Add a Stroke, set to 'Inside' to give asingle line, both around the edge and inside of our border... Click Here to view Screen Shot with Instructions.

Flatten the image so we can cut out the border without loosing the effects we added earlier... NOTE: If you want to edit the psd file later, save the image now! Click Here to view Screen Shot with Instructions.

Set up a marquee 5x5 pixels (or the same as your border width), if you need to zoom in to make it easier to see... and drag your marquee to the top left corner. pressing ctrl x to cut it out... Click Here to view Screen Shot with Instructions.

Open a new image, it will adjust to the size of the piece you just cut out automatically. Click OK then press ctrl v to paste your corner into the new image... Click Here to view Screen Shot with Instructions.

Move your marquee to the top right corner, and cut it out... Click Here to view Screen Shot with Instructions.

Repeat the cut out, new image, paste corner until you've got all four corners... Click Here to view Screen Shot with Instructions.

Change the marquee size to 1 pixel width and cut out a piece from our bottom side of our border, pasting it into a new image as before... Click Here to view Screen Shot with Instructions.

Change the marquee size to 1 pixel height by 5 pixels width and do the same for our left side of our border, paste it into a new image, which should give you 6 images, 4 corners and two sides... Click Here to view Screen Shot with Instructions and our final example page.

Now save each of the images as gif files... Click Here to view Screen Shot with Instructions and our final example page.

Click Here to view Screen Shot with Instructions and our final example page.

Now set up the html table for our border... Click Here to view sample HTML page. Look at the source code and you'll see that it's a standard table 3 rows by 3 columns. We've used the for corner images in each corner and the border images on each of the 4 sides. The sides also have a background image of the singe row or column side border we made earlier. Don't set the table width or height, or any of the TD heights and widths. Set the BORDER="0" CELLPADDING="0" CELLSPACING="0" values of the table. This will give us a stretchable border that'll adjust to any size image placed in the center TD cell.

Here's the example coding with 5 thumbnail borders placed within a single row, five column layout table... Click Here to view sample HTML page

And our final example with 5 thumbnail images... Click Here to view sample HTML page. You'll notice that the second thumbnail is rotated, although the border has changed to snap around the thumbnail. you can also use this method on large pictures too!