How to Create Animated GIF’s with PhotoShop and ImageReady

Animated GIF’s are images containing a series of GIF (Graphics Interchange Format) graphics that are displayed in rapid sequence in a web browser, giving the appearance of a moving picture. They are a great way to catch you website visitors attention and to show many product images without having to take up a lot of space on your site.
animatedproducts-ylh

Here is how to create them using Adobe PhotoShop and ImageReady…

Step One: Compile each image or frame that you would like displayed in the animated GIF on its own layer in PhotoShop

Step One

Step One

Step Two: Click on the ImageReady icon at the botton of the tool bar in PhotoShop

Step Two

Step Two

Step Three: Create frames in ImageReady by clicking on the >> icon and set the display times for each frame. You can also add fading effects from frame to frame by using the Tween option.

Step Three

Step Three

Step Four: Save the image using the Saved Optimized As option

Step Four

Step Four

That’s it. If you are using this for a website, just upload it like a normal JPG or GIF file.

There is a fine line between using animated graphics on your website as a tasteful method to display information to your visitors and having them be distracting. We suggest that you use only one per page.

Click here to view premade animated GIF’s that you can use on your website.