When the Flash output feature was introduced in ProShow several years ago, our Tech Support team started noticing that more and more people were using the feature to create banner ads for their websites. The type of Flash output that ProShow creates is based on video rather than programmatic Flash code, which makes it less than ideal from a size perspective, but for many it was good enough to get the job done. The fact is, most people would rather continue to use a tool they’re familiar with – ProShow Gold or ProShow Producer – than learn a new program like Adobe Flash where there can be a steep learning curve.
If you’re in need of a simple animated web banner, one of the most basic and most widely supported formats is the animated GIF. And if you have either ProShow Gold and ProShow Producer as well as Photoshop, you already have the tools to make one on your own without having to re-learn anything.
Creating your slideshow in ProShow
In ProShow, when you create your show you’ll want to create a new blank show with the appropriate aspect ratio, which you can specify either in the New Slide Show window or in the Show > Show Settings menu. For my show, I’m going to be using the default 16×9 aspect ratio. Note that if you need to create a GIF at a particular custom size (e.g. 640×240), you can input those resolution values in as the aspect ratio.
Slideshow DOs and DON’Ts:
If you plan on creating an animated GIF, you need to be mindful of a few things when setting up your slideshow in ProShow:
- Do not use much – if any – motion. This includes panning, rotating, tilting, etc. Using motion can cause the final size of the animated GIF to be too large.
- Avoid A/B Crossfade transitions and instead use Cut or zero-second transitions whenever possible. Transitions with lots of gradual changes will also cause your GIF sizes to be inflated.
- Use imagery and graphics with simple colors. The more complex your images are, the worse they will look in an animated GIF due to the limited color palette of the format.
- Use short slide times. Generally with an animated GIF you’re trying to capture someone’s attention quickly and give them a succinct looping message. My example uses slide times of between 0.1 and 1.5 seconds, and the entire show lasts for around 6 seconds.
Once you’ve created your show and saved it, the next step is to create the video file that we’ll be importing into Photoshop. Since my show is a standard 16×9 aspect ratio, I could use one of the many widescreen video file presets in Publish > Video for Web, Devices, and Computers window, but if your show is a different aspect ratio, you’ll need to create a custom profile. When setting up a profile, if you’re unsure of the aspect ratio, just input the same numbers you used for the resolution.
Now that you’ve set up your custom profile, click the Save button, then click the Create button to start rendering the video file. Make sure and choose a file name and save location that you’ll remember.
Converting the video file to an animated GIF in Photoshop
I’m going to be using the 2014 release of Adobe Photoshop CC to convert the MOV file we created in ProShow into an animated GIF file. The options may be slightly different in your version, but the basic instructions should be the same.
- Open Photoshop, then go to File > Import > Video Frames to Layers. Choose the MOV video we created above.
- On the “Import Video to Layers” window that appears next, you can leave the settings as they are and just click OK.
- Next, we’re going to go to File > Save for Web. The most important thing you’ll need to do here is change the format from JPEG to GIF. You shouldn’t have to touch the other settings in this window, but you can use the following screenshot if you need a reference for the settings that I’m using.
- Click Save in the Save for Web video and choose the file name and save location for your animated GIF.
After that, you’ll have an animated GIF that you can use however you’d like, though presumably you’ll be putting it on one or more pages of your website. If you have any questions about the process outlined above, feel free to post in the comments below.
- If you plan on hosting the file on your website, make sure the final file size of your animated GIF is not too large (ideally less than 250KB) so that there are no problems with slow page loads for your viewers. If it’s 1MB or larger, this may indicate that your show is too visually complex for an animated GIF, but there are a few settings you change in Photoshop to make it smaller. You can change the number of colors from 256 to 128 in the Save for Web window. Additionally, you can change your Image Size setting to something smaller in that same window.
- When creating your video in ProShow, make sure that the resolution of your video preset has numbers divisible by 8 if possible. Failure to do so may mean that the resultant video is a slightly different resolution than the one you specified.