If you want your site to be successful on the Internet you should remember that good design and content are not enough. You will need some advertising. One of the best ways to do that is to place your banners on other websites. In this tutorial I will describe how to create a banner for your website. I will tell you about the most common variation of banners - a small 88 x 31px button. I will use the Web Design Library as the example. You can create a similar banner for your site using the techniques described in this tutorial. Well, let's start:
Open Photoshop and create a new 88 x 31px document. As a beginning you have to choose a good background. The background color should match or coordinate with the colors of your website. In our case it's #0C7A94. Now, fill the background with this color.
Next - Banner Content. I want this banner to consist of two parts: upper and lower. The upper one will be static and contain all the recognized WDL elements. However, the lower one will be dynamic, with arrows and symbols showing the main WDL activities.
I'll start with the upper part. The academic hat logo and the inscription "Web Design Library" are recognizable symbols of WDL. The academic hat is small enough to be placed on a banner, but there could be possible problem with the inscription. So, I decided to take only initial letters: WDL.
I decreased the size of the hat and the WDL letters to become 13 pixels high (with proportional width, of course). 13px - it's a bit less than half of the banner's height. Our task is to place them in the upper part and leave some space for the lower part.
Add them to the upper banner part. The hat looks better on the left and letters - on the right. Now merge the layers.
Now we can work on the lower dynamic part. I want arrows to appear on the left, pointing to some application, which is included in the tutorial categories of WDL, and then disappear. Then a new arrow should appear on the right side, pointing to a new application. This will continue until line reaches the end. (You can use this for any products you are promoting) To do this we'll need icons for each application. I chose Photoshop, Flash, CorelDraw, Dreamweaver, and 3DsMax for this.
Open the icons of these applications in Photoshop (make a screenshot; download from the Internet, etc.). Then you can use any way you like for cutting them out of the background (I recommend that you to read this series of tutorials, if you don't know how to do that). Then resize it to 13 x 13 pixels. I now have the following icons. Keep them open for a while, don't add them to the worktop yet.
Now let's deal with the arrows. Create a new layer. Draw a dot using this color #b3b3b3, in the lower part of the document, 2 pixels from the left and 7 from the bottom.
Duplicate the layer, then draw a triangle consisting of 4 pixels, at a distance of 1 pixel to the right.
Duplicate the layer, and again draw a larger triangle consisting of 9 pixels, at a distance of 1 pixel to the right.
Duplicate the layer, draw an even larger triangle consisting of 16 pixels, at a distance of 1 pixel to the right.
Duplicate the layer, now place the first icon - Photoshop, at distance of 1 pixel to the right.
Now Duplicate each layer with arrows and move to the right for the 13 pixels. Don't be afraid if they overlap the Photoshop icon. If you are confused by it, you can hide layer with software.
Just like we did it before, add the following icon at a distance of 1 pixel to the right.
Continue moving the arrows to the right and adding icons, until you get something like this (you don't need to add arrows to the very end - only the icon):
This is how it will look if we hide all the icons:
And this - if we hide all the arrows
This part in Photoshop comes to an end. Now it's time to create animation in ImageReady. So move to ImageReady.
This part in Image Ready is extremely simple, because of the careful creation of the layers in Photoshop. Open the animation panel, then press the little triangle in the right upper corner of the panel. Press the Make Frame from Layers . Then select all the frames, press the eye icon on the background layer (to make it visible on each layer). Also set the Delay Time at 0.1 seconds for all layers.
The animation is now ready. The last thing to do is to emphasize those layers, when then icons appear. Select the layers with icons and set the Delay Time for them at about 0.4 seconds. Here is my final result:
