Creating Banner for Webdesign.org (Exclusive Tutorial)

After launching your site, the time has come to promote it on the Net. Two fairly common means of self-promotion are link exchange and floating banner ads. The most commonly seen look for a banner ad is the small, 88x31 pixel .gif banner.

Here's where we begin today. For the beginning, you need to determine the style of the banner and its contents. The style should reflect the style of your site, and the contents should succinctly yet thoroughly describe the site content. It's desirable that the animation should do the same.

I will create an example of banner for Web Design Library:



The first thing on the way of doing this is to select a gradient from our header for creation of the background of our future banner. Next - the contents. The most memorable elements for this are the logotype, the title, and the slogan. Inasmuch as you are quite limited in space (you have altogether nothing more than 88x31 pixels), you can make it so that the inscription and picture replace one another. Now you need to think of some sma llish animation. For example, you can use the Motion Blur filter to make the inscription disappear and reappear by fading out and then in again.

Now we'll move on to practice:

Open Photoshop and create a new canvas having 88x31 pixels. Set the foreground color at #108FA3 and the background color #066785. Using Gradient tool (Foreground to Background) fill the canvas.



Create a new layer and add the first text there: "Web Design Library".

Then add such blending options as Drop Shadow, Inner Glow, Color Overlay, Gradient Overlay with the following settings:






You will get something like this:



Hide the title layer and then create a new layer and add a logo to it.



Hide the hat also. Create one more layer and add your slogan to it.

I used the following text settings:



Now add the same blending options to slogan as you did to the first text: you may repeat adding blending options step by step, or you may simply copy layer style from the first text layer and paste it to the new one. In Layers Palette, right click on Layer with Title and Copy Layer Style. Then right click on Slogan Layer and Paste Layer Style.





Now you have completed base frames.

The time has come to make a transition between them using Motion Blur.
Duplicate the layer with the slogan two times. Select one of them and apply Motion Blur, with Angle set at 0 and Distance at 2. Then select another duplicated layer and apply Motion Blur, but this time with Distance set at 8. Don't forget to hide the layer with the slogan.



Repeat this procedure for the remaining elements: logotype



and title. Then make your title visible again (original).



As soon as you have prepared everything for animation, make all the necessary frames. The concluding step of this tutorial involves assembling these elements and is done in ImageReady.

Go to ImageReady. In Layers Panel you should see something like this:



Go to Animation Panel. The first frame will be the title on the blue background. This must be exemplary, as the first frame should contain the main information.



On the second frame the inscription should slowly disappear, almost melt away. Click on Duplicate current frame. Hide the layer that you used already in the previous frame and unhide the next one, blending a bit. In the third frame, the inscription should disappear a bit more. Click Duplicate current frame. Hide the layer that you used in the previous frame and unhide the next one, blending even more. In the fourth frame the inscrtiption should disappear completely. Click Duplicate current frame, and then hide the layer that you used in the previous frame. You will come up with something similar to this:



Now you can move on to the logotype. Its appearance will look the same as its disappearance, only in the reverse order. Click Duplicate current frame. Then make the the layer visible with an extremely faded logotype. Click Duplicate current frame. Hide the layer that you used in the previous frame and make the layer visible with less fading of the logotype. Click Duplicate current frame. Hide the layer that you used in the previous frame and make the layer visible with a very clear logotype. You will get a result something like this:



Following this principle, create a disappearing logotype, and then an appearing slogan, and then the disappearance of the slogan, and finally the reappearance of the title (but without the final clear frame - we already have this, as we made it in the beginning).



All that remains is to set the delay time between frames. The moments of disappearance and appearance can be set such that everything cycles fast (without delay). But in those moments you should create a delay of one second.

Pressing Ctrl click with the left mouse button on the frame with which you wish to work. Then set the delay at one second.

That's all - the tutorial is finished.



Approach small banners creatively, maintain the integrity of your sites' styles, and everything will turn out well!