Jump to navigation Jump to search
- 1 Animated GIFs
- 2 Why make animated GIFs?
- 3 How to make an animated GIF
- 4 Relevant links
- 5 Examples
- 6 What links here
- stands for Graphics Interchange Format
- created by the internet company, Compuserve, in the mid-80's, before the Web had been invented
- color-depth = 8 bits per pixel = 28 possible colors = 256 possible colors
- when GIF was created, most computers could display 256 colors at most
- supports both still images and animated images
- low color depth and a good compression algorithm mean small file size
- small file size means fast download
- fast download means good format for slow internet connections and slow mobile devices
- 256 is a small number of colors by today's standards... today's computer displays can show millions of different colors
- Although the web browsers don't support animated PNGs yet, they probably will in the future. PNGs allow for more colors.
- GIFs do not look good when used for photorealistic images, because of limited color-depth
- GIFs depends upon what was originally patented compression technology. They are therefore are considered "free" (as in freedom). However, that patent expired in 2004, so anyone is free to use it today.
Why make animated GIFs?
- they used to be the only way to add animation to your web page
- they can be fun
- they are considered trendy in design school circles
How to make an animated GIF
- make a Photoshop document with a single layer representing each frame of the animation
- open the Animation panel by going to Window -> Animation
- click the 'Add new frame' button to create as many frames as you have layers
- for each frame, make any visual changes to what is displayed using standard Photoshop tools and techniques
- set the duration of each frame
Automatically creating frames from layers
- Create a Photoshop document with multiple layers
- In the Animation panel menu, click 'Make Frames From Layers'
- This creates one frame for each layer, where only one layer is visible in each frame.
- Customize each frame as manually above.
Adding a tween
A tween is an automatic transition between two frames. You can tween a layer's position, opacity, and effects.
- with the Animation panel open, create a frame that represents the start of the tween
- duplicate the first frame to create a second frame that represents the end of the tween
- with the second frame selected, in the Animation panel menu, select Tween
- in the settings, enter how many new frames you'd like to create as key frames between these two
- more frames creates a smoother animation
- the maximum number of frames per second depends upon the limitations of the software used to display the image
Reverse the order of frames
- Select frames you want to reverse, and click 'Reverse Frames' in the Animation panel menu
Convert video to animated GIF
- In Photoshop, select File -> Import -> Video Frames To Layers
- Select your new animated GIF/QuickTime movie and configure how you want to import it in the Import Video To Layers dialog box.
- That's it. You should now have all the frames on separate layers and as frames in the animation palette.
Save as GIF
Photoshop allows you to export files with compression using their Export As options.
- File > Export > Save for Web (Legacy)...
- Select 'GIF 128 Dithered' from the Preset menu.
- Select 256 from the Colors menu.
- Select 'Forever' or another option from the Looping Options menu
- Click Preview to make sure the GIF looks good
- Click Save... select a destination for your animated GIF file
- Creating frame animations from Photoshop Help Pages
- 7 tips for designing awesome animated gifs from Invision App
Animated GIFs as a design trend
- The GIF is Dead. Long Live the GIF
- New York Times / Fashion & Style / Fresh from the Internet's Attic
- Physical GIF Kickstarter project by Greg Borenstein
- Reed and Rader
Tutorials in Photoshop
- CreativeTechs / Build Animated GIFS in Photoshop
- Switched.com / How to Make an Animated GIF from a YouTube Video
Tutorials in Photoshop Elements
- New York Times / Gadgetwise / Q&A: Animating Your Own GIF
- Photoshop Elements / Optimizing images / create an animated GIF
- Example of a hawk snatching a bunny: File:Example of animated gif fall 2013.zip
- #Animated-GIF.deviantART Gallery
- Appealing Industries: Animated History of NYC Subway