Join Chris Converse for an in-depth discussion in this video Exporting a preloader animation from Photoshop, part of Creating an Animated Infographic with Edge Animate.
Next we're going to create the loading graphic, so in the exercise files let's open up preload_animation.psd. I'm going to zoom up in here a bit. Now if you're using Photoshop CS6, you can come under the Window menu and come down to Timeline. If you're using Photoshop CS2 through CS5.5, the name of this panel will be up here and it'll called Animation. So in either case let's open up the Timeline or Animation panel. Down here you'll see all of the individual frames. This is the frame based animation. As I click the different frames here you can see the animation on the main canvas.
So basically this animation is going to play while Edge Animate is loading the entire composition. So to save this let's come up to the File menu, let's choose Save for Web. I'll zoom up in here as well. The first this we want to do is make sure that we're saving as a GIF format. This is the only one of the web graphics that can have animation. Next let's come over here to the Matte color, we're going to come in here and set this to black. Once I do that you'll see that the edges of the anti-aliasing here are Matted to black. In Edge Animate we're going to set the background to black, so that way this animation will fit nicely against that black background.
And to preview this let's come down here and click on the Play button. So we can see the animation playing inside of here. Once that looks good, let's come down here and choose Save. From the Desktop let's choose myInfographic. the images directory and this will be called preload_animation.gif. Then hit Save, you can close and save your changes. Now back in the operating inside of the images directory we have our person.png, which is sprite graphic and our preload animation that we'll be using in the preload area of Edge Animate.
And now with our graphics created, next we'll create a color palette using the swatches feature inside of Edge Animate.
- Creating sprite graphics in Photoshop
- Creating a pie chart without graphics
- Adding Edge Animate fonts
- Animating text
- Stopping and starting animated symbols