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.
|
