Graphics Zone - Creating a Reciprocal Banner

CE CASH 3.0

ANS Linklist

Creating a 120x60 Animated Reciprocal Banner in Photoshop

by BarryHilton, Adult NetSurprise

In this tutorial we'll be designing an Animated Reciprocal Link Banner! Start by opening a new image 120x60 pixels in size... Click Here to view Screen Shot with Instructions

Save the girl image to your harddrive (right click > save as) and load it into Photoshop... Click Here to view Screen Shot with Instructions.

The girl image is a little too big for our 120x60 banner, resize the girl to 140x113 pixels in size... Click Here to view Screen Shot with Instructions.

When you resize images they can go blurry, to correct the 'blur' apply a Sharpen filter your girl image... Click Here to view Screen Shot with Instructions.

Now, drag the girl image into your banner by clicking and holding your mouse button... Click Here to view Screen Shot with Instructions. NOTE: Gif images need to be made RGB color FIRST... If you're using a Gif, go to the Images menu at the top of the screen and select Image > Mode > RGB Color, then you can drag your image as normal!

Select your Foreground Color... Click Here to view Screen Shot with Instructions.

Select the Text tool and set up the Font and Spacing information for your chosen Font, then click inside your image and type your text... Click Here to view Screen Shot with Instructions.

Add a Stroke effect to make your text stand out... Click Here to view Screen Shot with Instructions. This is particularly useful when your text is on a 'busy' or detailed background.

Change the Stroke size to 2 pixels... Click Here to view Screen Shot with Instructions.

Now, duplicate your text layer, this makes it quicker to set up the second text frame for your animation... Click Here to view Screen Shot with Instructions.

Highlight the new text layer and type 'Click Here', and switch to Image Ready from Photoshop... Click Here to view Screen Shot with Instructions.

And make the Click Here text layer invisible again, setting up the first frame in our animation... Click Here to view Screen Shot with Instructions.

Select a 1 second delay for our animation (this is the time that each frame will be displayed for)... Click Here to view Screen Shot with Instructions.

Add a second frame, and update the view to show your Click Here text... Click Here to view Screen Shot with Instructions.

Save your image as an animated banner! Click Here to view Screen Shot with Instructions and our final example page.

And here's our completed banner... Click Here to view our final example page.