Extract Assets in Photoshop

The most useful feature in PS CC

Say goodbye to "Save for Web"

The Generator feature automatically generates PNGs or JPGs when you hit save. Yep, that means no more hiding/unhiding layers, no more cmd + opt + shift + S, and no more duplicating layers to a new document to export assets. With some simple layer renaming, all of these steps will be totally automated.

What does this mean for you? Time saved. Even if you are super quick on the "Save for web" draw, it likely takes around 3 seconds for each layer to save. This is due to waiting for the image to render, hitting save, then hitting save again. For this example document, with 9 layer groups that need to be extracted, that's a full 27 seconds saved per revision. Yeah, more time to check your email or look at GIFs.

In order to use this feature, you must be running either Photoshop CC 2014 or 2015.

How it works

Once you set up Generator, assets will automatically be exported every time you hit save.

Layers palette

In this image, each layer group is a separate screen that needs to be exported. So I've renamed each to end in .png. This also works with .jpg and .gif. Set up your layers so that every layer or group you want to export has the proper file extension.

Note: Make sure each layer group has a solid 100% transparency background so other layers don't peek through!

Enable Generator

Just two steps to make sure Generator is active.

1) Head to Photoshop > Preferences > Plugins

Plugins menu

Make sure that Enable Generator is checked.

Plugins menu

2) Select File > Generate > Image Assets. Make sure there is a checkmark next to Image Assets.

Generate Assets

Generator saves you hella time.

Generate some assets

In addition to layer groups, you can also extract individual layers. This is especially helpful if you have a static asset (like an icon, logo, etc.) that you want to export to its own file.

Keyboard layer

Although I would never do this IRL, I'll demonstrate this with the iOS Keyboard layer. Open it up in the layers palette and append a .png to the layer name.

As you can see, this will work on layer groups and layers, even when they are nested within each other.

Keyboard rename

I like to write @2x in the name, even though Photoshop will not do anything with this information. I find it's very useful when uploading files to Invision, where they will automatically be scaled down to 1x.

Notice that in the title bar, there is an asterisk to the right of the file name. This means that when you save the file, all the layers you have renamed will be automatically exported at once.

Title bar asterisk

When you hit save, your layers are exported and the asterisk disappears.

Each layer is exported in the same folder as your original PSD. The folder name is [Name of PSD]-assets.

Assets folder

Notice how the keyboard is automatically cropped to exclude transparent pixels. Super convenient!

Make sure Generator is turned on when you're ready to export your mockups and assets. This makes last minute revisions like copy changes and little tweaks a piece of cake.

Thank you!

🍵 Donate

Buy me a coffee (or tea) to support free content and keep these tutorials ad free.