Generating Image Assets in Photoshop CC

13

In Adobe Photoshop CC, Adobe released a powerful new feature called Asset Generator that allows users who produce web comps in Photoshop to automatically generate web assets to specific sizes, formats, and other parameters automatically on-the-fly. It truly is an amazing feature that can save users tons of time and takes a lot of the guesswork out of the process.

For web designers this is a very impactful feature, but it can also be useful for print designers. One thing that almost all designers are requested to do at some point, is create images that will be used on a web site. I’m not talking about the look and feel of the web site per se, but instead the images that are placed in articles of the web site. I was recently providing training to a small group of users and they were explaining to me that in addition to their day-to-day design duties, they were required to generate multiple sizes of several images that get uploaded to their corporate web site. Here were the sizes that they needed to create:

500px × 500px

800px × 800px

1000px × 1000px

1500px × 1500px

 

600px × 400px

900px × 600px

1200px × 800px

1500px × 1000px

Although performing the task of cropping and then scaling the image to achieve the desired sizes isn’t particularly difficult, it certainly is time consuming. Being eager to provide them with a better solution to their problem, my thoughts initially went to creating a Photoshop action that would perform the necessary scaling and saving of the images. Although this solution would certainly work, it isn’t very scalable because if any of the requirements change, the action would need to be recreated.

I then thought about the Asset Generator feature in Photoshop CC. This provides a way to automatically generate image assets based on parameters that you define for each layer or layer group. Pretty cool! Let’s take a closer look at the approach that I suggested to solve this student’s particular problem—and hopefully yours too!

Setting up the file

This first thing I did, was to create a new file to the size of the maximum asset that I needed. In this case based on the sizes listed above, that was 1500 pixels by 1500 pixels. Keep in mind, the actual size of the file is determined by what is on each layer or layer group. So by making the file extra large, I’m just giving myself plenty of room in which to work. I saved my file as a PSD file and called it Web Assets.psd, although you can use any name that you wish.

Next, drag an image into this file so that it creates a new layer. Don’t worry about the name right now, we’ll give it an appropriate name later. What you want to do now is crop the image to the maximum file dimension that you need. You can’t use the Crop tool to do this however because it will crop the entire file. Instead, create a marquee selection to the appropriate size, position it, and change the size of the selection by choosing Select > Transform Selection. Once the selection is at the correct size and location, choose Select > Inverse, then press the delete key to remove any unwanted image area. I’m starting with the landscape version of the image first and in the figure below you can see how I’ve trimmed the image to the appropriate size and aspect ratio.

Now we need to tell Photoshop that we want it to generate image assets automatically based on the layers in our document. So choose File > Generate > Image Assets. Theoretically, this will create a new folder in the same folder where your .psd file lives that contains the automatically generated assets. However if you look there now, you won’t find anything. That’s because we haven’t defined any parameters that Generator can use to generate our assets.

Setting the parameters

Generator provides a robust choice of options for defining the properties of the assets that you need to generate. Going over every option would make this article way too long, but you can read about the details here.

To get started, we’re just going to rename our layer as raindrops.jpg. Generator supports the .png, .gif, and .jpg formats, so whichever extension you use for the name of your layer, that is the format that will be created. Go ahead and look in the folder where your .psd document resides and you should notice a new folder with the same name as your .psd file with –assets appended to the end of it. Inside of that folder, you should see a jpg file at the same size as the layer in the .psd file.

Now, we may want to get a little more specific by defining the quality as well as the specific size of the generated asset, so I’m going to change the name of the layer to 1500 x 1000 raindrops.jpg85%. When a unit of measurement is not specified, pixels is assumed but you can use any supported unit of measurement that you wish including in, cm, mm, etc. Yes, there is a space between the size parameter and the filename. This implicitly sets the size of the image as well as the jpg quality. You can adjust the quality as your requirements dictate. The important thing to remember at this point is that the asset has already been updated. No additional instructions are needed, no button to push, it’s done!

That gives us our initial image, but we need 3 more images at this aspect ratio. This is quite easy to do as we simply have to add the additional sizes separated by commas as the name of the layer. So we’ll change our layer name to:

1500 x 1000 raindrops_1.jpg85%, 1200 x 800 raindrops_2.jpg85%, 900 x 600 raindrops_3.jpg85%, 600 x 400 raindrops_4.jpg85%

Note that I’ve appended a number to the name of each file to avoid an error during asset generation. Each file needs a unique name in order to generate each individual asset. Also, keep in mind that you can’t define any arbitrary number you wish for the size properties. Actually you can, but the images will get distorted. For each version of the asset that we defined, we’ve ensured that the aspect ratio remains consistent.

Wrapping it up

We’re not quite finished yet, as we need the square versions of the images now. So I dragged another version of the image into my PSD file, cropped the image information on the layer to the maximum dimension that I need so I’m always downsampling and not upsampling. I then named the layer to reflect the dimensions, file names, and image quality that I desire, and the assets have been generated on the fly.

As a finishing touch, I thought it would be h
elpful if I could put the assets for each layer into its own folder to further keep things organized. It turns out that Generator makes this quite easy. Simply enter the name of the folder that you want the assets organized inside of followed by a forward slash in front of each asset instance name that you defined and that will create a subfolder in which the assets will be stored. I’ve included the names of my layers below.

