Wide's World

Diamond-Eye Jacks

by

Widearea

Strapon Cash

We will continue our journey into animating elements for our adult websites. In making a banner or button we will look at some of the basic principles of creating compelling animations using a simple text effect. It is entirely possible to use simple methods to create highly optimized and successful graphics that should enhance any clickthrough rate and capture sales for your adult sites.

Basic Text Transition Effect

We will create a basic animated banner using a simple motion blur between frames to create animated text transitions while branding our corporate identity simultaneously for maximum results in our interactive advertising.

1. Select File -> New and create a new canvas for your button or banner. The example here is 468 x 60 pixels.
2. The ad should have some static elements, and I would argue that one major consideration for any animated advertising unit is the branding of your client, product or service. Branding is important in online marketing as it creates a lasting impression on your audience, and serves to capture attention and occupy mindshare of your customers. In this example, we will use the VNWR brand and identity as a static background to impress the VNWR identity throughout the animation. You can create your own, obviously, using your own company, site name, etc.

Click Here For The Image

3. Create your first messaging element. Keep that layer active (selected) in the layer palette window. The layer palette window can be shown or hidden by selecting Window -> Show/Hide Layers.
4. Select Layer -> Duplicate Layer to copy the type layer.
5. Select Layer -> Type -> Render Layer (Mac) or Layer -> Type -> Convert to Shape (WIN).

6. Select Filter -> Blur -> Motion and select the angle and distance of blur. In this example we used -90 degrees and a distance of 20. Select OK/ENTER.

7. Repeat steps 3-6 for every messaging layer you choose to employ. In the example we will transition three specific type layers.
8. Export for animation. If your GIF making program allows importing of layered images files, save file as psd and import into GIF program. Otherwise, each layer should be exported as a single gif file.
9. Using your GIF software, set the rate of display for each frame and optimize your palettes for display in your web page. For our example we used .1 seconds for the transition frames, and 2 seconds for the actual messaging frame. The gif was set to 32 colors with a 5% dither.

Click Here For The Image

Using a simple motion blur filter and a couple of frames of text, a fairly simple yet effective banner can be created. If you experiment with this further, you can try different angles for different motion effects. Additionally, you can attempt to explore other blur filters for more varied effects as you gain understanding and develop your own style. Remember to use short phrases and always include a call to action. That alone will outperform banners that lack a decisive statement telling your surfers what to do. Well, I hope you enjoyed yet another excursion through Wide's World. Good luck in your own discovery of a very exciting, fun and powerful method of visual communication. Until next time, Happy Hunting!

Reference