Walker News

Uses Photoshop To Create Animated GIF From Multiple Images

I hope this is a “simple” guide about how to use Photoshop to create animated GIF from multiple images; NOT about how to draw a series of images and convert them to animated GIF, as I am not good in drawing :-(

Using Photoshop CS3 Extended as reference (should be good to serve as an idea of how to do it with newer version, e.g. Photoshop CS5 Extended):
I used these steps to create the animated GIF used in earlier post about Meebo Repeater.

1) Open all the required images in Photoshop. The easiest way to do this is by dragging the selected images to Photoshop window.

The fastest way to open multiple images in Photoshop

2) Click Window menu and go to Arrange > Tile Vertically.

Arrange image windows in Photoshop.

3) Now, you should able to see each of the image windows. You may resize or rearrange the image windows for your convenient.

Arrange Photoshop image windows.

4) Select one of the image windows, right click on its title bar and select Image Size. Take note of the width and height value.

How to check image size in Photoshop?

5) Go to File menu and select New (to create a new image). In the New dialog box, specify the width and height value with reference to step 4. My preference is to set the background contents to Transparent. (Take note of this new image window, which I refer it as “Untitled-1″ in the subsequent steps).

Specify the width and height of new image in Photoshop.

6) Now, click the Rectangular Marquee Tool to select it.

Uses Rectangular Marquee Tool in Photoshop to select portion of image.

7) Uses mouse pointer to select the images with the Rectangular Marquee Tool, one by one, as shown. Apparently, you should select the whole part of image if that is what you want.

Uses Rectangular Marquee Tool in Photoshop to select portion of image - 2

8) Identify the first image that you want to see in the animated GIF. Then, click its title bar and press CTRL+C. Next, click the title bar of “Untitled-1″ window and press CTRL+V.

9) Repeat the step 8 for 2nd, 3rd image, and so forth.

10) Now, the “Untitled-1″ image window contains 4 layers; each layer contains one of the 4 images (in this example), as a result of repeating step 8.

Uses Photoshop to create a new image with 4 layers.

11) Go to Window menu and select Animation – there you will see a tiny bar window open at the bottom (or somewhere in the Photoshop window).

Uses Photoshop Animation function to create animated GIF.

12) Now, click the eye icon of each layer to “turn it off” except the first image of animated GIF that is to be created.

Photoshop uses eye icon to manipulate image visibility on the layer.

13) Click the “duplicates selected frames” icon, click the eye icon of first image to turn it off, click the box of 2nd image to turn on its eye icon again.

Photoshop uses eye icon to manipulate image visibility on the layer - 2

14) Repeat the step-13 for the rest of images.

Photoshop uses eye icon to manipulate image visibility on the layer - 3

15) Change the delay time of each image at your wish.

Configure time delay for each images that are played in animated GIF.

16) Click the play animation button and watch how the animated GIF played in the “Untitled-1″ image window.

Preview the animated GIF in Photoshop

17) Make sure the “Untitled-1″ image window is the active window (simply click its window title bar if you’re not sure). Click File menu and choose “Save for web & device” option.

18) In the opened dialog box, select GIF file type to save the works done.

The steps to create animated GIF from multiple images in Photoshop.

You may open the animated GIF with web browser – again, the easiest way to do this is drag it to the browser window.

Custom Search

  1. Craig 17-08-10@18:05

    Thank you for your time in putting this together – it was very helpful to me and easy to understand

  2. simon 04-02-11@08:08

    OMFG thank you soooooooooooooooooo much i been searching the internet for ages,
    was even searching in adobe help section for just a basic guide on how to create a really basic gif lol

    finally something that helps

    thanks again dude

  3. simon 04-02-11@08:09

    oh and i was using cs5 as well and ur tips worked fine with it so yay

  4. Stephen 06-02-11@00:47

    I’ve been looking for something that explains each step. You did a great job, Thank you.

  5. ken 18-03-11@16:16

    Thanks man! Very easy and well written

  6. Yvonne 19-03-11@13:06

    Thank you very much! This tutorial was extremely helpful and detailed. Another thank you for good grammar and spelling. >.<

    You deserve a good pat on the back! ;D
    …joking.

  7. David Brandon 26-03-11@06:56

    Very well done. This tutorial helped me very much. Thank you.

  8. Ling 12-04-11@23:02

    Thanks!! Really really helpful! Just created my first .gif! :D

  9. maips 19-04-11@02:29

    thank you so much!! this was so helpful!!

  10. DancingKim 12-05-11@10:28

    Hello, i’m a professional dancer. i want to make a showreel to get my promotions. I also would like to use some animation. Can someone suggest me a superb animation studio, but not necessarily very expensive? I’m here for 3 months for a tour.
    Love
    Kim.

  11. pist off 05-08-11@15:58

    Must be missing something. Worked all steps, but only creates gif file with only the first pic.

  12. beelzebomb 07-09-11@19:48

    Yup, me too – animation works fine in PS but as soon as I save & load it into a web browser it doesn’t work.

  13. Walker 08-09-11@22:40

    Did you select the final work to save as GIF format?

    There is a video in this page for your reference:

    http://www.walkernews.net/2010/12/20/photoshop-how-to-convert-multiple-images-into-animated-gif/

  14. Levis 03-11-11@00:37

    Thanks a bunch!

  15. Karthick 16-03-12@10:53

    Thanks! I learned to make GIF today

  16. Kevin 20-11-12@05:54

    Terrific help! Thanks for posting this.
    :)

2014  •  Privacy Policy