Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Professional Domain Site Adbanner

Professional Domain Site Adbanner


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

img

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:

img

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:

Gradient:

img

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:

img

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:

img

You should now have something like this:

img

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'.

img

NOTE: The banner above was not made for a specific website, I used domainsite.com 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 (img). Rasterize your star layer so you can apply some cool effects to it. Now apply the following effects to it:

Bevel and Emboss:

img

Gradient Overlay:

img

You should have something like this:

img

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:

img

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

img



Author's URL: Aviva Directory
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: