How to Create Animated Icons Using Pictures

Animation adds a sense of energy and motion to a website, which helps to catch the eye of visitors. This is important if you are hoping for repeat visits. While you can use pre-made animated icons, if you want custom animated icons that are based on your own pictures, you can either hire someone to make these for you or you can make them yourself. There are several approaches you can take to do this.

Instructions

Things You'll Need:

• Photoshop
• GIMP
• Online Converter

Photoshop

1. Step 1

   Open Photoshop. Select "File" and click "New." In the sizing dialog, make the width and height what you want for your animated icon. Leave the resolution at 72, make the background "Transparent," name the file "Animated Icon 1" and click "OK."

2. Step 2

   Select "File" and click "Open." Browse to the images you want to use and open them. Use the "Copy" and Paste" function under Edit to place each image in the Animated Icon 1 document. Each will appear on its own layer. Re-size each to fit the canvas.

3. Step 3

   Select the "Animation" option under "Windows." In the time line that appears at the bottom of the screen click on the drop-down arrow in the upper right. Choose "Make Frames from Layers."

4. Step 4

   Select "File" and click "Save for Web or Devices." In the dialog, choose "GIF" as the file type and save your file.

GIMP

5. Step 1

   Open GIMP. Select "File" and click "New." In the dialog, make the size what you want for your icon, make the background "Transparent" and click "OK."

6. Step 2

   Select "File" and click "Open as Layers." Browse to and open the images you want to use. They will appear as new layers. Re-size each to fit the canvas.

7. Step 3

   Select "File" and click "Save." In the following dialogs choose "Make Animated," set the frame duration and choose "Replace." Click "Export" to save your animated icon.

Online Sites

8. Step 1

   Load all the images that you want to use onto your computer and save them to a single folder. In order to organize the process, name them for the order you want to use them in the animation (1,2,3... or A,B.C...).

9. Step 2

   Go to an online site that converts pictures to animated GIFs for free, such as gifninja.com or Picasion.

10. Step 3

    Upload the images you want to use in the order you want them. Choose the speed and size of the animated GIF and submit the images. Then just download your GIF animated icons.