1500 x 1500 Square/raindropsSQ_1.jpg85%, 1000 x 1000 Square/raindropsSQ_2.jpg85%, 800 x 800 Square/raindropsSQ_3.jpg85%, 500 x 500 Square/raindropsSQ_4.jpg85%

1500 x 1000 Landscape/raindrops_1.jpg85%, 1200 x 800 Landscape/raindrops_2.jpg85%, 900 x 600 Landscape/raindrops_3.jpg85%, 600 x 400 Landscape/raindrops_4.jpg85%

The resulting asset folders look like this:

Depending on the type and number of assets you need to generate, your Photoshop layer names can become quite long. To make this process easier, I’ve created a text file that contains common asset combinations that I need to generate. This way I can make the adjustment to the properties in the text file (which is much easier to see) and then copy and paste from the text file to the layer name. I’m a huge fan of TextExpander as well which allows you to type a sequence of characters that will automatically enter text associated with the character sequence. This also streamlines the layer naming process although it’s still a bit tricky to edit inside of Photoshop. Either way, the end result is a folder full of assets in a fraction of the time that it would take to do the work manually.

 

Chad Chelius is a trainer, author, consultant, and speaker residing in the Philadelphia area. He’s been using Adobe products for over 25 years and began his career in the design and publishing industry. As an Adobe Certified Instructor and a consultant, he teaches and advises on all Adobe print and web products, specializing in InDesign and InCopy workflows, Illustrator, and PDF accessibility using Adobe Acrobat. He works with clients both large and small, in and outside the United States, helping them to solve problems, work smarter, and more efficiently using Adobe products.
  • scommetix says:

    Nice Job! I will try this now! Thx!

  • Guest says:

    Great Thomas! Enjoy!

  • TVgraphics says:

    I keep getting a invalid character “/” error message when trying to create sub folders.

    Mac OS 10.8.5 Adobe CC

    Ideas?

    Otherwise it works as advertised. Thanks

  • Chad Chelius says:

    Make sure there are no spaces within the name and directory location. It could think that you’re trying to define another parameter and that character isn’t valid within the parameter. Could you copy the name of your layer and paste into a reply. I’ll take a look for you.

  • Muhammad Nasir says:

    Hi Chad Chelius,

    Nice Article, But I want to ask a quick question that how can I add transparent padding around the generated image. i.e I want to export rating stars along with padding.

    Thanks.

  • Erick says:

    I have a question… I am trying to use “Generate Image Assets” to output a JPG in a specific dimension. For example, I have a Layer folder named “1024×600 layername.jpg” The original dimensions are 4267×2500 but when I go into the generated image assets folder it creates a distorted image of 456×83. Now, I’ve done this in other photoshop files without issue. Anybody have an idea what can be causing this issue?

  • Dave says:

    I keep getting a invalid character “/” error message when trying to create sub folders.. most websites say Photoshop doesn’t support this feature and other people say it works.. is this a windows error?

    Photoshop CC (v14.2.1 x32 for windows 7 and windows 8)

  • Ellen says:

    I need to crop photos to the same size square and generate 3 sizes, but I couldn’t follow this lovely tutorial. You tell what to do, but not HOW to do it step-by-step for a groping newbie such as I. I wrestled for 2 hours, but never got the right result. Got lost at the marquee resizing and when I stumbled thru that the end results when generated were square distorted images. Couldn’t figure out how to do the landscape separately from the portrait, tried doing both dimensions at once….thououghly confused.

    • Chad Chelius says:

      Hi Ellen,

      The challenge that you’re running into is that you are starting from a square image but trying to output assets at various aspect ratios that are different from the original. One approach could be to convert your image to a smart object and make several copies of that smart object layer (one for each of the aspect ratios you are trying to create). Now, you can apply a layer mask to each copied layer and then rename the layer as desired. An asset will be generated from each of the layers that you create. As long as the dimensions in your layer name match the aspect ratio of the layer mask on each layer, the image should not be distorted. What you’re dong now is forcing Photoshop to stretch the generated asset to the dimensions that you specify based on the original size. The other nice thing about this is that by using a smart object, you can swap out other photos for the same cropping setup. I hope this helps.

  • Adrian says:

    This is a bad practice, generate image assets kinda cool but it changes the colour of an image.

    • Chad Chelius says:

      I discovered this as well recently when working with a client. Using the old “save for web” method, you can convert to sRGB. There’s currently no mechanism to control this using Asset Generator. I’m hoping we see this in a future update.

  • nancy says:

    Hi How can I reduce my images resolution by saving with image assets? let’s say from 300dpi to 150dpi. ?

    • Chad Chelius says:

      Because the asset generator is intended for web assets, you can’t really define a resolution but you can define pixel dimensions. For example you can name the layer 1000px x 800px MyLayerAsset.png.

  • >
    Notice: We use cookies on our websites to give you a great online experience. If you keep browsing, we'll assume you're ok with this. For more information, see our privacy policy. By closing this banner, you agree to the use of cookies.I AGREENo