Tips

Tutorial: How to create gif animation in Photoshop


Animated gif images are a great way to advertise multiple offers using just one image. They are being used more and more in email campaigns. Here is a short  tutorial showing you how to create gif animation in photoshop, perfect for your email marketing campaign. We have also included a free email template to download, a bit of springtime generosity! Click here to download the email template

 

1. Get an image of a laptop or screen to use as a frame for the slide show. Set up your images to use as slides inside the screen. I am going to have 3 offer slides so I have three images all on different layers.

how to create gif animation in photoshop step1

 

2. You will now need to open up the animation window. To do this click on “Window” and then “Animation”. This should open up the timeline along the bottom. Each of the frames in the timeline represent a different key image. Each frame will be shown for the corresponding amount of seconds attached to it. Using this information we can create simple gif animations. Set the 1st frame to 2 seconds.

 

how to create gif animation in photoshop step2

 

3. Click on the new frame button along the bottom of the timeline. A new frame will appear. Hide the 1st slide image layer so that the 2nd slide is showing. Set this frame to 2 seconds.

 

how to create gif animation in photoshop step3

 

4. Repeat step 3 for the 3rd slide. You should now have a 3 image animation. You can click play at the bottom of the timeline to preview the animation.

 

how to create gif animation in photoshop step4

 

5. Now to save the file. Click on file > save for web & devices. Change the file type to gif and ensure that the animation is set to loop forever in the bottom right. Then choose a location to save your file.

 

how to create gif animation in photoshop step5

 

Your final slideshow animation should look something like this:

how to create gif animation in photoshop final product

Don’t forget you can download the free email template that uses this technique. Click here to download the email template.

Tips
Four reasons you should manage your customer data
Tips
Wired Email Marketing Master Class: Week 5 How to Create a Folded Paper Effect in Photoshop
Tips
8 Promises To Make To Yourself
There are currently no comments.