Hi, this is Anne with Graphic Design How To, and today we're going to talk about how to
export or save layers from Photoshop into separate files.
And the reason you might want to do that is, if you're a web designer, and you've created
some web pages in Photoshop, you already have sized those images the size that they need
to be.
Now you just need to get them as separate PNG files for your web developer.
So Photoshop makes this really easy, and I'm going to show you how starting now.
OK, so here we are in Photoshop.
This is a website I made for BigTime warehouses.
It's just a fake website that I made up.
And now I want to get all of these pictures out of it, and save them all in separate files.
So first, I'm going to save a copy of this.
And I really recommend you do this because you don't want to lose your good information.
So I'm going to save this as just 'Copy' maybe.
OK, and now I'm going to use my CMD key to highlight everything that I don't want in
here.
So I'm going to CMD drag from this side, and just delete all of those.
Whoa.
I don't want to delete my background because it's kind of hard to tell what's going on
without it.
So I'll CMD click to unselect that, and I see that I have a picture here that I don't
want to delete.
That is this one.
So I'll deselect that one.
And now if I hit Delete, it's gotten rid of a lot of things, but not my pictures, which
is what I want.
Now I'm going to lock the background layer, and I'll just CMD and draw a box around these.
And I'm going to hide them with CMD Comma.
I'm also going to do the same with this picture, CMD Comma.
And then we'll grab my header image.
I'm holding CMD and dragging over part of it.
We'll CMD Comma to hide.
Now, I think I probably want to save these icons.
So I'm going to CMD Comma and hide all of those.
And then there's one right here.
I'll Command click on that one, and CMD Comma to hide it.
Now everything else here, I don't want.
This is all stuff that can be made with icons, and CSS.
So I'm going to CMD and draw a box around all of that, and then just hit V, and Delete.
So now I'm left with only the things I want, I think.
I see a couple of icons.
Oh, there's some things in here.
I'm going to zoom in with the Z Tool.
And I'll do the same thing.
I'm going to CMD and then draw a box around these images because they have this overlay
and this little icon thing that I don't want to save separately.
Anyway, I have all those selected now, so I'm going to CMD Comma to hide them.
And I will CMD draw a box just around these, and then CMD Comma to hide those.
And now I'll CMD and draw a box around these, hit V, and then hit Delete.
Whoops, I accidentally got this picture.
So let's go and deselect that.
And now hit Delete.
Now I'm going to hit OPT CMD and Comma to bring everything viewable again.
Now we have just the images that we want to export.
Now it's a good idea to kind of go through your layers and make sure that everything
is going to be exported correctly.
So if you have some adjustment layers on these, you'll want to rasterize those first.
I don't think I have anything like that though.
I'm going to ungroup all these kind of get rid of my groups so I can see what's going
on.
I'm just doing SHIFT CMD G on those...so I can easily see what layers are going to get
exported as files.
And now I'm going to go ahead and rename all of these.
If you rename them, it'll save them as that name.
And that's really helpful.
So I'll call this 'Hero image'.
And I'll go ahead and rename these all right now.
I'm...I'll speed it up for you.
OK, I've got everything renamed now.
So I'm going to unlock my background layer and then throw it away.
You probably don't necessarily need to do that.
But it just makes it a little easier to see exactly what layers I'm going to get.
Now we'll go to File>Export> Layers to Files.
Now here's where you can set up a lot of different stuff.
I'm going to set the Destination to a specific folder.
We'll call this one 'Bigtime'.
The file name prefix...
I don't really want a whole lot of stuff in front of the file name, so I'm just going
to delete that.
But this would be good if you had something you wanted at the beginning of every single
file name.
The file type... we're going to change this to PNG-24.
Now, if you change this to JPEG, you will not have the option to crop them.
So it's going to make every image the size of your entire canvas,and I don't want that.
PNG-24 works very similar to a JPEG.
I would just do it that way.
So we'll include a Transparency and include Trim Layers.
Now let's Run this.
OK, and then we get a dialog box that says it is successful.
We'll say 'OK'.
We'll go back out to our folder and take a look at each image and save them all.
It cropped them correctly.
It really is pretty awesome.
So Photoshop just has this built in, and it's a really easy way to export and save your
layers as separate files to pass up to the development team.
Please let me know if you have any questions.
And if you like this video, please click the 'Like' button, and I will see you all next
week for another graphic design tutorial video.
Thank you!!!