Categories

Sunday, February 9, 2014

Free Tutorial and Project file: How to Design an Animated GIF in Photoshop and After Effects



Free Tutorial and Project file: How to Design an Animated GIF in Photoshop and After Effects




Sometimes you may need to incorporate a simple animation in your website or presentation without using a QuickTime or AVI movie, then your choice will be to create a GIF animated picture. GIF pictures are much more small in size than video files and you can create them following the very same steps you do while designing any other type of animation, the only difference will be at the final stage when you render the animation into a GIF animated image, as we will see now.
In this tutorial I will make a simple GIF image using my two favorite adobe application (Photoshop and After Effects). Some designers prefer to create the animation directly in Photoshop, but I prefer tm make use of the different rotation and manipulation possibilities available in After Effects; in another tutorial I will teach you how to make animation in Photoshop.
Photoshop Still Image Design
First, let's create a brand new Photoshop file, dimensions will be 7 inches for both width and height, 72 for resolution.
For the still image layers, I created here four layers, two of them will not be animated and the other ones will be animated in After Effects.
The still layers I designed here are a simple red nice heart I designed using the pen tool (Press "P" to get it), I actually designed only the right half of the heart, duplicated the layer (to duplicate layer drag it and drop it over the "new layer" icon) and merged them finally in one layer (to merge layers Shift+ click them and then press "Ctrl+ E") to be able to add layer effects. The second still layer is the background, I used a shiny orange gradient to make it, and also I incorporated some artistic brushes to make it dynamic.
For the animated layers, I created two identical layers containing sparks, I used here a simple spark brush and separated them into two different layers while changing the layer size to have two sparks, a small one on the upper left corner of the heart, and a bigger spark on the lower right corner of the hear. Now we have a complete Photoshop image, let's make it animated in After Effects.
After Effects Animated Image Steps
Now let's import this Photoshop file in After Effects and begin the animation work; open After Effects application, in the "project" tab double click to open the import dialog box, find your Photoshop file and select it (do not double click it) from the "import as" menu in the left lower corner of the dialog box select "Composition- cropped layers".
Now you will find a new folder available on the "project" tab, double click it and drag the four layers on your timeline tab; here the application will ask you if you want to create a 4 seconds animation (or according to your application setting), click OK, and begin rearrange your layers so they are arranged according to your Photoshop file.
Of course we will do nothing with the still two layers; our animation will be applied only to the two sparks layers. The animation effects will be applied to: Scale, Rotation, and Opacity. To begin manipulate the three effects open the arrow on the left side of the layer, and then open the arrow on the left side of "transform". Now, we need to begin our manipulation and to make it recorded you must click the small "clock" icon on the left side of each transformation effect. Now begin to change the numbers of each effect according to the following image, of course you must change the "time indicator" to make changes during the whole animation.

Do the same for the second Spark layer; try to change the numbers of (scale, opacity, and size) according to what you see, after making your changes press "Play" in the time controls tab.
Now we have a short simple animation of two sparks dancing on the surface of a nice red heart, let's render this into a GIF image, from the "Composition" menu, click on "Add to render queue".
A new tab will appear, it is the render tab, at the lower left corner of the tab, you will se a link called "lossless", select it and choose "Animated GIF" from the "format" menu, open the "format options" and make sure your settings are similar to the settings shown in the following image. Now Press OK to save your settings.



Another link shows the output location of your image, select it to identify where you wish to save you GIF image on your PC.
Now the settings are saved, press the "Render" button. Open the location where you saved your GIF image and you will find an animated gif image with the same animations exactly as you saw when you pressed the "play" button in the "time controls" tab.