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. Create a new file
with transparent background. Draw circle with Shift and Elliptical
Marquee tool. Fill it with color.
2. File > Jump To >
Image Ready 3.0
3. Animation palette of the file will contain only
4. Press 8th button from the bottom left which
Duplicates current frame.
5. Select the first frame. Move the circle to the
bottom left corner of the file using Move Tool.
6. Select the second frame. Move the circle to the
top right corner of the file using Move Tool.
7. Select the first frame. In the Animation Palette
click the small triangle at right top (marked with red circle).
8. Click Tween. The dialog box will appear. Select
the number of frames you want to add for animation. Click OK.
9. After completing the animation try to check the
performance in the browser
File > Preview In > Click the browser
10. Save the file with
File > Save Optimized or File > Save