Prerequisites:
Basic knowledge and experience with Adobe Photoshop, using the Layers panel, Image size menu, and adding the Timeline function
(Adobe Photoshop CC 2015 on a Mac was used for this tutorial.)
Objectives:
1. Animate a sequence of images using the layers panel in Adobe Photoshop.
2. Apply a time duration and continuous loop to the sequence of images.
3. Export the series of frames as an animated GIF file.
Open each image in Adobe Photoshop. (You can save them as JPEG images.) Copy and paste each image as a new layer into a single Photoshop file. Each image should be a slight variation of the previous image. Be sure to place them in the right order in the layers panel.
Turn the visibility to off by clicking on the eye icon and dragging the mouse down to hide all layers.
Go to Window < Timeline. Then click on "Create Frame Animation."
Click on the options menu at the top right corner of the timeline and select:
"Make Frames from Layers."
Select the "Forever" option in the playback area of the timeline to loop the animation.
Select the first frame in the timeline and hold down the shift key to select all remaining frames, including the last frame at the end of the sequence.
Change the duration to the desired amount of time. I used .2 seconds for the Typography example and a combination of .1 and .2 seconds for the "I love type" animation.
Choose File < Export < Save for Web (legacy)
You will see a preview of the animation. Select GIF and the appropriate optimizaton settings according to the file size and quality that you need. Keep in mind that increasing the dither will increase the quality of the image while increasing the file size as well. I used 720 X 540 pixels for the image frame size.
I currently teach Electronic Document Design at the Graphic Arts & Imaging Technology Program (GAIT) in the Department of Art at Appalachian State University. Learn about the print production, cross media production, and packaging production degrees.
Typography 101
Typography is defined as "the art and technique of arranging type to make written language legible, readable, and appealing when displayed" (Wikipedia). It consists of letterforms or glyphs, which can be characters or symbols. A letterform, or type, sits on a baseline. Each letterform has an x-height and a cap-height. Some letterforms have an ascender or a descender. Ascenders are the part of the letterform that rise above the x-height. Descenders fall below the baseline.
A typeface includes a family of fonts. For example, Minion Pro is a typeface family. Within the family, or group, there are many individual font settings, such as Minion Pro Italic set at 12 pts. Still confused? Read more about "What's the difference between a font and a typeface?"
Type is measured in picas or points.
1 inch = 6 picas
1 pica = 12 points
1 inch = 72 points
Typefaces can also be classified as serif or san serif. A serif face includes a small stroke or "cap" at the end of a letter or symbol. A san serif face does not have the end marks. There are also semi-serif and transitional typefaces which fall somewhere in between.
Each typeface can have a different x-height or cap-height, even if they share the same point size. Please review the typography animated GIF here or linked above in the Animated GIF Examples page to view different typefaces with cap-heights and x-heights labeled.