How to Create an Animated Background in Photoshop?

Learn how to Create an Animated Background in Photoshop. A GIF can be a handy tool to get people interested in a picture. If you get very creative, moving images can capture the viewer’s attention very quickly. So it’s worth the time and effort to experiment with animated images to enhance the pictures on your website and social media platforms.


    Professional         
   Enterprise         
   ReportR         
   DistributR     

Animated Background in Photoshop-GIF Example

Create a survey with your own logo, styling, and branding

GIFs are really not that hard to make. If you have access to Photoshop and a few minutes to spare, you can quickly create an animated GIF that will generate attention and you can use it when you style your survey. 


This guide will teach you:

  1. Customize the Size of the Image
  2. Upload images or create them one by one as layers 
  3. Place text in new layers
  4. Set up a timeline 
  5. Create a frame animation 
  6. Select the time for each time
  7. Export the file as GIF 

1. Customize the Size of the Image

Let’s start by customizing the size of the image to 1920 px × 1080 px.

Animated Background in Photoshop-customize size of image

2. Upload Images or Create them One by One as Layers

If you have already got a few images in mind, save them to a single folder and upload them into Photoshop.

You can do this by clicking: File --> Scripts --> Load Files Into Stack

Animated Background in Photoshop-upload or create as layers

Next, you can browse through and select the images that you like and click OK. When you do this, Photoshop will automatically create individual layers for each image.


You can follow along if you already have the images ready, but to give you a better idea, we are going to select one image and then create each frame by setting up individual layers.


Once you’re ready, all you have to do is drag and drop it onto your Photoshop canvas.

If you like, you can also adjust the image with effects like Brightness and Contrast, etc.


tip
TIP


You can get the images from this page.



3. Place Text in New Layers

To add a new layer, all you have to do is click on Layer --> New --> Layer.

Animated Background in Photoshop-place text

Make sure that you name each layer to make it easier to keep track of them when you’re working on making your GIF.


To name each layer, go to the Layer panel on the bottom right and double-click on the default layer name (Layer 1) and type in a name of your choice and hit Enter.


For this tutorial, we are going to set up about 12 layers to highlight the name DJ K-Beast.  The first layer will have the whole name in a light gray and the following 11 layers will represent each letter in white.


note
NOTE


To get through this quickly, right-click on the layer and click Duplicate Layer and keep repeating this process until each letter is white. Further, it will also be easier if you turn off the icon that looks like an eye to hide each layer as you go through the motions.



Animated Background in Photoshop-Several layers

4. Set up a Timeline

Once you have set up each text layer, you will be ready to open a Timeline, so click on Window > Timeline.


The Timeline tool will enable you to turn different layers on and off at different periods of time. This, in turn, will turn your static image into an animated GIF.

Animated Background in Photoshop-set up timeline

5. Create a Frame Animation

Go to the Timeline window and select Create Frame Animation from the drop-down menu in the middle of the window.

Animated Background in Photoshop-Timeline window

Now your Timeline should look something like this.

Animated Background in Photoshop-example of frame animation

Next, go to Select --> All Layers


Once you have done that, click on the drop-down menu on the right side of the Timeline window and click on Create a New Layer for Each New Frame.

Animated Background in Photoshop-new layers

Once you have done that, go back to the same drop-down menu and select Make Frames from Layers.

Animated Background in Photoshop-make frames from layers

6. Select the Time for Each Frame

Next, under each frame, select how long you would like each frame to appear before moving on to the next frame. For this tutorial, we are going with 0.1 seconds to make it quick.


Further, you can also choose how many times you would like it to loop. If you want it to repeat, select Forever.

Animated Background in Photoshop-Time for frames

Now you’ll notice that there are more frames than expected, but that’s because the space between the two words, background image, and effects (if you have used any) will require their own frames.


Once you’re done, click on the play button to preview the GIF. If you’re satisfied, you can go ahead to the next step and save the file. But if you’re not, you can always go back and make changes to one or more layers/frames.

Animated Background in Photoshop-time for frames

7. Export the File as GIF

Once you’re ready to save the file, go ahead and choose File > Export > Save for Web (Legacy).


Next, choose the type of GIF you would like to save from the drop-down menu. If you have gradients, go with Dithered GIFs to negate color banding, but if you have a lot of colors, then choose no dither.

Animated Background in Photoshop-export as gif

Now you’re ready to have some fun with your new GIF!

What's next?

S
Support is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.