Senin, 25 Februari 2013

Photoshop Tip: Creating an Animated .gif File Slideshow

A good way to capture attention is to place a short slideshow of your best work on your website, blog, iPad, smart phone or even e-mails. A slide show is eye-catching and a good marketing tool as long as it is short and used strategically (i.e. not used too often on a site or placed where it distracts from the main objective). Customized slide shows can be created for you by service companies such as or you can create your own with Adobe Photoshop by using the animation tool and saving it as a .gif file. The advantages in having a company created slide show is that their services include faster download of the slideshow, linked buttons and button statistics.

Note: A draw back to animated gif file slideshows is that not all operating systems support it. For instance, an animated gif file slide show on a Mac with OS snow leopard does not work in MacMail (email browser) and neither does Windows OS 7 in the Windows Picture viewer on a PC. Only the first frame of the slideshow is displayed. Thus, it is best to start the slideshow with the image you want everyone to see just in case the viewer cannot see the rest of the images.

A file with many layers (images) can be large and take a long time to download. So a slideshow should not have too many images. Also, you should save the files as low resolution (72 dpi) and in a small dimension. But, the size of the images depends on what device you are using it on. For instance, for a website the size of each image probably should be at least 3 or 4 inches at 72 dpi so that it can make an impact but for an email 1 to 2 inches may be sufficient because a smaller file for a faster download time is very important.

The following is the Photoshop steps used to create the animated .gif file slideshow shown at the top of this article. I used square images but any dimension can be used.

A. Format the images
Three square images were chosen for my slideshow. Since this is for a blog, I decided to format them for a 3 by 3 inch images at a low resolution of 72 dpi.
1. Open a new Photoshop 3 by 3.125 inch file at 72 dpi. The extra 0.125 inch will be used to insert copyright and identification text at the bottom of each image.
2. Drag each of the three image files into the Photoshop file. The size of the original image does not matter because it will be resized to fit the file size IF in Photoshop general preferences the "Resize Image During Place" box has been selected.
3. There are now four layers; background, and three art images. Delete the background layer.
4. Move the first image to the top.
5. Use the bucket tool to fill the space at the bottom of the image with white.
6. Type the image identification information and copyright on the white rectangle. I used Helvetica 11 pt font.
7. Merge the text onto the image layer (Command E).
8. Repeat steps 4 - 7 for each of the other images. There are now three image layers.

B. Animate the slideshow
1. Go to Window/Timeline (in Photoshop CS6 version) to open the Timeline menu. Or if you have an earlier version of Photoshop go to Window/Animation.
2. Click on "Create Frame Animation" button in the Timeline window. One image is now shown in the window.
3. In the upper right corner button of the Timeline window, select "Make Frames from Layers." All three images are now shown. The position of the images displayed can be adjusted by dragging the images.
4. The animation can loop forever or the number of times you wish. Select the Once button at the bottom of the timeline window to select what you want. I chose forever for my slideshow.
5. Set the length of time each image is shown, by clicking the drop down sec button below each image. All images will be set to the same time if you select each image in the Timeline window by holding down the shift key and then selecting the time. I used 2 seconds per image for my slideshow.
6. Test out the slideshow by clicking on the right arrow at the bottom of the Timeline window.

C. Save the slideshow
1. Save the file by selecting File/Save for Web.
2. Select GIF and press Save.
3. Name the file and press Save. The size of my animated gif. slideshow is 106 KB.

Your comments are welcome. Please click on the comments section (below) to write your comment.
Disqus Comments