How to Turn Your Images into an Animated GIF Using Photoshop CC

In this tutorial I show you how I created an animated GIF in Photoshop CC using a series of images. The images show a model wearing different colored sunglasses. Each image also has text which describes the color that she's wearing. So it's sort of like an image slideshow of products but in an animated GIF version.

This is actually a pretty cool way of displaying multiple products all in one image. You can see the GIF that I created below:

Animated GIF

Below you can watch the video to see how I created the GIF and beneath the video, you will see the written tutorial along with screenshots.

Can't view the video? Watch it on YouTube

Prepare your images:

First you will want to prepare each and every image that will be used for the GIF. If you plan on adding text to your image or any effects, you should add them to each image and then merge the layers together.

If you do not merge, the text or effects that you add, will be displayed in a separate frame. Merge the layers, by simply going to "layer > merge visible".

Merge visible layers

Add all of your images to a canvas:

Then select the rectangular marquee tool Rectangular marquee tool icon

Now select the image with the rectangular marque tool.

Select image

Now simply copy and paste the image into one canvas. Repeat these steps for all of your images.

To copy, go to "edit > copy".

Copy image

To paste, go to "edit > paste".

Paste layer

Create an animation timeline:

Now we will need to show the timeline window. Note that in older versions of Photoshop, this is called the animation window which is now called a timeline window. To show the timeline window, simply go to "window > timeline".

Window timeline

Now since we are using images to create our animated GIF, we will need to select "create frame animation" in the timeline. In the image below, you can see how this menu looks.

Select create frame animation

Next, click on the "create frame animation" button.

Click create frame animation button

After clicking this button, you will see a timeline containing one frame. To add all of the images that you just created to the frame, you will need to click the arrow to the right of the timeline which will show a menu like in the image below.

Select timeline menu

Next simply click on "make frames from layers" to add all of the layers which contain your images.

Select make frames from layers

After adding all of the layers, you can preview the animation by clicking on the play button in the timeline window. When using still images such as the ones that I used in my animated GIF, the animation speed may be a little too fast. To adjust the speed, simply click on the arrow on the bottom of each frame and select the time delay which is in seconds.

Adjust frame speed

After adjusting the speed, click the play button again to preview the animation.

Play timeline

Save your animated GIF:

When you are happy with the look, simply go to "file > save for web" to save.

Save for web

For the settings choose "GIF" from the drop down menu.

Output as GIF

In the animation section, you can also set looping options. For example, you would select "once" if you want all your images rotated once and "forever" to have them rotated infinitely.

Choose looping

Click the save button to save the animated GIF to your computer.

Save GIF

To preview the animated GIF, simply open it up in a web browser. I had to open it up with Safari on my Mac computer because my preview application wouldn't show the animation. To use the image on your site or on some other site, simply upload the image as you normally would any other image.

Add new comment