Adobe Photoshop CC

How to create and generate web graphics with Adobe Generator

Learn how to automatically create separate, perfectly cropped, optimized, and transparent graphics from your layered Photoshop files. (Try it, 35 min)

FromChris Converse

Generate web graphics automatically using a new workflow for web design.

With Adobe Photoshop CC, you can easily generate image assets from your website design comps. Additionally you can generate an Adobe Edge Reflow CC project complete with the image assets, HTML, and CSS, allowing you to create responsive website layouts easily and efficiently. In this article, you start in Photoshop CC, create image assets, and then generate an Edge Reflow CC project, which you use to create a responsive website layout.

What do I need?

Get files  Sample files for Generator project (ZIP, 65 MB)

Get files  Sample files for Edge Reflow project (ZIP, 67 MB)

Layer names are the key

With Adobe Generator, Photoshop automatically creates separate, perfectly cropped, optimized, and transparent graphics from your layered PSDs. This built-in intelligence lets you work with your design composition as you normally would, while Generator creates image assets in the background. Add .jpg to a layer name and Generator automatically saves the layer as a JPEG file (see Figure 1). Change that layer — for example, alter the color — and Photoshop instantly updates the saved JPEG file. 

Figure 1. By changing the name of a layer in a PSD file, you tell Generator to export the layer's contents as an asset.

Because Generator is an open-source JavaScript plug-in, it's even possible to customize the feature to fit your own needs.

Auto-generate image assets

To help you get a feel for Generator, I created a layered Photoshop file named design_comp.psd that represents a typical web design comp (see Figure 2). It combines photography, typography, Smart Objects, and clipping masks. Download the sample file (see Get Files link above). If you don't have the latest version of Adobe Photoshop CC installed, download the trial version.

  1. Launch Photoshop CC and open design_comp.psd. Choose File > Generate > Image Assets to activate the plug-in. The Image Assets option has a check mark next to it when it is activated.

  2. In the Layers panel (Windows > Layers), find the layer named Barrels. Double-click that layer, rename it Barrels.jpg, and press Return.

That's it. You just used Generator.

To prove it, open the folder where you saved design_comp.psd. You'll see that Photoshop created a new folder called design_comp-assets in that same location. Inside the new folder is a new file called Barrels.jpg.

To see a walk-through of my Generator workflow, watch Video 1.

Video 1. This video walks you through the various ways you can use the asset generator in Photoshop CC to output images in different sizes and resolutions for use in other projects.

Make those layer names work for you

