Home / Articles / Adobe After Effects / Saving Assets with Adobe Generator

Saving Assets with Adobe Generator

Contents

  1. Renaming layers and layer groups
  2. Evaluating and revising generated assets
  3. Generating multiple image sizes and formats from the same layer
  4. Preview images in a browser

Article Description

This excerpt from Adobe After Effects CC Classroom in a Book (2014 release) shows you how Adobe Generator can easily generate a JPEG, PNG, or GIF image from the contents of a layer or layer group in a Photoshop file.
Generating multiple image sizes and formats from the same layer

Generating multiple image sizes and formats from the same layer

If you’re preparing images for print, you know how people will view them, and you can be sure that one size and format will work well. However, the web is a very different environment. People view websites on a variety of devices, from cellphones to desktop computers, and webmasters construct their sites in different ways. You often need to provide the same image in multiple sizes and formats, so that the appropriate one is available for any particular viewing environment.

You can use Adobe Generator to create multiple versions of a single asset by adding image file names to the layer or layer group name. You need only separate them with a comma for Generator to recognize that you want to generate multiple assets.

For this project, you’ll generate multiple versions of the logo so that it can be used on various sites that promote the museum.

  1. In the Layers panel, rename the logo.jpg10 layer with the following name: 300% logo_8.jpg, 100% logo.gif, 50% logo.png24.

Photoshop generates a logo_8.jpg that is an 80% quality JPEG image scaled to 300%, a logo.png file that is a 24-bit PNG image scaled to 50%, and a logo.gif file that is a GIF image scaled to 100%.

The first image is a larger version of the logo that will work for a full-page web banner. Because the original logo layer is a Smart Object, it can be resized to 300% without losing resolution.

4. Preview images in a browser | Next Section Previous Section