Test Index · Photo Borders · Table of sliced images - Rounded corners · Sliced images and manually linked · Overlap Images · Create a Watermark · Gif Png Transparency · Buttons-Image Links · Image Names · Image Theft · Lake Applet · Other applets · Slideshow1 · Slideshow2 · Slideshow3 · Galleries · DD Thumbnail Viewer · image map · xara thumbnail · Random Image · LOGO BRANDING · Animated Image · photo with sound

Put a border around your photo

CSB/Trellix HTML tables samples shown first.

Borders made with Photo programs. These Simple techniques can be done in MOST photo programs!

Add a Drop Shadow to the image.

Border made with layered HTML TABLES to frame the image in a web page.

WEBPAGE IMAGES:

1) Always remember to limit the image size for the web! Check the size of your finished image. Images should be "optimized so that they load faster. Images should be between 1kb and 60kb in size (smaller is good as long as the quality remains!). When you insert images that are not optimized, the webpage will load VERY SLOWLY! Most Photo programs have a compression/optimize/make ready for website feature. Try your HELP section in the program.

Consider Irfanview as a quick remedy-photo viewer with some great features and good compression.

2) Don't expect the image "resize" feature to optimze your image! If you load a 2mb image into the webpage and use the resize feature to make the image smaller on the webpage, your visitor still has to wait for 2mb to load. Work on your photo before it makes it to your webpage!

3) Don't take images that are not yours unless it is posted that you can do so!

[CLARIFICATION: Transparent image: could be gif or png Non-Transparent image: could be gif, jpg, png, tif, bmp, etc.]

SIMPLEST IMAGE BORDERS

These images were placed into the page using Insert > HTML so borders could be added.

Code for use in CSB: <img src="^GEMDIR/SnakeFace2.jpg">

Regular HTML: <img src="SnakeFace2.jpg">

Code for use in CSB: <img src="^GEMDIR/SnakeFace2.jpg" border=1>

Regular HTML: <img src="SnakeFace2.jpg" border=1>

Code for use in CSB: <img src="^GEMDIR/SnakeFace2.jpg" border=5>

Regular HTML: <img src="SnakeFace2.jpg" border=5>

Code for use in CSB: <img src="^GEMDIR/SnakeFace2.jpg" border=10 style="border-color=#6600CC; border-style:inset" >

Regular HTML: <img src="SnakeFace2.jpg" border=10 style="border-color=#6600CC; border-style:inset" >

(Scroll down to Sample 6 below for more style samples!)

SAMPLE 1:

This is a simple transparent gif placed into a CSB made table.

Table settings: Shadow is same as highlight color Vertical alignment is Middle

Cell spacing: 1 Cell padding: 2 Table border width: 1

SAMPLE 2:

Same simple transparent gif placed into a CSB made table.

Table settings: Shadow is same as highlight color Vertical alignment is Middle

Cell spacing: 1 Cell padding: 2 Table border width: 3

SAMPLE 3:

This is a simple gif with blue background placed into a CSB made table.

Table settings: Shadow color: dark blue Highlight: Gray Vertical alignment is Middle

Cell spacing: 1 Cell padding: 0 Table border width: 5

background of table is transparent, cell is transparent (causes inner gray border around image)

3D EFFECT!! In the design window there is a little diagonal line showing in the upper left corner bottom right of the border of your image making the border look more 3D.
USING CSB-TRELLIX TABLE:	USING IRFANVIEW: (FREEWARE)
Neither will appear on your site - they are design reference only.	You can add the beveled edge to an image before placing it into your webpage! Image > Effects > Effects Browser > 3D Button Can be done with other photo editing software too!

SAMPLE 4:

This is a simple gif with a blue background placed into a CSB made table.

Table settings: Shadow color: dark blue Highlight: gray Vertical alignment is Middle

Cell spacing: 1 Cell padding: 0 Table border width: 5

background of table is transparent, cell is blue to match image so no gray border around image.

Note: You can also make your table specific height/width to match your image to get rid of the extra background color. To assign a specific cell/row height or width:

Right click the table > Properties > Table > Size & Alignment tab ROW HEIGHT

This is the way it looks in my tlx file:

(I use a small box for my image placeholder)

SAMPLE 5:

This is a transparent gif placed into an HTML table, placed into a CSB made table for a double border. The inner border is a RIDGE.

CSB SETTINGS FOR OUTSIDE BORDER:

Table settings: Shadow is same as highlight color Vertical alignment is Middle

Cell spacing: 2 Cell padding: 2 Table border width: 1

USE INSERT > HTML (or insert a webgem) TO CREATE THE SPECIAL TABLE

Code used for the inner RIDGE border and image:

<TABLE class=s2

style="BORDER-TOP-STYLE: ridge; BORDER-RIGHT-STYLE: ridge; BORDER-LEFT-STYLE: ridge; BORDER-BOTTOM-STYLE: ridge"

