Professional Advertisement Banner (468×60)

Hey, welcome to PhotoshopStar and thanks for visiting! In this easy tutorial I’m going to be showing you how to create a sleek, professional advertisement banner (the 468×60 kind) Below I’ve got an image of my outcome from this tutorial, so, if you like what you see, then get started with the tutorial!

1. Starting the Canvas

Start by creating a new document in Photoshop. I’ve used the banner size 468×60 pixels for this tutorial, but you might want to make it slightly larger than the banner itself, so that you can see what you’re doing better.

After creating a new document, fill the background with a dark (or light) gradient of your choice. It really depends on what you’re making this banner for, if it’s for your site or if it’s just for this tutorial. I filled the background with a dark gradient consisting of #1E1E1F and #000000.

2. Adding Background Details

Now to add a few nice details to the background. Start by filling a new layer with a color of your choice (in this case, I used a bright blue – #01C1E7) now create a path using the Pen Tool as shown in the below image:

After making your curvy path, turn it into a selection by right-clicking on the canvas and going to Make Selection…, after doing this, press delete, now your document should look like this:

Looking alright so far, but to give it a nicer look – change the layer mode for your blue layer to Color Dodge and lower the opacity if necessary.

To finish off with the background details, I added a border and also blended an image into the blue area.

You can create this style border by following these few simple steps:

Create a new layer – Select al.l (ctrl+a)
When you’re on your new layer, right-click your selection and go to Stroke.
In stroke options, use 2 pixels and white as your color.
Again, go to Stroke, this time use black as the color and 1 pixel.
Change layer mode to Soft Light and lower the opacity if necessary.

So you should be left with a pretty nice, well-blended border after that. Now, you can blend in a picture into the background (it’s best to blend a picture into that background that actually relates to your business/website)

3. Logo / Text

Now for the most important part, adding your websites name, description & URL. Start by getting the Horizontal Type Tool and writing out your website name on the canvas.

The font I’ve used in the above image is called Myriad, and should come with Windows (it did with mine at least)
The font size I’ve used with the first line of text is 24 pt and the bottom line 12 pt. After finishing up with writing your text, you can apply the following layer styles to your text to make it stand out more:

And now your text should look something like this:

Well that’s pretty much it for this part, continue onto the next step.

4. URL Container

An essential to website banners is that the URL be in the banner somewhere, just in case people prefer writing the URL into their browser rather than clicking the banner. So I designed a little URL container in the bottom right of the banner.

To start off, find and get out the Rounded Rectangle Tool and make a rounded box on the canvas (in a new layer) After doing this, cut the bottom of the box off and move it into place (bottom right corner).

(you’ll have to adjust the size of the box according to the length of your website URL.)
After I made my rectangle box, I applied the following layer styles, just for the sake of nice little details:

Now you should be left with something like this:

You probably should have added your URL before finishing off, but anyway.

5. Finish Details

I finished off by adding a few minor details, such as a sort of shiny reflection at the top of the banner, and some thumbnails (to represent what the website is about)

If you need some inspiration for designing your advert banner, you can checkout either of these two websites:

Well, that’s about all for this tutorial, sorry! I hope you enjoyed it, at least a little bit!
If you would like to download the PSD file for the advertisement banner made in this tutorial, then you can of course do so from here: Download Advertisement Banner PSD

Return home. Published Sep 10th, 2006 under Web Graphics.

Digg Delicious Reddit Float Stumble

You must be logged in to post a comment.

15 responses

Faaj said:September 17th, 2006

Uh looks like another banner tut ive seen before…… the bottom box in the center needs to be improved as its in the way, but nice work anyway.

Eli said:September 17th, 2006

Uhh… thanks anyway :/

Mark said:September 21st, 2006

Nice tutorial, ive been looking for something like this for awhile

proto said:September 21st, 2006

I like the tutorial. It’s a tutorial not something thats going to be posted on his/her site. So who cares if a box is in the middle. Just shows what you can do with photoshop. It’s a good tutorial either way. Easy to do simple for anyone at any level. Keep them coming.