Web Design Library Banner (Exclusive Tutorial)

It is still very popular to exchange link banners throughout the Inet. I was describing the ways to create the animated banners of a standard size 31x88 in my previous tutorials. Though, there are banners of a less popular size yet often used. E.g. 120x60 size. You can place more information on such banners, and they look good, so they surely attract more visitors' attention. So this tutorial is about drawing the banner for Web Design Library.

As for the look of the banner, it would be good to place site's logo on it and some slogan or short description. Also it's a good idea to divide the banner into two parts - for the logo and description. So let's start step by step.

Start with the background. Open a new document in Photoshop with 120x60px size. Set Foreground color #237097 and Background color #11496f. Color the background using gradient similar to the header's background on Web Design Library.

I'd add a logo to the top of the banner - in our case - Web Design Library's cap. Here's .png version for it.

Simply drag it to the banner and place it in the left top side. Reduce the image - make its size - 38x27.

Next place the text 'Web Design Library'. As I can't insert it in one line, I'm placing 'Web Design' on one line, 'Library' - on another.

To learn how to make such text you can use this Tutorial. To make it quicker I've just reduced it up to the proper size.

The upper side is ready. Now it's time to make the bottom. I want to make it as a button. Create the new layer. Make the round selection with the help of Marquee tool.

Next set Foreground color white and fill the selection using gradient.

Create the new layer. Now Contract selection 2px, broaden the selection downward the canvas (holding Shift add the new selection) and fill it with #216e96 color. Deselect.

Now make the following settings in Blending Options:

Add the text to the button. As web design library is absolutely free, I've made 'FREE' in uppercase letters. Next to it I've placed the text 'educational resource'.

Set Foreground color #ffd231 and make the inscription 'FREE' with the following settings: (HelveticaInseratCyr Upright font).

And add Drop Shadow, Gradient Overlay Blending Options.

And at last the small text 'educational resource'.

Set Foreground color white and make the inscription using the following Text tool characteristics:

Add Drop Shadow and the excellent banner for Web Design Library is ready.

Maybe I'd give the final touches to the banner. The black frame. Create the new layer and draw the frame around the banner with the help of 1px black pencil.