BordersOnImages

Using Borders on Images
Programs Used: Photoshop 5+
Skill Level: Basic

Ever gone to a Site preview or Tour where they offer preview images? Did they do anything fancy to the thumbs or were they just inserted in nice little rows and columns? I am not knocking the webmasters who do this because sometimes having preview images can really increase your sign-ups. But I wonder how much better those signups would be if the thumbs were'nt just inserted as is, but had some nice creative effect on them in the form of a border. This technique can also be especially handy for submitting to AVS sites (especially the GOLD or high-end ones) where they demand you have a nice looking tour. There are so many different ways to make a thumb look more interesting that I will only be scratching the tip of the iceberg writing this tutorial, but it should give you some more ideas when you start to design your next site.

I am going to show you five techniques to help spruce up your preview thumbs.

Open your small image in Photoshop and for all the techniques I am using below I'll require that you do the following:

- If the image is on a single layer, I want you to cut our the image and paste it into another new layer. To do this quickly just push <CTRL> + <A>, then <CTRL> + <X>, and then <CTRL> + <V>. This should successfully add your image into a new layer.

- If you are using a GIF Image then you will need to convert it to RGB Mode by selecting IMAGE >> MODE >> RGB COLOR.

BORDER ONE: The Stroked Image

1. Select IMAGE >> CANVAS SIZE, and add 10 pixels to the width and height of your image. This will give you a white border 5 pixels wide around your image. If you think this looks ok then stop here :-)

2. Select EDIT >> STROKE and set a stroke around the outside of your image by 2 pixels. This will create the first border.

BORDER TWO: The angled rectangle

1. Select IMAGE >> CANVAS SIZE, and add 20 pixels to the width and height of your image.

2. Create a new layer and drag it down underneath your picture's layer.

3. Hold down <CTRL> and then click on the picture layer to make a selection of equal proportions.

4. Make sure your NEW Layer is selected and then fill it with a nice color, we chose a basic red.

5. Select EDIT >> FREE TRANSFORM and tilt your New layer about 5 degrees.

BORDER THREE: The Filter border

1. You can use just about any filter for this border so it doesn't really matter which filter you use just so long as you like it.

2. Make a selection of your image which is about 10 pixels in from the edges.

3. Go to SELECT >> INVERSE

4. Go to the FILTER Menu and go nuts trying to find an effect you want.

TEXTURE >> GRAIN	BRUSH STROKES >> ACCENTED EDGES	BRUSH STROKES >> SUMI-E	RENDER >> CLOUDS	RENDER >> DIFFERENCE CLOUDS	SKETCH >> BAS RELIEF
SKETCH >> CHROME	SKETCH >> CONTE CRAYON	TEXTURE >> CRAQUELURE	TEXTURE >> PATCHWORK	TEXTURE >> STAINED GLASS	TEXTURE >> TEXTURIZER

BORDER FOUR: The Opaque Border

1. Make a selection of your image which is about 10 pixels in from the edges.

2. Go to SELECT >> INVERSE

3. Create a new Layer and fill it with a color (any color)

4. Right click your new layer and go to Layer Options and set the opacity to 50%.

Here are some results:

BLUE	YELLOW	GREEN	MAUVE	PURPLE	RED

 

BORDER FIVE: The Bevelled Frame

1. Select IMAGE >> CANVAS SIZE, and add 15 pixels to the width and height of your image.

2. Create a new Layer and then hold down <CTRL> and then click on the picture layer to make a selection of equal proportions.

3. Select EDIT >> STROKE and set a stroke around the outside of your image by 5 pixels in your NEW LAYER.

4. Right click your new layer and select effects.

5. Untick the DROP SHADOW option, and select BEVEL & EMBOSS from the drop down box.

 

Don't forget to experiment with different colors and sizes/widths to the ones used here.

Also try simply applying drop shadows and inner shadows to your thumbs, you'll be surprised at the difference they make.