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. This animation is created using
Masking Technique of Photoshop.
2. Open Photoshop 6.0. Create new file with 72 PPI
and transparent background. Make the shape of the glass with Polygon
lasso tool. Use grids for accuracy.
View > Show > Grid
3. Select desired foreground color
Edit > Stroke (Select
outside with 1 pixel)
4. create new layer and drag it below the original.
5. Select upper layer and click in the top portion
with Magic Wand Tool. Select Bottom layer and fill the selection
with the desired color.
6. Keep the bottom layer image selected.
7. Layer > Add Layer Mask
> Reveal Selection
8. The Layer palette will display the mask as follows
9. File > Jump To >
Image Ready 3.0
10. Animation palette of the file will contain only
11. Press 8th button from the bottom left which Duplicates
12. Observe the bottom layer carefully remove the
link between the image and the mask by simply clicking on it.
13. Click the image icon (not the Mask icon) in the
bottom layer. Select Move Tool and bring down the orange image at
the bottom of the glass.
14. Drag the right side image to the left hence you
will get empty glass in the left (1st Frame) and filled glass at
the right (2nd Frame) in the animation palette.
15. Click on the black triangle at the upper right
corner of the animation palette. Select Tween.
16. Select position and Tween the images with desired
numbers of frame. The Images will be displayed in the animation
palette as follows.
17. Set the timings for frames.
18. Set the no. of time you want to play the animation.
19. After completing the animation try to check the
performance in the browser
File > Preview In > Click the browser
20. Save the file with
File > Save Optimized or File > Save