Adobe recently announced a new feature in Photoshop CC which allows real-time image asset generation straight from your PSDs. This feature is especially important for anyone who designs for screens. We would like to show you how we've been putting this feature to work in some unexpected ways.

Understanding the Basics #

photoshopMenu

"Generator allows you to create image assets in real time as you work, eliminating the tedious steps of copying, slicing and exporting each layer manually, and saving you hours of time. Simply add a file extension to the name of your layer or layer group, and Photoshop will automatically create a JPG, PNG or GIF from the contents of that layer. If you make a change to that layer, the file is immediately updated."

Check out their post to learn more

How We Use It #

mockup

When we present mockups to our customers we provide annotated PDFs to ensure clarity. In addition, we deliver actual size PNGs that can be viewed on the intended device. So, how do we ensure our PSDs, PNGs, and PDFs all reflect the most up-to-date designs? This is where Photoshop Generator comes in handy

Our Workflow #

Remember, you can use Generator to export a layer or layer group. We use the layer group function to export a full screen mockup of every screen in the app. By using a vector mask you can easily control the size of the exported image (otherwise, it will export everything in the layer group regardless of whether or not it's on the canvas).

namingScheme

Using a numbered naming scheme makes it easy to refer to specific screens when discussing designs, and also ensures the exported files display in a logical order in a Finder window.

workflow

When it comes time to create our annotated mockups we use InDesign. InDesign handles linked files exceptionally well, thus making good use of the images you just exported from Photoshop. By linking to those files (which are always up to date) you ensure your Photoshop and InDesign documents are displaying the same thing.

Now, any time you edit your Photoshop document all you have to do is update your links in InDesign to reflect the changes. This makes iteration more efficient and reduces turn around time when changes need to be delivered to clients or coworkers

Other Uses #

Even if the workflow described above differs from your own, there are many, similar workflows that can utilize this technique. If you use tools like Flinto or Invision you can use Generator to export a combination of layers and layer groups to help you quickly create your mockups.

February 5, 2014
Written By:

Courtney Starr

Courtney served as a mobile interface designer at Savvy Apps until November 2014.