Wednesday, October 16, 2013

Make Animated Icons In Photoshop

Make Animated Icons in Photoshop


If you are making a web page, you know that to attract traffic you need to have gimmicks that catch attention. One thing that always has a "cool" factor is an animated icon or button. This article will show you use Photoshop, and its companion program ImageReady, to create your own animated icons.


Instructions


1. Open a new document in Photoshop. You should make it the size of the icon or button you are trying to make. This example the size is 80x30. Since it will be on the web, make the resolution 72.


2. Go to the "Tools" panel, and change the foreground color to whatever you want the icon or button color. Then use the "Fill" tool to fill the canvas with that color. In this case it will be blue.


3. Change the foreground color back to black or whatever color you want the text. Use the "Text" tool to type in the text for the button.


4. Use the "Move" tool and the cursor arrows to drag the text straight up out of view. Then go to "File," and click "Save for Web." Save this as a GIF in a folder. Name the GIF "yourname1." Now move the text slightly lower and into view. Save this one as "yourname2." Continue this process until the text disappears at the bottom of the canvas.


5. Close Photoshop and open ImageReady. Go to "File" and then "Folder Import," and import the folder you saved the GIFs to. This should place the image in order in the timeline. Then go to "File," and "Save as Optimize," and save it as a GIF. This will give you your animated GIF icon or button.