Professional Advertisement Banner

Hi and welcome to TemplateSurge.
In this Photoshop tutorial I'll show you how to make a very stylish and professional 468x60 advertisement banner.
Advertisement Banner Result

1.

Ok, first start by making a new document, use a size of 468x60 pixels. That's the size of the ad banner we'll be making.
Fill the background layer with a #a5cbff to #01142f gradient.
Gradient Background
Now you need to make the background a little more interesting. Download this abstract image from StockVault.net, put it above the background layer, change the layer mode to Screen and lastly lower the opacity to about 30-40%.
Your background should look similar to this now:
After Adding Abstract Render
Duplicate the render layer then apply Filter > Blur > Gaussian Blur with an amount of about 2.0.
Also move the render around slightly, you can leave the layer mode and opacity alone if you want.
Blurred Render Layer

2.

Create another new layer, and by now you should be naming your layers, because if you want to change things later on it might take you a while to find the layer you're looking for. After you made your new layer, use the elliptical marquee tool to make a selection covering the right side of the document as shown below:
Elliptical Selection Right
Fill this selection with a nice, bright gradient. The colors I used for my gradient were #fe9101 and #f62202.
Gradient Filled
Looks quite nice thus far, but nothing too special, is it?
Right-click the layer you just made and go into the Blending Options, apply the following layer styles:
  1. Outer Glow
  2. Inner Glow
  3. Bevel and Emboss
Be sure to use the settings that i've shown in red, and you should have a result like this:
After Applying Layer Styles
I also lowered the Fill Opacity for that layer to 95%, it doesn't make much of a different, but you know, nice touches!
Fill Opacity Lowered
Create a new layer then make the selection around the orange section by holding ctrl and clicking the layer's thumbnail.
After creating the selection, draw a black and white gradient inside.
Black White Gradient
After drawing your gradient, move the selection about 4 pixels to the right and press delete.
Selection Deleted
Lastly, all you need to do is change the layer mode for that layer to Overlay or Soft Light.
Layer Mode Changed

3.

Now you can start adding in text. Since this advertisement banner is based on my Photoshop Tutorial website, I wrote in "PhotoshopStar" in large text, and beneath it I wrote "Free Photoshop Tutorials."
Advertisement Text Written
In the above image I used the font "Helvetica Neue," but I think that's a font that costs a lot of money, so you might need to use another font.
After writing out your text, apply the following layer styles to the text layer(s):
  1. Drop Shadow
  2. Gradient Overlay
Your text should now look like this:
After Applying Layer Styles

4.

Now you'll want to add some descriptive stuff into the right section of the advertisement banner, since this ad banner is for a Photoshop Tutorial sites, I added in some tutorial thumbnails.
Added Thumbnails
Since it looks a bit bare, I also added this Stroke.
After Applying Stroke
And that, is pretty much it for this tutorial!
Normally, you'd have the URL to the website, but in this case I wasn't able to fit it in, and I don't feel it was necesary either, as people will click the banner.
Thanks for reading this tutorial, we hope it was easy to complete, and we hope you enjoyed it.
Advertisement Banner Result
For learning purposes only, you can download the PSD file from this tutorial from here.
If you liked our tutorial please digg!