Gain marketing insights, consumer behaviour trends and creative inspiration from team BTI
Newsletter Signup
Newsletter Sign-up
Subscribe to our newsletter to gain marketing insights, consumer behaviour trends and creative inspiration.

*By clicking the submit button, you agree to receive newsletters and informational emails from BTI Brand Innovations.

Posted by Thera on June 18, 2013

This tutorial is a simple way to create an animated GIF using multiple images in Photoshop CS6. The purpose of this technique is to create an illusion of motion. Before you begin you need to find the series of images you want to animate. I decided to use pictures of my creative director, Mike, dancing.

1. Once you have chosen your pictures, gather them into a folder on your desktop and call the folderIMAGES, then launch Photoshop CS6. Make sure your image sizes are small (mine are 5” X 7”, 72 DPI, and in RGB mode).

2. After launching Photoshop CS6 click FILE>SCRIPTS>LOAD FILES INTO STACKS. At this point the“Load Layers” window will pop up, click on the “Use” drop down bar and select “Files” then “Browse”. Select all your files in your IMAGE folder located on your desktop, then click “Open”, then click “Ok”. This will import all your photos as individual layers into your Photoshop file.

3. Rearrange your layers in the order from first at the top to last at the bottom (name the layers 1,2,3 etc., to help identify them later on.)

4. Start creating your animation by opening the timeline palette, to do this go to WINDOW>TIMELINE. At this point the timeline pallet should appear at the bottom of your Photoshop file.

5. Make sure all layers are turned off except the first layer, which is the first image in your animation. Next select “Create Frame Animation” from the dropdown box in the “Timeline Palette” and then click it to activate the thumbnail. The image should appear smaller as a thumbnail below.

6. With the same layer selected (“first” layer) go to the very upper right corner of your timeline box, click on the dropdown arrow, and then select “New Frame”. This should duplicate the frame you had before. Now go and turn off layer 1, and turn on layer 2. The second thumbnail should now be active at the bottom in the Timeline box.

7. Now repeat the same step again; go to the top right corner dropdown arrow and make a new frame, it should repeat frame 2, but now turn off frame 2 and turn on frame 3. Repeat this step until you get to your last frame.

8. Now that you have all your frames in your timeline, you can preview them by pressing the play button. The frame should animate.

9. You may find that your animation is too fast or slow for your liking. In order to adjust the time, hold down shift and highlight all the frames at once, then change the time at the bottom of the frame. You can also adjust how many times your animation will repeat; it can play only once, three times or go on forever. If you do not like those settings you can customize your own settings under “Other”.

10. Once you are satisfied with what you have you can save your file under FILE>SAVE AS and then save it as a TIFF with a unique name (make sure the layers box is checked on). Once you click “Save” the “Tiff Options” window will appear, make sure to set your compression to “None”. This will be your working file in case you want to modify or add to your animation later.

11. Next you want to save your file for web by going to FILE>SAVE FOR WEB. This will make the “Save For Web” pop up box come up. Here you will choose your preset – choose the dropdown menu option called UNNAMED, and then choose GIF. You can play with the settings in the box to adjust the dither and the amount of colours used, it will preview what you do. I chose 64 colours because the fewer colours you choose the better it runs in a browser, and I left the dither at 100%. Next click “Save”.

12. Open your GIF file using the browser of your choice, to preview your animation.

Now that you have created a very basic Photoshop GIF you can start to understand why and how to use this GIF. Many companies use GIFS as a way to advertise a promotion on a webpage. It’s fast, easy to place online and it adds great contrast (it moves and animates) compared to a very still webpage – plus you can embed links into a GIF, which allows you to link it to another webpage. Another great way to use a GIF is to add it into an email. In an email it will continue to move, so you could animate your company logo and make the email a little more fun and friendly. A final way to use a GIF is for fun, like we did here. It is a great way to poke fun of your friends and then show them to share a laugh!

There is never a dull moment in our life. Follow us on Instagram today!