As you can see, Generator is simple to implement. But I do have some tips to help you squeeze every bit of usefulness out of it. Feel free to try these techniques with the PSD file supplied with this tutorial:

  • Be descriptive: When you name your layers, use something more descriptive than Layer 1 and Layer 2.
  • Go beyond JPEGs: JPEG files aren't your only option. The renaming and auto-saving process also works for any layer name ending in .gif or .png.
  • Shrink down: For an asset that's smaller than the original layer, add a number, percent sign, and space before the existing layer name. For instance, naming a layer 50% barrels.jpg produces an image that's 50% smaller than the original's dimensions.
  • Pump up: Automatically producing assets that are larger than the original layer yet still maintain their original quality is trickier. In this first iteration of Generator, you can only do that on Photoshop shape and text layers.
  • Compress: To generate JPEG files at certain compression quality levels, add a number from 1 to 10 (no space) after the .jpg extension. For example, naming a layer photo.jpg8 will result in a JPEG file named photo.jpg that's compressed at a quality of 80%.
  • Use transparency: You can create a semitransparent web graphic by specifying the PNG format in the layer name. If the artwork on a layer contains any transparent areas, the resulting image will also be transparent. If you simply add .png, Generator makes its best guess at the format. Based on the type of artwork on the layer, you'll get PNG-32, PNG-24, or PNG-8. To specify a particular format, add .png32, .png24, or .png8 to the layer name. For small, simple images, and those that aren't photos, PNG-8 offers significantly smaller file sizes with little perceptible loss of quality, and can even include semitransparent pixels (something Save For Web doesn't offer).
  • Simulate transparency: GIF files also offer 1-bit transparent capabilities. The graphic contains a matte color that simulates semitransparent pixels. If the artwork on a layer contains transparent areas, naming the layer with .gif will automatically generate a transparent GIF file. In this first iteration of Generator, the feature sets a matte color of white for all transparent GIF files.
  • Group: To generate artwork from multiple layers, put them in a layer group and rename that layer group. Photoshop then composites all the layers into a single web graphic.
  • Generate layers: You can also generate all layers that are part of a clipping mask by renaming the target layer.
  • One to many: Create multiple sets of graphic form a single layer by specifying multiple file names. Separate your desired graphic files with commas, or plus “+” signs, in the layer name. Perform transformations, or create multiple file types from the same layer.
  • Get organized: Specify sub-folders in the layer names to separate web images into organized groups. Simply add your desired folder name, such as “mobile,” followed by a forward slash “/“ character. Generator will create a directory named mobile, in the assets directory, and place your new web graphic inside.
  • Clean up: To remove an asset from the automatically generated folder, just remove the .jpg, .png, or .gif extension from the corresponding layer name.
  • Yield total control with Defaults: While it is handy to transform and organize graphic individually, specifying defaults can quickly multiple your efforts. Creating a layer named “default” followed by a folder name, or a transformation, will result in all file-named layers to undergo those settings; in addition to the ones set on the individual layers. So for example, specifying “default 50% mobile/“ will transform all file-named layers to half-size, and put all of them in a folder named mobile. Use this feature to generate entire sets of graphics.

Generate Edge Reflow documents

While generating web-optimized imagery is a big part of my process to prepare a website for development, there's still a lot for me to do once this is over. Since I spent so much time mocking up styles and layouts in Photoshop, I wanted to reduce the steps required to create responsive assets and the beginnings of an actual website design.

This happens to be another thing Photoshop Generator can do: It can translate Photoshop layouts into Edge Reflow CC projects. In addition to creating my image-based assets, Generator converts text layers to HTML, groups items and regions into divs, creates the necessary CSS, and packages these items into an Edge Reflow project that's ready to edit.

Edge Reflow CC is a fully visual web design tool for laying out responsive web pages. At the center of the Edge Reflow interface is a window-resizing handle you can use to resize the document window and redesign your layout based on varying screen sizes.

Note: To make the Generate Reflow Project plug-in available to Photoshop CC, make sure you get the latest Photoshop CC update from Creative Cloud and install the most current copy of Edge Reflow CC. You may need to close Photoshop CC and reopen it after installing Edge Reflow CC in order for the File > Generate > Reflow Project menu item to appear in Photoshop.

Handle Photoshop comps in Edge Reflow

Once you have generated an Edge Reflow project from Photoshop, you can work with the assets to design the layouts for the various media query sizes required for your project (see Figure 3). Be sure to take steps to structure your Edge Reflow assets properly to ensure that the remaining steps to design your responsive site go as smoothly as possible. 

Figure 3. By structuring your Photoshop comp properly in Edge Reflow, you can design the layout for each of the media query sizes of your responsive design more easily.

Create a responsive layout with generated assets

To help you get a feel for making responsive layouts from generated Photoshop assets, I created a layered Photoshop file named responsive_comp.psd that contains assets to help you get started with an Edge Reflow project (see Figure 4). To follow along, download the sample file (see Get Files link above).

Figure 4. To get started, use this sample PSD file to create a responsive design from Photoshop assets.
  1. Open Photoshop CC and then open responsive_comp.psd. Choose File > Generate > Generate Reflow Project. This generates the Edge Reflow project and image assets in the same folder where you saved your PSD file.
  2. Start Edge Reflow CC and open responsive_comp.rflw.
  3. Use Edge Reflow CC to structure your assets and define the layouts for the various media query sizes for your site.

To see a walk-through of a process for using assets generated from Photoshop CC in Edge Reflow CC, watch Video 2. 

Video 2. This video shows you how to create a web layout that responds to screen sizes ranging from 320 pixels to over 1,000 pixels across.

Refine the responsive layout design

Once you create an Edge Reflow project from Photoshop CC, there are still some items you want to address to finish your responsive design. Feel free to try these techniques with the PSD supplied with this tutorial:

  • Size matters: Generate the different sizes of images needed for the various media query sizes of your responsive layout. Determine which elements should be a fixed size or a size relative to its container.
  • Find fonts: Match missing fonts with Edge Web Fonts, which are available directly within Edge Reflow CC.
  • Preview often: Use the Elements panel to review the overall structure of your responsive web design. Use the resize handle to preview different media query sizes and determine the type of setup work required to structure your assets for the various layouts.
  • Fine-tune: Adjust the positioning of each of the elements appropriately for the various media query sizes.
  • Use accurate colors: Refer back to Photoshop CC to easily get the HEX values for the various colors in your design.
  • Go mobile: Use breakpoints to define the sizes of the layout for different output devices that will be used to view your site.

Where to go from here

To find out more, read Introducing Adobe Generator for Photoshop CC by Photoshop product manager Stephen Nielson. It's a great resource.

On the other hand, if you know JavaScript and want to tweak the Photoshop Generator plug-in for your own workflows, there's plenty of help available. You'll find the source code of Generator on GitHub. For customization tutorials, read Script your first Adobe Generator plug-in for Photoshop by Tom Krcha and watch Introduction to Photoshop Generator by Lee Brimelow.

Some people are already using their customized plug-ins; for an example, see Writing Generator plug-ins: Making Photoshop Yours by Tim Riot.

Watch this video to get a basic overview of Adobe Edge Reflow and learn how web professionals are using it to create responsive web designs.

Finally, learn more from the Edge Reflow team about how you can create multipage comps in Edge Reflow CC.

 

Let us know what you think

That's it! You're done. Please provide feedback in our survey so that we can make sure this tutorial is as useful as possible.

 

chris-converse_83x83

Chris Converse

Chris is a designer and developer at Codify Design Studio, where his design execution spans a variety of media. Chris is also a featured speaker at Adobe MAX and HOW Design conferences, as well as an author on lynda.com and udemy.com.


Purchase by phone: 800-585-0774