Creating an Animated Vintage Auto Part Ad
-
 You
will need to download
this image to complete this tutorial
1. Open a New canvas by clicking File=> New. Select the preset size
of 468 by 60 web banner 72 ppi, RGB and white.
 2.
Open your image of the car you downloaded. Click image=> image size. Set
the height to 40 pixels, constrain proportions.
3. Use the move tool without bounding boxes checked and drag
the image over to your canvas. Position the car on the right side of the
canvas about midway down the canvas.
4. Select your shape tool set to a cloud outline.
Draw one big cloud in the remaining area and several small clouds between
the car and the big cloud.
 5.
Using the type tool set to Type in your text in the big cloud in the
font of your choice. I used the words "Vintage Auto Parts" with the
following:
- font =Arial
- bold
- 24 pt
- Smallcaps
- Smooth
6. Link all layers except the background.
7. Switch to image ready.
8. On the animation panel, Duplicate the current frame by clicking
the icon on the bottom of the animation palette. Click back on frame 1.
Use your move tool to move the linked layers left so the furthest right
part is just off your image on the left. Your image appears blank now.
Click on Frame 2 and using your move tool, drag your image to the
right so it not only comes into view, but the furthest left part of the
cloud moves off the canvas to the right. Your frame 2 appears blank
again.
 9.
Click the right hand carrot, animation panel, menu, on the layers
panel in the upper right corner just under the x. Select TWEEN. Set
tween to
- Next Frame
- Frames to add = 5
- All Layers
10. First and last frames appear the same, so click on the last frame
and click the trash can on the bottom of the animation panel to delete
it.
11. Set your timing up so that the text spends the longest time on
the screen with a pause. Here is what I did with mine.
- first frame is long at 1 second
- the second frame is at 0.1 seconds
- the third frame is 0.1 seconds
- the fourth is where the text is centered, so it is at 0.5 seconds
- the fifth frame is at 0.1 seconds
- the sixth frame is 0.1 seconds
- Set to forever.
 12.
You will need to optimize this image to make it fast loading. Set the
optimize panel in image ready to
- filetype= GIF
- lossy=0,
- Web colors
- 4 colors
13, Save for the web by clicking file=>save for the web.
|
