DOI:10.2214/AJR.06.1236
AJR 2007; 188:W485-W490
© American Roentgen Ray Society
Creating Animated GIF Files for Electronic Presentations Using Photoshop
Chun-Shan Yam1,
Jonathan Kruskal and
Michael Larson
1 All authors: Department of Radiology, Harvard Medical School, Beth Israel
Deaconess Medical Center, WCC, Room 306, 330 Brookline Ave., Boston, MA
02215.
Received September 19, 2006;
accepted after revision November 21, 2006.
Address correspondence to C.-S. Yam
(csyam{at}bidmc.harvard.edu).
WEB This is a Web exclusive article.
FOR YOUR INFORMATION
The data supplement accompanying this Web exclusive article can be viewed
from the information box in the upper right corner of the article at:
www.ajronline.org.
Abstract
OBJECTIVE. Our objective is to present a simple method for
converting movie clips to animated GIFs (graphics interchange format) using
Photoshop.
CONCLUSION. Although animated GIF is a more reliable format than
movie clips (e.g., AVI and QuickTime) for presenting dynamic data sets in
PowerPoint presentations, this output format is not available on most
radiology workstations. Therefore, many academic radiologists still experience
the problem of incompatible codecs and missing file links when trying to show
movie clips in their PowerPoint presentations. One way to resolve this issue
is to convert the movie clips to animated GIFs. In this article, we provide a
simple method for this conversion using Photoshop—a common software
application used by radiologists.
Keywords: movie clips • Photoshop • PowerPoint
Introduction
Animated GIF (graphics interchange format) and movie clips (e.g.,
AVI [Microsoft], QuickTime [Apple Computers], and MPEG [Motion Picture
Experts' Group) are the two most popular file formats used by radiologists for
presenting dynamic data sets (movie loops of images) in Microsoft PowerPoint.
Although the basic purpose is the same—that is, displaying data set
images as a movie loop, these two types of file formats are rather different
in file structure and PowerPoint compatibility. First, movie clips are usually
created using special software algorithms called codecs (COmpressor and
DECompressor); an animated GIF does not require a codec. Second, movie clips
must be linked externally to PowerPoint, but an animated GIF is embedded as
part of the presentation file, similar to other images such as JPEG and
BMP.
Given these two merits, animated GIF is a more appropriate choice.
Unfortunately, many academic radiologists still struggle with the issue of
incompatible codecs and missing file links when showing movie clips in
PowerPoint [1]. A survey in our
department (94 radiology users: 52 faculty, 32 residents, and 10 fellows)
yielded the following interesting results. Most users report that animated GIF
is not available on their workstations, only movie clips. Some realize the
advantage of using animated GIFs over movie clips but do not know how to
convert the files. And surprisingly, no one realized that Adobe Photoshop is
one solution, even though all these users already have the software installed
on their computers (i.e., departmental site license).
In this article, step-by-step instructions for converting common movie
clips (e.g., AVI, QuickTime, and MPEG) to animated GIFs and creating animated
GIFs from image sequences using Photoshop will be provided.
Software Requirements
Adobe Photoshop is now a common desktop application used by academic
radiologists to prepare digital images for electronic presentations and online
publications. Basic techniques for using Photoshop have been documented
previously
[2-4].
The latest version of this software is 9.0 or Photoshop CS2
[5].
The functions discussed in this article for converting and creating
animated GIFs are also available in other versions of Photoshop; therefore,
users do not necessarily need to purchase the latest version. However, for
users who do not have Photoshop, a 30-day free trial of Photoshop CS2 can be
downloaded from the Adobe Website
[5]. Installation of Photoshop
is straightforward for both Macintosh (Apple Computers) and PC users. Although
Photoshop CS2 and Microsoft Windows XP Professional are used in this article,
the general instructions provided can be applied to other versions and
platforms (e.g., Photoshop 6.0.1 in Macintosh OS 9.2, 8.0 in Macintosh OS
10.3.9; and 9.0 in both Macintosh OS 10.4.7 and Windows 2000). Besides
Photoshop, QuickTime Player (Apple Computers) is also required. The latest
version is 7.0 for both Macintosh and PC, and it is available as freeware from
the Apple Website [6]. It is
important to note that although both Photoshop and QuickTime are needed for
creating animated GIFs, neither of these applications is required for
subsequent PowerPoint presentations—that is, they don't need to be
installed on the client computers.
View larger version (72K):
[in this window]
[in a new window]
[as a PowerPoint slide]
|
Fig. 1A —Launch of Adobe ImageReady (Adobe product screen shots reprinted
with permission from Adobe Systems Incorporated). Screen capture of Adobe
Photoshop CS2 shows two options for launching ImageReady from Photoshop.
|
|
Accessing Animated GIF Functions
In addition to its comprehensive digital image processing tools for
manipulating images, Photoshop also provides easy-to-use functions for
creating animated GIFs. However, these functions can only be accessed via
Adobe ImageReady, a sister application bundled with Photoshop. Although
ImageReady is designed for and capable of creating various types of Web
applications, we will discuss the functions for creating animated GIFs
only.
Launching ImageReady
In Photoshop, select File 
Edit in Image-Ready from the top menu (or
click on the last icon at the Tools palette) to activate Image-Ready
(Fig. 1A). Alternatively,
ImageReady can be launched directly from the desktop (i.e., Start
Programs Adobe Image-Ready CS2). The screen layout of Image-Ready is
similar to Photoshop but with an additional palette: Animation
(Fig. 1B). This additional
palette is for creating animated GIFs. If this palette is not displayed,
select Window Show Animation from the top menu to make it visible. This
is the only palette needed for this tutorial. Closing the remaining palettes
(e.g., Options, Info, Color, and Layers) will maximize the work space
(recommended).
Tutorial # 1: Converting Movie Clips to Animated GIFs
Step 1: Extracting images from movie clips—In ImageReady,
select File Open from the top menu to select a movie clip file. For
this tutorial, a sample movie clip, Axial.mov (QuickTime format, CinePak
codec, 15 frames per second [fps], RGB color, 6.02 seconds, and 5.91 MB) is
used (Fig. 2A). This video clip
can be viewed at Figure S2A. Other movie clip formats such as AVI and MPEG can
also be used for this tutorial. ImageReady should recognize the movie clip
file extensions ".avi," ".mov," ".qt" and
".mpg." If any of these extensions do not appear in the file
selection dialog box as shown in Figure
2A, install QuickTime Player first (see Software Requirement).
View larger version (44K):
[in this window]
[in a new window]
[as a PowerPoint slide]
|
Fig. 2A —Process for converting movie clips to animated GIFs in Adobe
ImageReady CS2. (Adobe product screen shots reprinted with permission from
Adobe Systems Incorporated.) Screen capture of Open dialog window.
|
|
After selecting the file Axial.mov, click on the Open button to continue.
In the Open Movie window (Fig.
2B), the first image of the movie clip is displayed. In this
window, users are required to select an option for loading the movie: the
entire movie clip or a part of the movie clip. The default setting is for
entire movie (i.e., From Beginning to End). However to load only a portion of
the movie, use the slider at the bottom right to specify a range of images on
the time line (see Fig. 2B).
ImageReady also provides the option for frame-skipping (i.e., loading every
other frame, two frames, etc.).
View larger version (60K):
[in this window]
[in a new window]
[as a PowerPoint slide]
|
Fig. 2B —Process for converting movie clips to animated GIFs in Adobe
ImageReady CS2. (Adobe product screen shots reprinted with permission from
Adobe Systems Incorporated.) Screen capture of Open Movie window shows
optional movie loading settings.
|
|
The main purpose of using these optional loading settings is to reduce the
file size when the output animated GIF is oversized. In our experience, the
typical file size of an animated GIF with 200 images (512 x 512 pixels)
is about 10 MB. So, if the file is already a reasonable size, such as several
MB, these two optional settings are not needed. For this tutorial, the default
option is selected: From Beginning to End
(Fig. 2B).
Click on the OK button to load the movie clip file. Subsequently, the
images are extracted from the movie clip and placed into the Animation palette
as individual frames (Fig. 2C).
These frames are automatically placed in the same order as in the original
movie clip. In this sample case, a total of 91 frames are created (15 fps
x 6.02 = 91 seconds). Users can now preview the animated GIF by using
the playback buttons or the scroll button at the bottom of the Animation
palette (Fig. 2C). There is a
time delay value at the bottom of each thumbnail frame. In an animated GIF,
time delay is used for achieving the animation effect during playback; it is
analogous to the fps parameter in movie clips. By default, ImageReady
calculates the delay time value using the fps parameter of the movie file to
maintain the same playback speed for the animated GIF. With 15 fps for the
original movie clip, the time delay is set to 0.06 second (or 1 / 15 =
0.06).
View larger version (85K):
[in this window]
[in a new window]
[as a PowerPoint slide]
|
Fig. 2C —Process for converting movie clips to animated GIFs in Adobe
ImageReady CS2. (Adobe product screen shots reprinted with permission from
Adobe Systems Incorporated.) Screen capture shows playback and scroll buttons
at bottom of Animation palette.
|
|
View larger version (87K):
[in this window]
[in a new window]
[as a PowerPoint slide]
|
Fig. 2D —Process for converting movie clips to animated GIFs in Adobe
ImageReady CS2. (Adobe product screen shots reprinted with permission from
Adobe Systems Incorporated.) Screen capture shows actions for adjusting time
delay values in Animation palette.
|
|
Step 2: Adjusting playback speed and image processing
(optional)—As an option, users can adjust the playback speed for
the animated GIF by changing the time delay values. For example, users can
adjust the playback speed from 15 fps to 10 fps using the following two steps.
First, select all image frames from the Animation palette (i.e., click on the
first frame and scroll to the last frame then click on it while holding down
the Shift key). Now, all the image frames should be highlighted. Next, click
on the time delay value (i.e., 0.06 second) from any one of the selected
frames and then select 0.1 second from the dropdown list
(Fig. 2D). However, in our
experience, playback speeds for most movie clips obtained from radiology
workstations are suitable for PowerPoint presentations. Unless there is a need
to present the data sets in slow motion, this option is not necessary.
View larger version (39K):
[in this window]
[in a new window]
[as a PowerPoint slide]
|
Fig. 2E —Process for converting movie clips to animated GIFs in Adobe
ImageReady CS2. (Adobe product screen shots reprinted with permission from
Adobe Systems Incorporated.) Screen capture of Save Optimized As window shows
typical parameters for exporting animated GIF image.
|
|
In addition to adjusting playback speed, users can also apply image
processing functions for adjusting the brightness and flipping, rotating,
cropping, and resizing of the images globally. However, PowerPoint also
provides similar functions in the Picture Toolbar. In our experience, using
the functions provided by PowerPoint is more straightforward. Image cropping
is not available for animated GIFs in PowerPoint. For example, to remove
patient information from the image frames, users must use the crop function in
ImageReady.
Step 3: Exporting the animated GIF—In ImageReady, select
File Save Optimized As from the top menu. In the Save Optimized As
window, select Images Only (*.GIF) for the Save as type parameter
and Default Settings for Settings (see Fig.
2E), and then navigate to the destination folder for exporting the
animated GIF. For this sample case, the animated GIF file is saved to the same
desktop folder as the original movie clip with a filename Axial.gif (6.11 MB).
This file can be downloaded from Figure S2E.
Tutorial # 2: Creating an Animated GIF from a Sequence of Images
The essential steps for creating an animated GIF from a sequence of images
are similar to the previous tutorial except for Step 1, in which the image
frames are imported directly from a folder rather than extracted from a movie
clip. For demonstration, a desktop folder JPEG containing a sequence of 20
JPEG images (512 x 512 pixels) has been prepared. Other common image
formats such as TIFF, BMP, and PNG can also be used for this tutorial. A
zipped file of this sample image sequence "JPEG.zip" (615 KB) is
available as Figure S3A for download.
Step 1: Importing a sequence of images— In ImageReady,
select File Import Folder as Frames from the top menu to select
the folder (Fig. 3A). In the
Browse for Folder window, select the folder containing the image sequence. For
this sample case, the sample folder JPEG located at the desktop with the 20
sample JPEG images is selected (Fig.
3B). The images are named sequentially as CT01.jpg, CT02.jpg,
CT03.jpg, and so on to CT20.jpg. Next, click on the OK button to load the
images. Images will be loaded in the order according to their file names
(Fig. 3C).
View larger version (48K):
[in this window]
[in a new window]
[as a PowerPoint slide]
|
Fig. 3A —Process for creating animated GIF from sequence of images in Adobe
ImageReady CS2. (Adobe product screen shots reprinted with permission from
Adobe Systems Incorporated.) Screen capture shows function for loading image
sequences.
|
|
View larger version (41K):
[in this window]
[in a new window]
[as a PowerPoint slide]
|
Fig. 3B —Process for creating animated GIF from sequence of images in Adobe
ImageReady CS2. (Adobe product screen shots reprinted with permission from
Adobe Systems Incorporated.) Screen capture shows Browse for Folder
window.
|
|
View larger version (83K):
[in this window]
[in a new window]
[as a PowerPoint slide]
|
Fig. 3C —Process for creating animated GIF from sequence of images in Adobe
ImageReady CS2. (Adobe product screen shots reprinted with permission from
Adobe Systems Incorporated.) Screen capture shows sequence of images loaded
into Animation palette. By default, time delay value is not set (i.e., 0.00
seconds) and must be assigned manually after loading image sequence.
|
|
Multiple image sequences can be loaded into the same animated GIF.
ImageReady will load all the images within the selected folder according to
the alpha-numeric order of their file names.
Step 2: Assigning time delay values—Unlike the previous
tutorial in which the time delay value is extracted automatically from the
movie clip; users need to specify this value for the playback speed. Depending
on the number of images and the user's presentation preferences, a playback
speed between 10 and 15 fps is appropriate for most dynamic data sets. For
this sample case, 0.1 second (or 10 fps) is used for the time delay value
(Fig. 3D). The instructions
for setting the time delay value are provided in step 2 of the previous
tutorial.
View larger version (85K):
[in this window]
[in a new window]
[as a PowerPoint slide]
|
Fig. 3D —Process for creating animated GIF from sequence of images in Adobe
ImageReady CS2. (Adobe product screen shots reprinted with permission from
Adobe Systems Incorporated.) Screen capture shows action for assigning time
delay value of 0.1 second (or 10 frames per second) for image sequence.
|
|
Similarly, users can apply image processing functions to the images
globally as described in the previous tutorial before creating the animated
GIF. However, for this sample case, we do not use these functions.
Step 3: Exporting an animated GIF—The instructions for
exporting an animated GIF are identical to the previous tutorial. Select File
Save Optimized As from the top menu and then save the file. For this
sample case, the animated GIF is saved with a filename CT.GIF (2.51 MB).
Using Animated GIFs in PowerPoint
Although animated GIFs contain multiple images, technically, they are still
classified as images. Therefore, using animated GIFs in PowerPoint is similar
to other common images such as JPEG, TIFF, and BMP. Users can insert animated
GIFs into PowerPoint by selecting the Insert Picture From File
function from the top menu. Alternatively, animated GIFs can be inserted using
drag and drop. They can then be resized and rotated using simple mouse clicks
(Fig. 4). In addition, users
can apply image processing functions available in the Picture Toolbar (e.g.,
Contrast, Brightness, and Rotate Left) and putting annotations (e.g., drawing
arrows, circles, and text) on top of the animated GIFs
(Fig. 4). If the Picture
Toolbar is not displayed, select View Toolbars Picture from the
top menu to make it visible. The usage of these functions is straightforward
and has been discussed in previous articles
[7-9].
As discussed previously, the crop function is disabled for animated GIFs in
PowerPoint and is only available in ImageReady. The instructions for cropping
patient information from animated GIFs using ImageReady are discussed in
tutorial # 1.
View larger version (66K):
[in this window]
[in a new window]
[as a PowerPoint slide]
|
Fig. 4 —Screen capture of Microsoft PowerPoint 2003 shows tools and
functions for manipulating sample animated GIF, Axial.GIF, created in tutorial
#1. It also shows capability of using arrows and text for annotation.
(Microsoft product screen shots reprinted with permission from Microsoft
Corporation.)
|
|
Unlike movie clips that must be manually selected for auto-play (PowerPoint
will prompt for this option on movie insertion), an animated GIF plays
automatically. Similarly, movie clips provide options for looping and
rewinding (right click on the movie and select these functions at the pop-up
window), whereas animated GIF loops and rewinds the movies automatically.
Limitations and Alternatives
Animated GIFs are a more appropriate alternative than movie clips for
presenting dynamic data sets in PowerPoint. However, there is one known
potential issue—the animated GIF does not support audio. Fortunately, in
our experience most movie clips used by academic radiologists do not require
sound. The tutorial provided in this article can still be used to convert
movie clips containing audio, but the animated GIF will not contain sound.
For academic radiologists who may not have access to Photoshop, there are
open-source freeware applications that can also be used for creating animated
GIFs, such as GIFfun for Macintosh
(www.stone.com/GIFfun/)
and Un-FREEz for PC
(www.whitsoftdev.com/unfreez/).
Some of the process steps described in the tutorials can be automated using
a macro (Photoshop Actions). The basic approach for creating macros in
Photoshop is similar to that in PowerPoint
[10]. However, this feature is
beyond the scope of this current article.
Conclusion
Today, many academic radiologists still experience problems showing movie
clips in their PowerPoint presentations because of incompatible codecs and
missing file links. One answer to this problem is to convert the movie clips
to animated GIFs—most radiology workstations only produce movie clips.
In this article, we provide a simple method for this conversion using
Photoshop—a common software application already used by radiologists.
Using Photoshop, academic radiologists can now present their dynamic data sets
as animated GIFs in PowerPoint without any codec or file-link issues.
References
- Yam C-S, Kruskal J, Larson M. Using movie clips in PowerPoint
presentations: part 1, compatibility issues. AJR2005; 185:1074
-1078[Abstract/Free Full Text]
- Stern EJ, Richardson ML. Preparation of digital images for
presentation and publication. AJR 2003;180
: 1523-1531[Free Full Text]
- Taylor GA. Initial steps in image preparation.
AJR 2002; 179:1411
-1413[Free Full Text]
- Corl FM, Garland MR, Lawler LP, Fishman EK. A five-step approach to
digital image manipulation for the radiologist.
RadioGraphics 2002;22
: 981-992[Abstract/Free Full Text]
- Adobe Photoshop Website. Available at:
www.adobe.com/products/photoshop.
Accessed February 2, 2007
- Apple QuickTime Website. Available at:
www.apple.com/quicktime.
Accessed February 2, 2007
- Schreibman KL. Getting images into PowerPoint.
AJR 2001; 177:1271
-1272[Free Full Text]
- Lababede O. Digital image editing using PowerPoint: part 1,
introduction to the image-manipulation commands. AJR2004; 183:847
-851[Abstract/Free Full Text]
- Lababede O. Digital image editing using PowerPoint: part 2,
practical applications of the image-manipulation commands.
AJR 2004; 183:853
-858[Abstract/Free Full Text]
- Sistrom C, Honeyman-Buck J. A simple method for importing multiple
image files into PowerPoint. AJR 2004;182
: 1591-1596[Abstract/Free Full Text]
CiteULike 
Complore 
Connotea 
Del.icio.us 
Digg 
Reddit 
Technorati What's this?
This article has been cited by other articles:
|
|
|
|
 
D. Cornfeld
A Step-by-Step Solution for Embedding User-Controlled Cines into Educational Web Pages
Am. J. Roentgenol.,
March 1, 2008;
190(3):
W218 - W221.
[Abstract]
[Full Text]
[PDF]
|
|
|
Top
Abstract
Introduction
