Drawing Banner 80-15 (Exclusive Tutorial)

I think there's no need to underline how important banners are in web design. So in this step-by-step tutorial I'm going to describe how to create the animated banner with 80x15 size for Web Design Library.

Create the new document in photoshop with 80x15px size and transparent background. Fill it with #007899 color. Then select Eraser 1px tool, choose Mode: Pencil and remove one pixel from each corner of the banner.

Next select Pencil tool, set #626768 color and draw lines which are one pixel away from the banner's edge.

Now select Ellipse tool, set #626768 color and draw the ellipse as shown on the picture:

Click to enlarge

Add Layer Mask to the ellipse and then select the gradient tool and draw it bottom-up.

Click to enlarge

Now select Pen tool and paint black all the pixels on the layer mask which are on the gray line and also all pixels around them.

Click to enlarge

The background for Web Design Library is ready. Now it's time to add some texts.

Choose any pixel font with 8px size (e.g. this one). And create the layers with the texts: "10000+", "TUTORIALS", "WEB", "DESIGN", ".ORG'. Place them so that "10000+", "TUTORIALS" were in one line, and "WEB", "DESIGN", ".ORG' in another.

Duplicate all text layers. Hide the originals.

Add Drop Shadow in Blending Options to the duplicates.

Hide the text layers with the shadow, and show the original text layers. Apply Motion blur to them with the following settings:

The part of the work which should be done in photoshop is finished. Hide all text layers and go to Image Ready.

Duplicate current frame in animation window. Make visible the layer with "Web" text, and lift it up so that only the lower one-pixel border of letters was visible.

Duplicate current frame, lower the layer still more, so that it is all visible except the upper one pixel border of letters.

Duplicate current frame, lower the layer still more, so that the upper edge of letters touch the gray line. Make visible the layer with "Design" and lift it up so that only the shadow of the letters was visible.

Duplicate current frame, lower the layer with "Web" more, so that it is in the middle. The layer with "Design" text lower one pixel down so that only the lower one-pixel border of letters (as in the second shot) was visible.

Duplicate current frame, hide the layer with "WEB" , and make the layer with "WEB" and applied Motion Blur visible.

Duplicate current frame, hide the layer with "WEB" and applied Motion Blur, and make the layer with "WEB" visible. The layer with "Design" lower more, so that it is all visible, except the upper one-pixel edge of letters (as in the third shot).

Continue this way, until the text "WEBDESIGN.ORG" appears. There must be14 shots in total.

Duplicate current frame and hide all the text layers.

Duplicate current frame and make the appearance of the text "10000+" using the same technique. You can also make the text "TUTORIALS" to go from the right, not from above. To do that make it visible, and shift it to the right so that only the half of it is visible.

Duplicate current frame and move the text "TUTORIALS" toward the right. Duplicate current frame, hide the layer with "TUTORIALS" text, and make the one with applied Motion Blur visible.

All you have to do is to make delays. In our case we need delays only in those places, where clear texts are. Set the delay of 2 sec on the 14 th and the last shots.

That's it! The banner for Web Design Library is ready. You can use this experience for your future web design works.

Note: This banner was contributed by Jamey Boje Graphicsguru.com