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.
Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.
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.
Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 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.