cellSpacing=0 cellPadding=0 width=81 align=center border=5>

<TBODY>

blue = change this for the style of border

red = change this to your image specifications.

SAMPLE 6:

This is a transparent gif placed into an HTML table with the border style: GROOVE.

USE INSERT > HTML (or insert a webgem) TO CREATE THE SPECIAL TABLE

Code used for the inner GROOVE border and image:

<TABLE class=s2

style="BORDER-TOP-STYLE: groove; BORDER-RIGHT-STYLE: groove; BORDER-LEFT-STYLE: groove; BORDER-BOTTOM-STYLE: groove"

cellSpacing=0 cellPadding=0 width=81 align=center border=5>

<TBODY>

blue = change this for the style of border

red = change this to your image specifications.

Border styles: for full examples of table borders, visit Curtis' website!		inset
dotted	double	ridge
dashed	groove	outset

SAMPLE 7:

This simple jpg image has a thin lighter uneven border around the edges.

It was made in a photo program by choosing the paint brush and adjusting the opacity setting.

When placed in a table with the same color background, the edges fade out and the image apears to be torn or jagged along the edge.

SAMPLE 8:

This simple jpg image has a thin white border around the edges. It was made in a Paint Shop Pro photo program.

Choose Menu item: Image > Add Borders 2 pixels, Check Symmetric

A slight white edge now surrounds the image!

This technque can be made with ANY photo program.

An example of adding a solid color border around an image using the free Printkey program. This little freeware piece (with no ads or spyware in it) allows you to to make simple edits to your image in several ways, including resizing, adding a frame, adjusting color, etc. Use it to adjust the BRIGHTNESS/CONTRAST on an image to create a watermark image for the behind your text!

SAMPLE 9: This sample shows that with a photo program, you can apply a pre-designed frame to create a beautiful 3D presentation.

SAMPLE 10: This sample is made with Paint Shop Pro 7:

How about an off-center frame to make it look like a POLAROID picture?

Your image should be fairly square. You can crop it if necessary.

In Paint Shop Pro photo program,

Choose Menu item: Image > Add Borders

UNCHECK symmetric

Make the bottom edge wider.

Now you have a polaroid photo!

Want the image to have a drop shadow like this?

In Paint Shop Pro, choose Image > Change Canvas Size

Add four pixels to the right and bottom. OK.

Now using the selection tool select only select the original image leaving the 4 pixels on the right and bottom unselected!	Choose Effects > 3D Effects > Drop Shadow Adjust the settings to the way you prefer. Press the to preview the settings on the original image. These are my settings for this image:
	Get rid of dotted lines: Selections > Select None You are done. File Save As to make a new image.

SAMPLE 11: This sample is made with Paint Shop Pro 7:

(Could be done in PSP8 or any image software with selection layers!)

BEFORE

plain edge

AFTER

2 borders

Open an image. If you would like to use my image for practice:	spazwindowplain.jpg
On menu, click Selections > Choose Select All You have marching ants around the image.
Choose Selections > Modify > Contract For this example I used 10. You now have ants marching inside the image.
We want to leave the inner part of the image alone. But we want to change what is outside the ants. Choose Selections > Invert Now you have 2 rows of marching ants. The area that has been selected is that outer FRAME around the image!
You can now choose how you want that outside edge to look.
On the palette, choose a color for the top box (foreground) (I chose white) Choose Flood Fill as your tool. Click your pointer in the outer frame and you have the colored frame around your image. This looks like a photo taken in the 60's with the white edge!
Don't like the color? Change to the eyedropper tool. (I found a green in the image that I liked with the eyedropper.) Then change back to flood fill and click in the outer border area. This time the border is green. Get rid of the marching ants: Selections > Select None
For added interest, choose Menu item: Image > Add Borders 2 pixels A slight white edge now surrounds the green border!

File Save As to save the modified image under a new name, keeping the original intact.

SAMPLE 12: USE HTML TABLES TO CREATE BORDERS AROUND YOUR IMAGES!

Tables allow you to overlap images for dramatic effects. The image to the right is a

3 layered table creating a look of a matted frame.

The outside table is a simple one column one row table made in CSB, set to 344 pixels wide with a white background color.

The second and third tables are made using HTML code that is placed into the center of the white table using insert > HTML (webgem in Trellix).

The second table has an image background, a small blue square (automatically tiles to fill the table). The third table has no border, and its background is the jumping image.

The code for the layered image is here.

Richard's layered image in a table shows a full color image with a colored background creating a frame.

If you would like this image effect, combined with text or with mouseover links that change color and to CAPS on rollover, then visit my background section and see Example 4!

Images are lightened to create a watermark effect so text can be placed overtop an image and still be readable.

Click image to see samples with links & get the code!

HOW TO CREATE A WATERMARK IMAGE (moved here!)