Skill Level Intermediate
- [Chris] Hi this is Chris Converse, and in this episode we'll assemble and style a series of frames exported from After Effects into a single sprite sheet graphic using Photoshop. In a future episode, we'll create the same graphic using Sketch. Now this technique will allow us to create a graphic that's used in a previous episode to create an HTML5 animation. So if you'd like to follow along, download the exercise files and let's figure out how large of a canvas we'll need inside of Photoshop. Now the exercise files contain a folder with exported frames in the PNG format, and each frame is 100 pixels wide by a 170 pixels tall, and we have 30 frames in total, so we'll need a canvas size with a width of 3000 pixels by a height of 170 pixels.
For the resolution, I'll set this to 72, and then click OK. So, now we have our canvas size here. Now let's come back to the Layers panel. Let's click on the lock to unlock the background layer. The let's come down to the Foreground Color swatch. Let's come in here and set a medium shade of green. Let's click OK and then I'll hold the Option + Delete key or ALT + Delete on the Windows platform to fill the layer zero with green.
So, now with that in place, let's come up to the View menu. Let's come down and choose New Guide Layout. Now inside of this dialogue box, for the number of columns let's set this to 30 to match our total number of frames. And then for the Gutter let's set this to zero. Then I'll choose OK. Now I'll come up here and zoom up on the canvas and over to the left.
Next let's go to the File menu and what we want to do now is import these individual frames. So, from the File menu, let's come down and choose Place Linked. This will create a smart object that's linked back to the original file. From the desktop let's go into the Exercise Files. Let's go into the steam_loop folder and let's choose stem_00000. Choose Place. We'll see this showing up on the stage. Now, before I hit the Return key or hit the check mark to accept this, let's click and drag and let's drag this over to the left until it snaps into place.
Once it's in place, I'll hit the Return key. So, now in the Layers panel we can see we have a linked smart object that's linking to that first frame that's in this steam_loop in the Exercise Files. So, with that placed, let's go to the File menu. Let's do this again. Choose Place Linked. Now we're going to select 001. Click Place, click and drag. This will snap into place, then press Return. So, now what we're going to do is repeat this process to place all 30 frames into the Photoshop canvas aligning each one with the frame that we previously imported.
And now before I continue on, let's save our file. We'll save this to the Desktop. We'll name this "spritesheet.psd" I'm going to uncheck the Embed Color Profile then hit Save. And so now I'll just crossfade ahead to me placing the final frame. And remember, since the frames start at zero, the final frame, which will be in the 30th spot will be frame number 29. And now that I have all 30 frames imported, let's go back to the Layers panel. I'm going to select the very top layer, which is steam_00029.
Scroll down to the bottom, hold the Shift key, select the very first frame, which is 00000. With all of these selected, I'm going to hit Command + G, or CTRL + G on Windows to put all of these frames in a group, the we'll name this "frames." Next, let's add a color overlay to color all of the artwork on these individual frames to be white. So at the bottom of the Layers panel, Let's come down to the fx. Let's apply Color Overlay.
I'll move this out of the way, so we can see in the background. For the Blend Mode, we'll leave this Normal. Opacity at a 100. Let's click on the gray swatch. Let's set this to be white. Let's choose OK and then OK again. Now the effect is really light, so what I want to do is multiply all of the frames and the most efficient way to do that is to put all of these frames into a smart object. So, let's right click on the frames group. Choose Convert to Smart Object, and now that this is a smart object, let's hit Command + J or CTRL + J to duplicate this layer.
We'll do this two times. And for the second duplication, let's set the opacity back to 50%. And now for the final step, we need to export all of these layers into a single PNG file. So, in the Layers panel, let's hide Layer 1. Then let's go up to the File menu. Let's come down and choose Export, then choose Save for Web. From this dialogue box here, let's change the format to PNG-24. Make sure transparency is selected, which will make this a PNG-32 file.
Then let's come down to the bottom. Choose Save. Choose the Desktop. We'll leave this as spritesheet.png and then hit Save. And now we have a sprite sheet that's ready to be animated. Now if you'd like to explore making the file size of our sprite sheet even smaller, I'd recommend watching Creating a Smaller Graphic with PNG-8. And if you'd like to see my technique for creating a seamlessly looping animation of steam in After Effects, check out Creating an Animated Sprite Sheet with After Effects. Both courses are available here in the library. And so with that, I'll conclude this episode.
And as always, thanks for watching.
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.