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. Open two images.
Make both the images of similar size. Drag the second image on the
first file.

2. Make three layer copies of each image. The total
nos. of the layers will be eight. Two original and six copies.
3. Cut the images on each layer copy using rectangular
marquee. Keep the original layer intact. Cut the 3/4 part of the
first copy, 1/2 part of the second copy and 1/4 part of the third
copy.
4. You will get the following layer structure.

5. File > Jump To >
Image Ready 3.0
6. Make Frames from Layers.
7. Set the timings for frames.

8. Set the no. of time you want to play the animation.
9. Check the performance in the browser
File > Preview In > Click the browser
you want

10. Save the file with
File > Save Optimized or File > Save
Optimized As
|