Simple GIF in Photoshop

Small GIF-animations were a huge hit on the internet in the mid 90’s. And now they’re back! Have a look at the Captain Marvel website, for instance, or the diligent use of GIFs from giphy.com on Facebook.

Giphys GIF maker makes it easy to convert a video to a GIF, or make a GIF with backgrounds, captions and stickers.

Screendump of Giphys GIF-maker
The GIF maker on giphy.com

But sometimes, it can be nice with a bit more artistic freedom. So in this post, I’ll walk You through the process of making a simple GIF in Photoshop CC.

My Example

I was photographing a play, Der er altid en ny dulle på The Drunken Flamingo, in august 2019. It had a great intro: The actor was observing the audience while disco music was pumping on the stereo, while the lights shifted from cyan to magenta on the beat of the music. A start that would work well as a GIF – so I took a series of fast shots of the intro.

Start in Lightroom

I typically start adjusting images in Lightroom (or Luminar). From a series of fast sequences, I’ve chosen two images that go together well. Yes, two images only: It’s going to be a simple GIF;-)

Lightroom screendump: The two chosen images for the GIF-animationen
The two chosen images for the GIF-animationen

The images were taken at high speed, so it’s almost just the light changing on the two images. I adjusted the light and saturation a bit in lightroom, but nothing extensive, and nothing important.

Open as Layers in Photoshop

Open the images as layers in Photoshop – in Lightroom, it’s easiest to select the images You want to use, right-click on one of them, and choose “Edit in” -> “Open as Layers in Photoshop…” via the pop-up menu.

Select the chosen images in Lightroom, and "Open as Layers in Photoshop"
Select the chosen images in Lightroom, and “Open as Layers in Photoshop”

If You want to skip Lightroom, You can open Your files as layers directly from Photoshop through the main menu. Choose “File” ->”Scripts” -> “Load Files into Stack.”

Photoshop: Open files as layers from Photoshop
Open files as layers from Photoshop

Auto-align Layers

In order to make sure that the animation is smooth, You need to make sure the two (or more) images are well aligned. Select the layers and go to “Edit” -> “Auto-align Layers” from the main menu.

Auto-align Layers in Photoshop
Auto-align Layers in Photoshop

Whether layer alignment is necessary depends on the GIF: It’s typically not necessary if there’s movement in the images sequence. I do it in this example, because I want the person/actor to be static, and just let the light change from one image to the other.

The Timeline

Use the Photoshop timeline to animate the sequence of images. Go to “Window” -> “Timeline” from the main menu in order to show the timeline at the bottom of the screen.

Photoshop: Show the timeline via Window -> Timeline
Show the timeline via Window -> Timeline

Select “Create Frame Animation” from the menu in the timeline, and press the “Create Frame Animation” button.

Photoshop: Create Frame Animation
Create Frame Animation

Push the little hamburger-menu on the far right in the timeline, and choose “Make Frames From Layers” in the pop-up menu.

Photoshop: Make Frames From Layers
Make Frames From Layers

You should see the still images in Your timeline now. You can adjust the duration of each image, and start the animation by pressing the small “Play” button.

Photoshop: Edit duration for each image in the GIF
Edit duration for each image in the GIF

Export the GIF

When You’re done with the animation, export it.

Go to “File” -> “Export” -> “Save for Web (Legacy)…” from the main menu.

Photoshop: Export Your GIF-animation
Export Your GIF-animation

Choose GIF as the export format, and experiment with the color settings, in order to get the GIF down in size – preferrably under 1MB for web. Press the “Save” button when You’re satisfied.

Photoshop: Export as GIF
Export as GIF

Lean Back and Enjoy:-)

Open Your GIF in a browser after export. If You’ve done everything right, the browser should auto play the GIF.

GIF animation from the play "Der er altid en ny dulle på The Drunken Flamingo"

Do You need a GIF, but find the process a bit too long? Contact me for an offer – I’ll be happy to help You with it;-)

Leave a Reply