Concept: These animation are designed using Image Ready which was bundled with Adobe Photoshop in the previous versions. Adobe has officially discontinued Image ready with its latest release and included the animation features as an integral part of creative suit. Gif animation was the prime technique prior to the emergence of flash and Image Ready could be used for a tiny animation to fulfill the needs of web. You can still use these techniques in the latest versions of Adobe Photoshop to create gif animations.
1. Open Photoshop 6.0 first. Create
new file with 72 PPI fill the background layer with black.
2. Type one character each on separate layer. Say
F U N.
Make a duplicate layer of each character. Hence you
will get F and F copy. U and U copy. N and N copy.
Color FUN with White color.
Color F copy, U copy and N copy with other than white
Change the size of FUN copy. Make it less than original
3. The layer palette of photoshop will look like this.
Save your file.
4. The file will look like this.
5. File > Jump To >
Image Ready 3.0
6. Image Ready 3.0 will get opened with the following
7. Animation palette of the file will contain only
8. Press 8th button from the bottom left which Duplicates
current frame. Create six more frames. Total frames will be 7.
9. Select first frame. Here you need to display only
black background. So in the layer palette of Image Ready, hide all
the layers except background.
10. Select second frame. Here you want to display
only big sized white colored 'F' with black background. So in the
layer palette hide all the layers except White F and background.
11. Following is the position of the layer palette
for the last 7th frame where only blue colored text is supposed
to be displayed.
Study the animation palette carefully as the rest
of the procedure will be common for all the animation tutorials.
12. There is a small black triangle displaying 0 sec
at the bottom of each frame in the Animation palette (marked with
green ellipse). It is used to set the time. Click it and set the
time. You can select any number of frames at a time by pressing
Shift and set the same time for the selected frames.
13. Below the first frame there is a bigger black
triangle (marked with blue circle) used to set the looping of the
animation. Use it to set the number of time you want to play Animation.
14. After completing the animation try to check the
performance in the browser
File > Preview In > Click the browser
15. Save the file with
File > Save Optimized or File > Save