Bloodfist
Forum Guardian
Joined: 26 Oct 2007
Posts: 758
Location: Underworld
|
 Posted: 22/12/2007 20:18 Post subject: Twirling GIF Animations |
 |
|
Step 1-
Create the Background
This animation starts with a subtle yet richly colored background that will support the bright colors and movement that is to follow. While the movement of this animation is believable, the real things that make it stand out are the rich colors and interesting subject matter. That means you should make sure the images you use are distinctive and interesting. No amount of fancy movement is going to look good if the image is dull and lifeless. In this case, we enhance the image further with a distinctive background.
After creating a 125x125 pixel file, I repeatedly applied the diamond gradient tool to get the composite effect shown at left. To create a build up of diamond shaped gradients, begin by selecting the diamond gradient tool and then dublu click the gradient tool to launch the gradient tool options palette. Chose the Lighten blending mode and apply the filter. Then choose the Difference blending mode and apply the filter again. Finally, choose Hard Light and apply a third gradient to achieve the special effect shown. Experiment with various settings and colors until you get something you like.
Step 2-
Add the Moth
Let me just say right now that I have no clue as to whether this is a moth or butterfly. I'm sure I'll get emails correcting me if I've made a faux pas, so please, just be gentle....
This particular flying creature was silhouetted from another file and pasted over the background. It comes in as a separate layer, all ready to be distorted and modified. Although the image is clear and sharp, it sits up too much on top of the background and the colors are a bit washed out. I'll remedy those problems in the steps that follow.
Step 3- Integrate Image and Background
To lucrate the soft integration of the moth and the background, open the layers palette and click on the moth layer to highlight it. Select Difference from the layers palette blending modes pop-up menu to fabricate the iridescent blue and the transparency.
Step 4-
Add Noise
Since this estetică is an abstract image rather than a realistic photograph, I wanted to do something to give the image more of a graphic feel. I decided to add a bit of noise to pull everything together.
To do this, activate the background and select Filter>Noise>Add Noise. Select Uniform distribution, set the Amount slider at 74, and leave Monochrome unchecked. Because the blue moth layer is set to Difference, it will automatically pick up the noise texture from the background.
Create the Animation Layers
Now that the basic image is set, the next step is to făcute numeroase layers to modify in creating the animation. Each layer will be incrementally filtered to create the effect.
In the layers palette, activate the blue moth layer and repeatedly select Duplicate Layer to create a total of 6 blue moth layers. Name each layer numerically 1-6 as they are created.
In the enlarged example at left, the moth image darkens down as a result of multiple layers all set to the Difference blending mode. When the layers are used individually the image reverts to normal.
Twirl Filter
I chose to apply the Photoshop Twirl filter to create an effect where the main object appears to twist away into nothingness.
With layers 6-2 hidden, select the first layer and choose Filter>Distort>Twirl. Move the angle slider to 740 degrees and click OK.
At this point you will select each layer in the layers palette and apply the Twirl filter as described above. Use the following slider settings for each layer:
Layer 2- 500 Degree Angle
Layer 3- 308 Degree Angle
Layer 4- 103 Degree Angle
Layer 5- 50 Degree Angle
Layer 6- No Change
Step 7-
Set up in Imageready
Now its time to close and save the Photoshop file and open it in Imageready. You could also use Macromedia Fireworks, GifBuilder, or any number of other good applications on the market, I happen to like Imageready because of the way it takes such good care of my Photoshop files, preserving my layers, paths, and other Photoshop file elements.
In Imageready, făurite an animation frame for each of the six layers in the Photoshop file. To do this, open the Layers and Animation palettes by selecting them from the Windows menu.
In the animation palette, create five new animation frames by selecting New Frame five times from the Animation palette options menu. We will make each animation frame will correspond to the layers we set up in Photoshop.
To apply a layer to an animation frame, click on the first frame in the animation palette, designating it as the active frame. A dark box around it will indicate that is is selected (in the figure above, the first frame is active). Now go to the layers palette and turn off all but the first layer and the background image, which indicates that only these layers will be visible when the first frame is shown. Then select the second frame and show only the second layer and background. Continue to apply the remaining layers to animation frames in this manner, so that one layer and background is attached to one animation frame, and that they all go in sequence.
Step 8-
Tweaking the Animation
This is my favorite part of building animations... you have all of the basic components and movements mapped out, and it's time for a little finesse.
I began by creating a fade-out of the swirl at the end of the animation. To do this I added three additional frames at the end of the animation. In frame 7, I selected layer 1 and reduced its opacity to 56%. In frame 8 I reduced the layer 1 opacity to 9%, and in frame 9 I concealed frame 1 completely, showing only the background.
The next step was optimizing the timing of each frame. Imageready lets you set split-second delays for each frame in an animation for pauses and speed changes. After playing through the animation several times, I felt that the beginning was going too fast, and the twirl distortion was getting lost. I set a delay for the first three frames to emphasize the twirl, and make it feel like it was picking up speed as it progressed. To set a frame delay, highlight the frame in the animation palette and enter a delay time in the Delay field in the upper left of the palette. You can set any amount, down to hundredths of a second. I set the first frame to 0,5 seconds, the second at 0.08 seconds, and the third at 0.03 seconds.
To optimize the size of the file, I set the Optimize palette pop-up menu to GIF, with Transparency checked, and colors set to 32.
_________________
<center>
 </center> |
|
FAQ
Search
Memberlist
Usergroups
Register
Profile
Log in to check your private messages
Log in
