September 10th, 2006 in 
Advertisement
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!
No related posts.
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.
Uhh… thanks anyway :/
Nice tutorial, ive been looking for something like this for awhile
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.
Very nice and simple tutorial , good work!
-Vandyke
hey thnx a lot for this tutorial .. it’s super .. but just one problem
.. please gimme the link to download that “Helvetica Neue LT Std” Font
Very Nice and too Simple to Design.
Thank you very much, very brilliant I hope I see more good ideas like this.
Regards
another good tutorial
nice tutoirals
any other ad of banner can u post
Very Very Nice Tutorials.Thanks
I love the way the tutorials are broke down into simple steps… makes learning PhotoShop a lot easier than most books I have read.
wow, very nice i have now idea what kind of banner i can use for my site http://www.designersyard.com
ABUSE
I spotted this tutorial on a dutch site, no credit was given. The full link to this website is:
http://www.photoshop-tutorials.nl/Web-Graphics-Banners/Website-Banner.html
The tutorial is posted by Walter, who appears to be the administrator, evidence:
http://www.photoshop-tutorials.nl/forum/viewtopic.php?f=8&t=12
I hoped this info helped, and will prevent such fake and wannabe photoshoppers.
Thanks for the tutorial.
You make it look easy …
Thank you. Simple and clear lessons
I have found a lot of useful information here. Thank you a lot
not workable tutorial