Wednesday, June 26, 2013

Creating animated GIF images

Creating animated GIF images using Adobe Photoshop


Hello guys. This article will teach you how to create animated GIF images using Adobe Photoshop. Though you can change the format of any image using any Photo Editor to .gif but the resultant will be far away from an animated image. There are also certain tools available to create animated images online but creating your own animated image using your own skill set gives a tremendous satisfaction and a immense pleasure. What i am creating is animated text "Thank You". You can apply similar process to create image slide shows, moving objects and so on. So lets start the digging...

Step-1: Open new document in Photoshop

To start with creating your animated image, open Photoshop. I'm using CS6 though it doesn't matter whichever version you have. The process is  same anyways. Choose new from file in the menu bar. Set the size and other properties. i have kept the background contents as transparent. you can select whatever is appropriate to you.  Click OK.


Step-2: Create layers with text "THANK YOU"

The next step is to create Text using Horizontal type tool or just press 'T' key from the keyboard to start entering text which in my case is THANK YOU on the canvas. Select an appropriate color and font size.Now from the layers Window in the side bar, right click the layer and choose duplicate layer to add another similar layer. Name that layer appropriately. If you cant see Layers panel on your right side bar, simply click windows from the menu bar, check Layers option or just simply press F7 if you are a windows user.

 Now in the new layer double click on the T symbol in front of layer name to select the text. Now change the color from the swatches panel. Repeat the process a couple of times more selecting different color every time. to check individual layer you can turn off visibility of other layers by clicking at the little eye in front of layer name.

Step-3: Add Animation frames

Now you are done with adding different layers, lets get stated with actual animation. Open Animation window by selection Animation from Window residing in menu bar. It will appear something like below. Add duplicate frames equal to the number of layers you have. After that select a single frame from animation window and turn on visibility of just single layer from the layer panel. Similarly select next frame and turn on visibility on just single layer different from previous ones. Repeat for rest of the frames.

Step-4: Finalizing animation with TWEEN

In the next step, select all the frames from animation window then open Tween from pop up menu under animation. 


Now just click OK. the select timing for displaying each frame by clicking '0 sec' below each frame and selecting time for delay. Your animation is ready. Now all you need is to save it as mentioned in next step.


Step-5: Saving the Image

Saving just created file is a little bit different from traditional saving options. To save the image, go to File and select save for web & devices. Just click Save in the pop up window. Voila.... You have created your Animated gif Image. My end product is something like flashing than you below. :)

 

Hope you like and learn (if you didn't knew this). If you are facing any problem, feel free to leave comment or mail me. Keep visiting for new stuff. Enjoy



2 comments: