Accelerated web design workflows with Adobe Photoshop CC

Chris Converse

When the Adobe Photoshop team comes out with a new version of the application, I expect features to fix my photos and maybe filters to create inspiring effects. But the September 2013 Photoshop CC release brought a major advance I didn't expect: a new workflow for web design.

The way I create graphics for web and interactive projects hasn't changed much since Photoshop CS3: A combination of Smart Objects, clipping masks, and the Slice tool has worked well for almost a decade. Now that method feels as outdated as cutting a Rubylith for a color separation, all because of new Adobe Generator technology.

With the latest release of Adobe Photoshop CC, I can create a comp for my website design like I have always done before. But now, from this comp, I can generate an Adobe Edge Reflow CC project complete with the image assets, HTML, and CSS, which allows me to finish creating my responsive website layout more easily and efficiently. In this article, I demonstrate my workflow by starting in Photoshop CC and generating an Edge Reflow CC project where I can finish creating a responsive website layout.

Why is Adobe Generator a big deal?

With Generator enabled, Photoshop can automatically create 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 does the boring stuff. Add .jpg to a layer name and Generator will save 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. Because Generator is an open-source JavaScript plug-in, it's even possible to customize the feature to fit your own needs.

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.

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 design_comp.psd.zip (66 MB) to follow along in the sample file, design_comp.psd. If you don't have the latest version of Adobe Photoshop CC installed, download the trial version.

Figure 2. Use the layered PSD sample file to follow the steps and see how Generator works.

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.

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 setting 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.

Clean up: To remove an asset from the automatically generated folder, just remove the .jpg, .png, or .gif extension from the corresponding layer name.

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 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). Download responsive_comp.psd.zip (65 MB) to follow along in the sample file, responsive_comp.psd.

Figure 4. To get started, use this sample PSD file to create a responsive design from Photoshop assets.

Fire up Photoshop CC and 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.

Start Edge Reflow CC and open responsive_comp.rflw.

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 my process for using assets generated from Photoshop CC in Edge Reflow CC, watch 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.

Video 2. This video walks you through the process of creating a responsive site design in Edge Reflow CC based on the assets generated from Photoshop CC.

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.

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.

Chris Converse 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.