Advanced Search

The BoxedArt Guide to Using Website Templates

How Do I Edit the Text on an Animated Banner Pack?

see also: Using Adobe Photoshop to Edit Graphical Image Text
Using Alternative Graphic Programs to Edit Graphical Image Text

Once you have customized text and photos in your template's animated banner pack, you'll need to produce new animated .gif files.

If you are not using Photoshop or Illustrator, you may open the blank versions of your gifs, add text, and then use a gif animation software to create new animations. Freeware gif animation programs such as ULead or CoffeeCup can be downloaded off the Internet and are quite simple to use.

To create animated gifs from your template's .psd files:

Open your template's banners/psd folder and choose the .psd file you want to animate. After editing your text and photos, do one of the following:
For versions of Photoshop prior to CS3, save the .psd file with your changes, and then open the file in ImageReady.
Or, in Photoshop CS3 and above, go to the top menu and choose Window > Animation


Animation is done by selecting a frame (or adding a new frame) in the animation bar, and showing the layers you want to be visible, while hiding the layers you do not want to be visible in that one frame. The picture above shows what layers make up the visuals in Frame 1 of your animation, and what layers are hidden and do not show in Frame 1. Your next step would be to click on Frame 2 in the animation bar, go to the Layers panel and click the eyeball icons (circled above) for the layers you want in Frame 2, and turn off the eyeball icon for those you do not want in Frame 2. Then move on to Frames 3 and 4 and do the same. Add more frames if so desired by clicking the new frame icon (circled above).

When you have completed the frames you want for your animation, save it as a gif file:
From ImageReady, use File > Save Optimized As
From Photoshop CS3 or above, use File > Save for Web

Note: you must save as .gif for your image to be animated. Also, Photoshop does not show animations if you open the completed gif file from Photoshop - it will only show the still first frame. To check out your animated gif, open it in a browser (right-click on a .gif file's icon and choose Open With).


Back to Design Tutorial