Printer Friendly Version

BellaOnline's Digital Art and Design Editor

Adobe Generator and Photoshop CC

Once you have completed your webpage mockup in PhotoshopR, your next step is to translate that design into a responsive HTML5/CSS3 webpage and to save all design elements as web graphics. Previously, this was a time consuming process. But with the new Adobe Generator technology, this process has become almost automatic. This new technology bridges the gap between design in Photoshop CC and design in Edge Reflow CC.

Letís take a look at the new real-time image generation process in Photoshop CC. Once you turn on Generator (File - Generate - Image Assets), this process will automatically generate images in the chosen format, scale, image quality and compression needed for your project and place the assets into a new folder named with the same name as the Photoshop image file but including an "-assets" added to the end.

How does this work? This process relies heavily on the name, or tag, given to layers in the Layers panel. The name given to each layer will give instructions to Generator for how to generate the image assets, which will be placed into a dedicated folder corresponding to the name of the Photoshop .psd file. Generator also updates these asset files when you edit your image in Photoshop. This works for layers, smart objects and layer groups. If you tag a group, Generator will process both the group and the individual layers within that group.

To add a tag to a layer, you change the layer name. For example, the layer named HeaderImage can be tagged to HeaderImage.jpg and Generator will generate that image as a .jpg image. For a layer group tagged FooterIcons.png and which contains layers named icon1 through icon4, Generator will create a composite image containing all four icon images into one image file. The individual icons in this composite file can then be accessed and display via code. This is a common process for mobile apps. If this doesnít fit your needs and you need the individual icon images as separate image files, you just add a file extension to each icon layer tag such as icon1.png - icon4.png.

Tip: Be careful with the Visibility icon on the Layers panel. When a layerís visibility is turned off, the corresponding image asset on that layer is removed from the asset folder. Of course, turning the visibility back on will create the image again.

Are you limited to only one asset per layer? No, for example, you can tell Generator to create a .jpg and a .png version of the same image on a layer tagged with the name cat (cat.jpg, cat.png). Notice that there is a comma and space between the two names that make up the layer tag.

Generator will use the default compression setting when exporting the image assets unless you tell it to do otherwise. You can customize the compression value by adding a number after the file extension such as cat.jpg10 which will tell Generator to us the high-quality compression value.

What about scale? Can you tell Generator to export the layer graphic at a custom scale? Yes, by adding a percentage value to the tag. Note that going above 100% is only for vector, text and shape layers. As always, you will lose image quality when increasing the percentage value of raster images above 100%, unless you use the new Upsampling feature in Photoshop CC. So to export the cat.jpg image at 200% we would add the percentage value to the front of the tag, such as 200% cat.jpg.

Disclosure: I was not financially compensated for this article. Adobe supplied a Creative Cloud membership for the purpose of this review. The opinions are completely my own based on my experience.

Join us in the Animation forum. | Join us in the Digital Art forum.


Digital Art and Design Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor