Join Chris Converse for an in-depth discussion in this video Creating a sprite graphic in Photoshop, part of Creating an Animated Infographic with Edge Animate.
So the first graphic we're going to create from Photoshop is going be our sprite graphic. So in the Exercise File open up person.psd. I'll zoom up here. So what I have done here is basically created the same shape and I have spaced them apart exactly 30 pixels. So if I get the Marquee tool, click and drag you'll see at the 30 pixel mark, the distance that the orange person is from the edge of the marquee is the same distance that the blue person is from the left edge of the canvas. So what we're going to be doing in Edge Animate is bringing in this full graphic and then to create the blue version of the graphic we're going to clip on the right-hand side 30 pixels and then to make the orange graphic we are going to clip on the left-hand side for 30 pixels.
That will allow us to use one graphic but in two different states. So back in Photoshop what we're going to do is come up to the File menu, we're going to choose Save for Web. From here we're going to pick PNG-24 as the file type, then choose Save. Then from the desktop let's go into myInforgraphic, let's go into images and we'll save this as person.png, then hit Save. Then you can close this file. If you made any changes you can choose Save and next we'll create the animation for the loading graphic.
- Creating sprite graphics in Photoshop
- Creating a pie chart without graphics
- Adding Edge Animate fonts
- Animating text
- Stopping and starting animated symbols