In this Photoshop tutorial you will learn how to create a professional-looking web adbanner for a domain registration website. As seen below:

Professional Adbanner

To start off create a New Document, and give it the official adbanner size (468 x 60). Choose a transparent background. Now fill the background with Grey (#818181) and a darker grey (#3C3C3C), as shown below:

It doesn’t matter if the cutoff line is straight or now, we’re going to be creating a smooth shape to cover it up in a little bit, but first apply the following effect to the background layer:


Now we have the background set up, let’s move on to creating the smooth shape that will separate the light and dark Grey colors. Grab your Pen Tool and create a shape as seen below:

NOTE: Your background should not be blue, but draw the shape as seen above in a very light Grey color (#EBEBEB). Now apply the following effect to the shape:

Bevel and Emboss:

You should now have something like this:


Now let’s move on to filling up the left side of the banner. On this side we will only add text. The text will mainly describe the website/promotion. As you can see below, I’ve added the promotion, description, and website address in the font ‘Rasputine DemiBold‘.


NOTE: The banner above was not made for a specific website, I used just as a space filler.

Let’s move on to filling up the right side now. I figured since all the way up to now we’ve been using neutral colors, that we add some color to the right side. I wanted to add a button/shape with the color red (#E20000). Grab your Custom Shape Tool and from the drop down menu on top grab one that looks like a star (). Rasterize your star layer so you can apply some cool effects to it. Now apply the following effects to it:

Bevel and Emboss:



Gradient Overlay:

You should have something like this:

Now duplicate the star shape layer and fill it with white (but make sure only the star is filled with white). Now grab your Elliptical Marquee Tool and select the bottom half of the white star and cut it. Set the white star layer’s Opacity to somewhere from 10-25%. You should have something like this:

Now add some text to the shape and you are done!