Create Animated GIF’s in Photoshop
If you’ve been on the internet lately, you’ve most likely come in contact with an animated GIF. From High Fashion to Commercial Advertisements to Fine Art, the GIF is revolutionizing how we interact with moments in the digital age. The format (Graphics Interchange Format) allows the playback of sequential images, creating a video like file. GIFs have the ability to endlessly loop or stop animation after one to a few sequences. This tutorial will instruct you on how to create your own animated GIF from a sequence of photos. The best part is they aren’t too hard to make but have a tendency to leave a lasting impact.
1. Open Photoshop.
Double click the Adobe Photoshop CC shortcut located on the Dock (mac).
2. Load Files into Stack
Go to File > Scripts > Load Files into Stack.
The Load Layers window will open. Choose Files from the Use drop down menu and click Browse. Locate the series of images you want to use for the Animated GIF. Select them all and hit Open. Once the files populate within the Load Layers window, Hit OK.
Note: All files were previously toned to achieve my desired consistency in color, exposure, and contrast.
At this point, Photoshop has created a handful of layers in the Layer Panel on the right hand side of your workspace. These layers will become individual frames in the animated GIF.
3. Open Timeline and Create Frame Animation
To open Timeline, go to Window > Timeline. Select Create Frame Animation from the dropdown menu in the center of the Timeline panel.
4. Make Frames from Layers
In the upper right hand corner of the Timeline Panel, click the dropdown menu and select Make Frames from Layers. All layers in the document will be converted to frames.
5. Set Animation to Loop
To continuously loop the animation, click Once in the bottom left hand corner of the Timeline Panel. Within the repeat menu, select Forever. Click Play or press the space bar to view the animation.
Note: Photoshop provides the ability to delay the play of each frames in the animation timeline. In my case, I didn’t want the animation to speed through the flipping of the page so I changed the delay to 0.3 seconds. To do this, hold Shift and select all the frames. Click the small arrow at the bottom of one of the frames. Choose the delay time that best suits your animation.
6. Final Adjustments
The benefit to creating frame animations in photoshop is the ability to utilize layers as if you were working with individual photos. For example, when photographing the turning pages I used a 50 mm lens and accidentally captured a sliver of the tripod in the bottom left corner of each frame. I noticed this after creating the animation and quickly utilized the layering capabilities to fix it. By creating a new layer in the layer panel and placing it as the top layer, I was able to clone out the tripod and apply the adjustment to all the frames. The additional curve adjustment with mask on the right hand side applied to each frame as well when placed on top of all frame animation components. While this step may not be necessary, it’s nice to know your options.
7. Export GIF
Go to File > Export > Save for Web (Legacy).
The Save for Web window will open. Within the Optimized menu select the following parameters.
- Select the GIF file format
- 256 Colors
- If sharing GIF to web, resize by defining the width and height fields
- Looping options: Forever
How to share to Instagram:
Instagram does not currently support GIFs so you will need to save a mp4 file to share. To save a mp4, go to File > Export > Render Video. Redefine settings if necessary and click Render.
Note: Instagram requires videos to be 3 seconds long. To achieve this, I duplicated my frames and reversed them; creating the illusion of flipping the page back and forth.
Congrats! You’ve created your first animated GIF and can now share it with the world.