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
- 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
- Say you are using Pic1.jpeg & pic 2.jpeg
- It is adviable if the pictures have same width and/ or height for best visuals
- 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
- Open both Pic1.jpeg & Pic2.jpeg in Photoshop
- Create a New Photoshop file from FILE — NEW — Sepcify the width and height
- 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
- Keep the Layers pallete visible…WINDOW — LAYERS
All New files will have a default layer which serves as the background
|
3.THE ANIMATION PROCESS
- Now you must have your pictures in the desired sequential manner in the respective layers
- 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”
- You may see in my layer pic that only the ist layer has the “Eye” icon.. all the other lauers donot-have-eye-icon
- This can be done by selecting the respective layer and clicking on the “Eye”
- Enable the animation pallete WINDOW — ANIMATION
- Since all the required pictures are arranged in layers…we need not worry about adding indivivual frames and modifying them
- We can convert all the layers into frames using the option given in the animation palette
- SEE PICTURE
- this will convert all your layers into frames
- 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
- You may set the time for each frame..at the location specified in the pic
- Use the Play-buttond to see the animation. (inside photoshop)
- Once fully satisfied you may use the FILE — SAVE FOR WEB — GIF FILE
- Now you have a Gif file in the folder..view the gif file in IE
- 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