This article has been moved to Medium from Diana Urban?s author website to keep it focused on book-related content. If you?re interested in reading thrillers with a twist, check out her website to snag a free short story.
Animated GIFs are all the rage. And if done well, they can be a classy way to show off a product if you have limited real-estate to work with on a website, your Facebook page, or even in an email.
For example, last week my company HubSpot launched a new product. I?m in charge of our email marketing, and wanted to send a promo email announcing this product launch. Wanting to keep the email short while conveying the awesome features, I created an animated GIF in Photoshop that used a fading effect to make the image look like a video of how the product works.
Here?s what it looked like:
I?ve started creating animated GIFs to promote several of our free offers as well, which have been used on our landing pages, blog posts, and emails. Creating the fading effect in Photoshop is easier than you might think. Here?s how to create an animated GIF in Photoshop that uses a fading effect.
1. Create one layer per animation
In the example above, I have a background image plus four images that fade in and out. I created a separate layer for each of those four images, and labeled them clearly so I can easily select the right ones later. For now, choose the layers that you want to show by default, when someone first looks at this GIF.
2. Show the animation window
In the top navigation bar, select Window > Animation.
3. Add a new frame for the first animation transition
By default, there will be one frame in your animation. This frame will include any layers that you currently have selected. Click the new frame button in the animation pane.
4. Select the layers you want shown in your 2nd frame
Make sure this new frame is selected, and then go to your layers pane. Select the layers you want to show up in the 2nd frame of your animation by toggling the little eyeball next to each layer on or off. You can add layers, subtract layers, or do both.
5. Edit the timing of each animation frame
Click on the arrow next to the default timing below each animation frame, and select how long you want each frame to last. If you want to set a custom time that?s not shown in the list or recommended times, select Other and enter a time in seconds. If you click the play button at the bottom of the animation pane, you?ll see a preview of your animation. The animation will flip from one frame to the next without a smooth transition.
6. Add the fading effect
Adding the actual fading effect is simple. First, select the two frames you want to add the fading transition between (control-click each frame). You can also add the fading transition between multiple frames by shift-clicking on multiple frames. Once you have your frames selected, click the tweening icon (it looks like little boxes fading to the right).
Tweening means that you?re adding frames between your existing frames that add a fading transition between those frames. I like to add five frames for a smooth transition. You can experiment with adding fewer or more frames if you?d like. Then click OK.
7. Customize the timing of your transition
Shift-click all five of your tween frames, and then click on the time below one of the frames. Select 0 seconds for the smoothest fade transition.
8. Preview your animation
Click the play button at the bottom of the animation pane to see what your fading animation looks like. Once you edit the timing of your tween frames, your animation pane should look like this:
9. Save your animated GIF
In the top navigation, click File > Save for Web & Devices. From the file type drop-down menu, select GIF. Then save your image.
That?s it!
