Gif Images in Photoshop (7 Easy Steps).

As requested by some of you, here’s the 101 on how to create .gif images using Adobe Photoshop. I’m currently using Adobe Photoshop 7.0, but I’m pretty sure it works the same in other versions. This tutorial is pretty straightforward and like all my entries, include alot of pictures (click to enlarge) so getting lost is pretty much… impossible :)

First Step : Selecting the photos you want to use.
So basically after turning on the Photoshop programme, all you have to do is open up all the pictures you wish to include in the .gif image. As you can see on the right, I have chosen 5 different pictures. Once you’re done opening up your pictures in the programme, choose your background picture (the first picture which will appear in your .gif image) and click on the Move Tool button (which I have highlited in red).

Second Step : Combining the photos into one photo (diff layers).
Once you have clicked on the Move Tool, just one by one, drag the other pictures into the base photo. Make sure they’re aligned properly. Notice that the more pictures you drag into the background picture, the layer count will increase. It is best if you drag them in order of your intended .gif image. For eg. Background will be first picture to appear. Layer 1 will be second, Layer 2 will be third and so on and so forth.

Third Step : Changing programmes to Adobe Image Ready.
Once you have noticed that the number of layers (including background) is the same as the number of pictures you first loaded, and that all your layers are aligned properly, proceed to click on the ImageReady button on the toolbar on the left (which I have highlited).

Fourth Step : Duplicating Frames.
Once ImageReady has fully loaded, you will notice the layers you have compiled in Photoshop has been transported over. At the main screen, look for the Duplicate Frame Button (which I have highlited in red) and click on it. The number of duplications you need to create is equals to the number of layers you have. As for my creation – the magic number 5.

Fourth Step (cont) : What Happens.
As you can see, I’ve created 5 duplicates. What you should see in the highlited portion would be 5 repititions of the same pictures, no cause for alarm as we’re still not done yet :)

Fifth Step : Coordinating The Frames To Match Your intended Gif.
So what happens here, is that one by one you will remove layers to match each frame. Select the first frame, and if you see under the Layers bar, uncheck all the "Eye" icons in all the layers except for the one you intend to show in the frame. You can refer to the picture above, as well as click here and here for more examples. And this is how it should look like once you’re done – different layers for different frames.

Sixth Step : Implementing Time For Each Frames.
Once you’re done with the frames and the layers coordination, it’s time to determine the amount of time you want. Click on the "0 Sec" button under Animations, and there you can predetermined the length of time a layer shows in the .gif. Repeat the process for all the frames. It should look something like this, if done correctly, and by clicking on the "Play" button (highlited in red), you can preview your .gif image!

Seventh Step : Save!
And here we’ve come to the last step. Once you’re happy with how things look like when you press the "Play" button, all that’s left is to save. Click on File, Save Optimized As and you’re done! Note that it’s "Saved Optimized As" and not the normal "Save As".

Alright, that’s it I guess! I’m sure there are many other ways and programmes on creating .gif images, but this is the way I do it as I find it the most hassle free since I use Photoshop for all my image editing anyway.

If you happen to know of an easier way and would like to share, feel free to leave a comment and help each other out aight! Let’s begin!

Related posts:

1. 5-year Plan : Small Steps Forward.
2. For Lysa.
3. Lucky I’m in love with my Best Friend.
4. Bali Pictures (Vertical).
5. Skins for iPhone & iPod Touch by S’pore designer.