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.
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.
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.
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:
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.
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.
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.
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.
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:
To find out more, read Introducing Adobe Generator for Photoshop CC by Photoshop product manager Stephen Nielson. It's a great resource.
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.