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.
Comments
Post a Comment