Thursday, June 19, 2014

Create Animated Banners & Icons

A banner like this can be animated using the right program.


Animated banners and icons can do wonders for your web page, if used correctly. A good animated image will capture the viewer's attention and encourage her to spend more time viewing your content. You do not have to be a great artist or web designer to know create these animated images; all you need is some basic knowledge of the design program you will be working with.


Instructions


1. Determine which program will best suit your needs. There are many design programs available that have the ability to create an animated banner or icon. Look at some of these programs and compare the features and complexity of each, and then choose one to begin working with. Some examples of design programs that can create animated images are Adobe Photoshop, CorelDraw, Flash and GIMP.


2. Create a beginning image. Draw an image or select a pre-existing image that will be your first "frame." An animated image is divided up into several frames. Each frame is a different step in the animation. When all of these frames are viewed quickly one after the other, the image appears to move and becomes an animation.


3. Create the series of frames for the animation. Depending on which program or which version of a program you are using, you may have to go about this step slightly differently according to how that program is designed to create animated images. However, the same basic principle is the same for every program. Copy the beginning image and then alter it slightly so that it reflects what is going to happen next in the animation (such as having a person move their legs slightly to show that they are walking), or make an entirely new frame that will be next in sequence (if you are not trying to show movement). In programs like Adobe Photoshop, this step can be achieved by creating a new layer on the animation palette and then changing the visibility of the layers in your layers' palette so that the next frame is visible. In Flash you have to create a new frame on the animation timeline.


4. Save your animation as the correct type of file. This step also differs depending on which program you are using, or which version of a program you are using. In Adobe Photoshop, choose the interval of how fast your animation will be played, and how many times it will play, and then choose the "Save Optimized As" option in the file menu. In Flash, open the properties window and then click the "Settings" button in the publish option. Select the GIF tab and click the "Animated" option. Save and publish your animation.