Creating an animated GIF.
Copyright Giulio Porta, all rights reserved.
For this project you'll be expected to create a short animation, what is know as an animated GIF (GIF is a format that support animation). There are others formats as well, formats designed for the PC such as AVI, MPEG, SWF, MOV. I will spare you a lengthy dissertation on the subject of animation, it's a gigantic subject and it cannot be oversimplified, but for the time being that's exactly what we are going to do. We are going to look at animation as a series of images played in a particular sequence. The sequence can be a series of layers which you have created for that purpose. Photoshop 11 (CS4) has an animation timeline where a sequence of layers can be compiled and saved as an animation.
The concept. The most important component of this animation is the idea or message it represent. If I can make a suggestion: a timed event, a cyclical event, such as that of the arms of a clock rotating and returning at their start point, anything moving continuously without beginning and end, are general ideas. But the specific of this idea must be your own. You should also use your self portrait as the base or background for this animation.
The practical applications for this type of animation could be:
|In CS 4 the animation timeline is now in Photoshop, in previous versions it was available through an parallel software by the name of Image Ready. I still support Image Ready in these tutorials. But if you have CS 4 go to Window > Animation and load the animation panel|
|In the animation panel make sure that you are in the Frame mode not in the Timeline mode.|
|At the very bottom right of the panel, you'll be able to switch between Frames and Timeline, but for now stick to the Frame mode.||
|The idea is simple:
create a sequence of layers suitable for conveying the message that your
animation is intended to convey.
In my case I'm using 4 numbers as an example.
|All layer, one by
one, are loaded into the the panel. Here's how:
The default play speed is 0 sec, to change that, select all frames by selecting the fist one, and by holding gown the shift key select the last one. One all frames are selected, click on the 0 sec line and select a different speed. I selected .5 sec for this one.
|The use of
photography is optional, you can create a time based event inside the
silhouette of your torso. Keep in mind that all layers or any layer can be
compiled into an animation. Therefore the issue is why rather than how.
You'll master how if you do this a few times, but what matters is the idea.
For this particular animation I have chosen to
move an image of clouds inside a portion of a person's face. This is done by
pasting a relatively larger image into a relatively smaller selection. The
lager image will be moved along equal increments, for each increment a new
corresponding layer will be created, this set of layers will be compiled
into an animation in Adobe Image Ready or CS 4.
What do the clouds mean? They could simulate something cool like shaving cream, or mindlessness, a dream state, the kind of stuff which could be used as a base for a TV commercial, or a self introduction.
1) Begin by activating the Magic Wand tool. This tool will select areas of similar color just by clicking on them.
2) Make sure that you are in the Ad to Selection, so you can keep adding to the first selection, and not New Selection mode. The other modes are: Subtract to selection, and Intersect Selection.
3) The Tolerance setting, currently set at 32, will determine the range of contiguous colors your selection will encompass. The lower the number the fewer the colors that will be included in a selection. You can lower or raise that number.
Click on the face to select part of it, or as much as you want, depending how much you want to show of yourself. Switch to Ad to Selection, to keep adding on to the selection.
Please look at the illustration here to right to see where arrow # 2 is pointing, the Ad to Selection icon is the second from the left in the group of 4.
|From the R: drive, load the POND & SKY image from the Images folder.
Place the two side by side.
If you are taking the Web version of this course you can use any suitable image for this project.
With the rectangular marquee select most of the sky, but not the trees or the water.
Copy that selection Edit > Copy
The Paste Into command
The Paste into command will paste a
Copied selection into another
selected area. That pasted selection will appear behind the
selection that you will pasted into.
The Paste into command will paste a Copied selection into another selected area. That pasted selection will appear behind the selection that you will pasted into.
Once you have pasted the sky into the selected portion of the face, look at the Layers palette, you'll see that a new layer has been added to the stack of layers, on top of the Background Layer.
|In your Layer palette you should
have a set of layer identical to what you see here to the right:
Duplicate that layer, and move with the Move tool or the Left or Right arrow keys on the keyboard, the pasted image of the clouds slightly from right to left, or in the opposite direction, but in one direction only. Your goal is to simulate the clouds moving within the portion of the face they were pasted into.
Create another layer, and with the sky layer selected move the sky image of a small amount again, As you will notice the sky image will move inside the selected portion of the face, as well as in the icon/thumb nails in the Layer palette.
Repeat these operations several times, until you'll reach the end of the picture.
Now that you have made this stack of Layers, you'll be able to treated them as cells or frames of an animation. But in order to do so you will need another program, as Photoshop does not support animation, unless you have CS 4. The "other" program is Image Ready, which is usually installed with Photoshop v 5.5 or higher.
Once the desired sequence of Layer has been created, it can be played back in Image Ready. And saved in the GIF format.
Begin by saving the Photoshop document as a .PSD, so it can be open directly into Adobe Image Ready where these Layers will be compiled as saved as an animated GIF.
Each layer can be saved one at the time as a sequence of numbered files such as 001sky.JPG 002sky.JPG and so on and placed into a dedicated folder. There are several other programs that can compile sequential images saved in formats such as .JPG .BMP .TGA, into formats designed for animation.
What's Image Ready? It's a program designed to create graphics, animation and interactive material for the web. But most likely you don't have an "older" version of Photoshop, therefore read on.
In the newer versions of CS Image Ready no longer exists, its features have been integrated in Photoshop. But the process of loading frames (Layers) in the Timeline (animation panel) is the same.
|If you are working with the latest versions of Photoshop such as CS 3 and above, go to the top menu to Windows and select TIMELINE. The name has change from Animation to Timeline, but the its basic features are the same.
After the TIMELINE panel pops up click on the down arrow next to the button in its center and select Create Frame Animation. Pleaase refer to the the information concening the Timeline as they can be viewed in the previous project the "blinking sign".
Starting Image Ready.
Ready is an application designed to create optimize graphics for the
Internet, browser based presentations, and interactive CDs. The Icon at the bottom of the
Toolbox will let you
interface Photoshop with its corresponding version of Image Ready. Image
Ready can also be launched as a stand alone.
Image Ready is an application designed to create optimize graphics for the Internet, browser based presentations, and interactive CDs. The Icon at the bottom of the Toolbox will let you interface Photoshop with its corresponding version of Image Ready. Image Ready can also be launched as a stand alone.
In Image Ready you must have these 3 windows open:
if not go to the top menu to > Windows and select them by name.
In the new CS versions you must have open the following panel windows:
Launching Image Ready by clicking on its icon at the bottom of the toolbox
In the Animation panel individual Layers are loaded on by one, from the Layers palette by making them visible in a desired sequence, the eye icon, in the Layer palette, controls the visibility of each layer.
When all the desired Layers (frames) are loaded in the animation panel, click on the VTR like button, at the bottom of the Animation panel, to play the animation.
The animation panel with the sequence of Layers acting as frames.
Go to the
Optimize window panel where the preview image is, and click on the 2 Up tab and then
click on Optimize to see the file size
of the image change dramatically.
Optimization will invariably involve a loss in colors, but a gain in the smallness of the file's size. This is exactly what you need for making your image viable for the Internet.
Large animated GIFs do not play well.
|Saving your work
In CS 4 go to File > Save for Web and Devices: format GIF, JPG doesn't support animation. Save your work in your Presentation folder.
In the latest CS versions go to Save for Web.
If you own Image Ready:
Save your work in your Presentation folder as a Image Only in the GIF format.
Once inserted in a page, the animated GIF will play endlessly in a browser.