Make GIF images in Adobe Photoshop, that allows you to create basic frame-by-frame animation, perfect for amateur animators. These animated images are then saved in the GIF format, viewable in Internet Explorer, or upload them to Google+
In this tutorial, I will show you how to make GIF animated pictures in Adobe Photoshop, how to save them & also how they can be viewed.
We will solely use Photoshop, Adobe ImageReady is not required in this tutorial.
For this tutorial, you will need the following:
- Adobe Photoshop 7 or above (We will use Photoshop CS5 for this tutorial)
- Any image to be animated
- Internet Explorer or any other GIF viewer
Tutorial to Make GIF Animation
For this tutorial, I will use a landscape pic as the background & will animate the sun across its sky, moving from morning to evening.
I will also make text appear & disappear in this animated GIF picture.
For this, I will need the following 2 different images:
2. I will now create 3 text layers, namely Sunrise, Noon & Sunset using the text tool.
3. Now let’s start to make GIF animation! Go to Window menu & select Animation. A new Animation palette will open up, with a frame in it. This is the first frame of your frame-by-frame animation.
5. Now, for the first frame of our animation, we need the sun at its initial position & the text Sunrise. So, hide the other 2 text layers by clicking the eye icon beside them & position the sun & text Sunrise appropriately.
6. Now click on the first frame in animation palette & click the icon for Duplicate Selected Frames. A new frame will now be created.
7. In this frame, we want the sun to move up, so first click the sun layer & using the Move Tool (V) re-position the sun. Also, hide the Sunrise text layer, to make the text disappear in this frame.
8. Repeat the process 7 covering noon as well as sunset to make the GIF appealing.
9. These 4 frames we have created are called keyframes. Now, we need to bring them in motion, for which we will use motion tweening. Select second frame & click on the Motion Tweening button.
10. In the tween window that opens, edit the settings exactly as the one in the screenshot below & apply the same settings & method for remaining 3 keyframes.
11. You will get a string of frames after this. Select the last frame & set its delay time (time for which the animation stops before moving forward) to nearly 2 seconds.
TIP: You may click on Forever button on the bottom-left corner of animation palette & choose to end your animation after 1 iteration, 2 iterations & so on, or loop it forever.
12. Now click the play button in animation palette to play your animated image. 😉
13. Time to save this image! Go to file & click on Save for Web & Devices. In the dialog box that opens, leave settings as they are & click save button. Save your image to any location & you’re done!
14. Close or minimize Photoshop & open the saved GIF image in Internet Explorer or any other GIF viewer. See the magic 😀
PS: Due to the huge size of the animated GIF I created during this tutorial, I cannot upload it here. Refer the image at beginning of this tutorial for a demo.