Join Michael Ninness for an in-depth discussion in this video Saving layers as individual PNG files, part of Photoshop CS2 and Flash 8 Integration.
In the previous chapter, I showed you what happens when you bring in a layered Photoshop file into Flash 8. Basically, you only get the composite of those layers as a single graphic. In this movie I'm going to introduce how to separate each layer as a separate document out of Photoshop so you can bring in each layer as a separate element inside Flash 8. So in the chapter 2 folder of the exercise files I'm going to go ahead and open up the portfolio document again inside Photoshop. And here I've got many individual layers and again the goal is that each one of the separate layers would end up as a separate document that we could then bring in to Flash hopefully sequentially.
And before we actually start going through this process of separating out the layers there's two ways to do this. There's kind of a complex way and a simpler way and I'm actually going to show you both of them. I prefer the complex way cause it's got some advantages which you'll see as I go through both these options. Before we do that though, I want to teach you how to kind of work with the Layers palette, going from layer to layer. Isolating each layer if you will. Right now I've got all my layers turned on, they're all visible, I have the eye turned on for each layer. If I turn off a particular layer, you know just by clicking outside of course that turns it on and off.
If you hold down the Alt key on Windows or the Option key on the Mac, what this does is that turns off all the other layers except the one you just Alt or Option clicked on. So it's a nice way to isolate just the layer that you want to focus on. If you Alt or Option click again on the eye, it remembers which layers were turned on before and it toggles back to that scenario. So if I only had say six or seven layers turned on, and I Alt or Option click on the navigation eye let's say, that turns all the other visible layers off and if I Option or Alt click again it remembers the state of that document.
It doesn't turn all layers back on, only the ones that are visible before. So that's kind of a nice thing that Photoshop's doing to take care of you there. Now to get us back where we started I'm going to just drag through the eye column to turn all the layers back on. Through the course of this exercise here of getting each layer to be a separate file, I'm going to want to work with one layer, save it off as a file and then move to the next one. And things that changed a little bit in Photoshop CS2 in that regard. So let's set this back up, again I'll Alt or Option click on the eye to just isolate that one layer. In previous versions of Photoshop, at least Photoshop CS, if you wanted to move to the next layer, turn it on, select it and make the previous layer unselected and not visible again, you would Option or Alt click on the layer name of the next layer you wanted to go to. So if I do that now, I'm holding down the Alt key of Windows or the Option key on the Mac, unfortunately in Photoshop CS2, that behavior's now changed.
You see all it did is select that layer, it did not turn it on, and it did not turn off the previous layer. Again in previous versions of Photoshop the behavior would be that this layer would've turned off and this layer would have turned on if I had Alt or Option clicked on the layer name. The only way to do this in Photoshop CS2 now is instead to use keyboard shortcuts. So the Alt key on the Windows machine or Option on the Mac and then your square bracket keys, your left and right square bracket keys. So if I do Alt or Option [ it turns off the current layer and turns on and selects the layer below. Option or Alt ] goes the opposite direction. So as I'm walking through my document, by using the keyboard shortcuts I'm turning off the previous layer and turning on and selecting the next layer above or below depending on the shortcut that you use. So Option [ or Alt [ and Alt or Option ].
So this is a great technique to pick up on and in Photoshop CS or earlier you could use both the mouse or the keyboard shortcut. Again just to reiterate in CS2 you have to use the keyboard shortcut method to do this. So now that I've got a single layer isolated all the other layers are turned off, we now want to turn this into a separate document. The easiest way to do that for now is to go to the Layers palette, specifically the fly out menu for the Layers palette, and choose the Duplicate Layer command. That'll bring up this dialog box and you'll see it says Navigation Copy as the name of the layer. It defaults to duplicating this layer in the same document that you're currently in. Course we want to do this to an new document so I'm going to choose New.
And what I like about this method of using the Duplicate Layer command to create a new file is that the name of layer that you're duplicating shows up in this field, where I can copy and paste it into the name field so that the name of the new document that I'm creating it has the same name as the layer was called in the Layers palette. We'll go and click OK. And you'll see I end up with a separate document, with just that layer in it, where all the areas of transparency been preserved. The name of the file's now Navigation, as is the name of the layer in Layers palette as well so everything matches. At this point we need to choose a file format that will preserve this transparency when we bring it into Flash and currently the only file format you really can choose to do that is the "ping" or the PNG file format.
If I were to choose JPEG or GIF, all the transparent areas in this document of course would turn into opaque white, which is not what we're going to want if we want to re-composite this document back into Flash. So I have to choose the PNG file format. So File, Save As. And for my format pulldown menu I would choose a PNG file, PNG, and give it a name. Now again what's nice is it's already picked up the layer name as my file name cause I copied and pasted there. And what I want to do it is probably number these files sequentially in the order that they're appearing in the layered Photoshop document so that I can easily reconstruct the layer hierarchy back in Flash just by looking at the number order of the filenames as they come in the Flash. So since this is the first one I'm going to do I'll call it in 01 _ so just the first layer with an _ and then the name of the layer, which becomes the name of the file. You can come up with ever naming scheme you want. This is just what I found to be very effective and helps keep everything in order.
Now one other point to make here before going too much further is understanding when you bring these files into Flash, these sequential files, you know, in this case we're going have 11 of them, because there is 11 layers, Flash brings in sequential files from the bottom to the top. It thinks from bottom to top, which means the higher number would be the top layer in the layers area of the Timeline in Flash. And a lot of this is going to make more sense in a subsequent movie in this chapter where we actually bring in all the sequential files, but for now know that I'm setting this situation up where it's going to help you to re-composite your document back in Flash. If you actually do something, that's probably counterintuitive.
Most people I think when they look at the layered document or the Layers palette in Photoshop, tend to think of their document in Photoshop from the top to the bottom cause that's the way the image's composited on your screen. You know it looks at the top layer and composites all over down to the layer stack. Just know that in Flash it's the reverse of that. It thinks from the bottom of the top instead. So here I've started on the bottom layer and named it number one as opposed to starting at the top layer and naming it number one. Again, this will make more sense when you watch the other movie when we actually import the sequential files into Flash.
OK, let's go ahead and choose a location for this. I'll just save to the desktop and click Save. And this little option doesn't really matter. So we can just click OK. So now I've got this separate file. I would close it and I don't need the save changes cause I've already done it so I'll just say no. And now I've been taken back to the original layered document where all the other layers are. So now I will isolate the next layer. Alt ] or Option ] again turns off the previous layer and turns on the layer above and selects it as well. And again I would go to the Layer File menu, choose Duplicate Layer, choose New.
So it creates a new document, and then I can just, since I'm a little lazy, I can just copy and paste that layer name so becomes the default filename for this new document. Again we'll click OK. Separate document named slide shadows. The layer name is matching as well and again to preserve that transparency and have that nice see-through dropshadow we would do Save As. Choose PNG. That's our file format and again we would put 02 _ in front of our filename just to match our pre-existing naming convention that we started earlier. Go ahead and hit Save.
Ignore that dialog box and now we continue through. Go ahead and close this document, say no, and go repeat this for all of 11 layers. I'm not going to bore you with that now, but you get the idea. Now I mentioned earlier that there was two ways to actually do this. I just showed you the kind of complex way of duplicating each layer to a separate file and then saving it as a PNG. There is a different way to do it that at first on the surface does seem simpler. Let's go ahead and go through that now. So again I'm going to isolate the next layer. So Alt or Option ] turns off that previous layer and this time instead of going to the Layers fly out menu and choosing Duplicate Layer, I'm going to go to the File menu and choose Save As and choose PNG again. And you'll notice that when I choose PNG, it automatically is going to save this as a copy.
And because I've only got one layer selected in my Layers palette, this is the only layer that's going be saved in this document. You'll see that Layers is not turned on right now and it's grayed out, I can't even choose that. The only disadvantage of this particular technique is that you'll notice that the name of the file that I'm going to be saving off here is not picking up the layer name in the Layers palette. It's just adding the word copy to the actual name of the original layered document. So while it's easier to just do Save As after you've turn the layer on or off that you want, you'll need to go back and remember to make sure you name these layers correctly.
So in this case would be 03 _ and then the name of the layer here, which is field so I'll go and call that field .PNG. And again, we'll save it to the desktop so that matches up with our other two that we did previously. Go ahead and click Save. Go ahead and ignore that. Now another difference between duplicating the layer and doing a Save versus doing a Save As from this original document is that when you do a Save As the original document is left behind. It's the one that's left open, so there's not that duplicate file that you then have to close later on.
I am going to go out to my desktop, though, and take a look at this document here, the one that we just saved doing a Save As, and we'll go and edit this back with Photoshop. And again just one of the disadvantage of using the Save As technique, the reason I don't like it, is now the layer names are no longer matching. It's just a generic layer 0, when I did the Save As and choose PNG. So while that first method that I showed you is a little bit more tedious, it has advantages because it keeps the layer names in synch which is going to be very important later on when you want to go back and maybe do an edit on these individual files.
So just keep that in mind. Either way, both of these techniques are probably more tedious than they need to be. In the next movie I'm going to show you a way where you can automate the saving these individual layers as individual PNG files. So go check that out, because that's much simpler.