Affiliate Banner in Photoshop
Jan 7, 2009 Photoshop, Web Graphics
This tutorial has been viewed: 5603 times
In this tutorial we are going to create an Affiliate Banner like below:
tip:
Affiliate banners have standard sizes the standard size below is 120×240 pixels, to see a full listing of all web-banner sizes click here.
Step 1: First creat a a new image, make the background transparent, and the size 120 pixels wide by 240 pixels tall *note see the tip above to see about standard web banner sizes.
Step 2: Now you are going to want to create the shape of the affiliate banner using the rectangle tool 
set the radius of the tool to 10px put the cursor near the top left hand corner of the document and drag down towards the bottom right of the document. *Note* If you want to use the same color scheme we use, remember to set the foreground color to: #009543; Or you can fool around with a color you think would look good, or better portray your message.
Step 3: Next apply a stroke to the layer,
tip
to create a Layer style click on the 
button on your Layers window, in this case you’ll want to select stroke.
I applied the following settings.
Step 4: We are now going to be adding some glow effects to the banner, first make a new layer, by clicking on the new layer button 
, Now with that layer selected press ctrl+g, what this will do is make that layer “Mask” the layer underneath it i.e. things will only show on that layer if it is “touching” stuff in the layer underneath it. Grab the rectangular Marquee tool 
, make a selection of about the top 4th of the rounded rectangle box, now select the gradient tool 
set it’s style to foreground to transparent (top box you can make the gradient tool work by making it move from solid color to transparent color), and drag the gradient tool from top to bottom like so. REMEMBER!! to set the foreground color to #00F943 and the gradient from solid to transparent.
To come out with:
note how the solid to transparent gradient is selected, as well as the correct foreground color
Step 5: Now we are going to do about the same thing just a more subdued gradient, pull out the marquee tool again make a selection from the bottom up to almost 3/4′th of the way. After that pull out the gradient tool, , remember to keep the same settings as the previous step and use the gradient tool like so *note how we don’t “pull” the gradient all the way through the marquee this allows for a more “blended look”:
That should produce this:
And that is about it, I borrowed some photos from MorgueFile.com A great website that offers free professional stock photos. I cropped the images from there and positioned them on top of that banner, then added the Monkey Feather Logo (MonkeyFeather.com is a high quality hosting company that psdesignzone.com recommends above any other!) and some other advertising text with an outer glow to get a decent looking affiliate banner like below:
Tip:
A ‘Stock Photo’ is usually a high quality real life image, that if used properly can add alot to web-design and design in general.
February 4th, 2009 at 3:40 pm
Hi there,
not bad…
Thanks
Elcoj
[Reply]
May 9th, 2009 at 1:09 pm
i read every single of your post sometimes i read it over and over again ..you really inspired many people here..wish you a good luck in everything you do..
[Reply]