Author: Deepa Govind

Sometimes we would like to create our own animated gif files..It could be either using 2 ( or more) picturtes available with us ( say some of own digital photos) or comming up with your own creation of an animated picture

	Here I have use 2 existing jpeg files and put them in a loop so that both the pics appear on and off
	Here I have used a collection of pictures to create the effect of opening and closing of a Star as a single animated gif file….I found geometric designs to be easy for learning puropse…and i have used 6 bmps here

In order to be able to do this.. you need to have Photoshop / Image-Ready already installed .. you must be willing to give yourself some time to learn about the workspace get used to the environment…Follow the instructions carefully

1.THE PREPERATION

1. If you are going to create your animation form your existing collection of jpegs.. then I suggest taht you copy them and place them in an exclusive folder in your hard disk..say C:\Testing_animation
2. Say you are using Pic1.jpeg & pic 2.jpeg
3. It is adviable if the pictures have same width and/ or height for best visuals
4. I have used Photoshop CS2 to create the animation..But the instructions would be similar for pre-CS2 versions also….(if the Animation option is avilable)

The Star.gif uses 6 bmp files each with the same 100×100 dimentions

2.PHTOSHOP CS2

By now I hope you would have decided on the dimentions of your gif file and chosen the pics accordingly

1. Open both Pic1.jpeg & Pic2.jpeg in Photoshop
2. Create a New Photoshop file from FILE — NEW — Sepcify the width and height
3. Before we actually begin our animation lesson.. Lets see the order of the pictures

   Pic_1 — Pic_2 –Pic1

   Here we will be putting pictures in photoshop in this order using layers

4. Keep the Layers pallete visible…WINDOW — LAYERS

All New files will have a default layer which serves as the background

Add Pic_1 to layer1 Add New Layer — Add Pic 2 (Layer 2) Add New Layer — Add Pic 1 (Layer3)…this is to give an impression of loop You may name the layers appropriately Donot worry over what you may see on the image canvas at this point of time I have given the layer palette of my star.gif where I have used bmp’s The layers are named for quick refrence Save this file in psd format … so that you may reuse for editing in photoshop againAlso save a backup copy ( psd format) at this point on Make sure that the pictures are well arranged in the layers .. in exactly the same order as you want them to be displayed in the gif file You may rearrange the layers by click-and-drag methord

3.THE ANIMATION PROCESS

1. Now you must have your pictures in the desired sequential manner in the respective layers
2. Make sure only the first layer (first pic to be displayed) has its EYE TURNED ON… Rest all the layers must have its “eye-turned-off”
3. You may see in my layer pic that only the ist layer has the “Eye” icon.. all the other lauers donot-have-eye-icon
4. This can be done by selecting the respective layer and clicking on the “Eye”
5. Enable the animation pallete WINDOW — ANIMATION
6. Since all the required pictures are arranged in layers…we need not worry about adding indivivual frames and modifying them
7. We can convert all the layers into frames using the option given in the animation palette
8. SEE PICTURE



9. this will convert all your layers into frames
10. The technical-know-how is…..Cick on each frame and see that only its corresponding layer will have the EYE-TURNED-ON…..Rest all layers will have its eye-turned-off
11. You may set the time for each frame..at the location specified in the pic
12. Use the Play-buttond to see the animation. (inside photoshop)
13. Once fully satisfied you may use the FILE — SAVE FOR WEB — GIF FILE
14. Now you have a Gif file in the folder..view the gif file in IE
15. You may now upload this gif file and display it using <img src= ” ___ “/>

IF this post has been helpful to you..kindly leave a comment and express your appreciation by linking back to this post.
Your appreciation is my motivation