Animated graphic for a newsletter created in photoshop

Tis the season to make little holiday graphics so I thought I would share how to make a little animated graphic you might embed in an email to encourage someone to click it.

Below is several I put together along with how to create one in photoshop. These were to encourage viewers to click through to view a video. Videos are harder to actually get to play in an email but an animated GIF usually does play. I must say the cute little  snowman below was drawn by our extremely talented intern Ali Cameron!

 

lights-V2 lights snowman

 

The first step is to design the each design that will be in sequence. The fewer the better because each frame will slow down your load time.

Using the first graphic as an example there is only two frames. One with one set of lights on and then the other with the alternating lights on.

 

1. Create the graphic along with the layers that will include the graphics for each frame.

2. Select window>timeline. If asked choose animation for graphic instead of animation for video.

3. The first frame will already be visible. Select the duplicate frame icon.
Screen Shot 2014-12-12 at 12.00.38 PM

4. Now turn on and off the visible layers to show what the next frame will look like.

5. Select how long you want each frame to display and if you want to the animation to loop forever.

6. Select file>save for web  and choose GIF as your file type!

Leave a Reply

Your email address will not be published. Required fields are marked *