Photoshop CC: The Missing Manual, 2nd Edition

Exporting Web Graphics with Generator

Once you finish designing the imagery you’ll use on a website, you need to export those graphics from Photoshop so you can use them in the web-design program of your choice. Photoshop makes this export chore a lot easier with Generator, a fairly new feature that lets you generate (hence the name) graphics in a variety of web-friendly formats—JPEG, PNG, and GIF—and even control the images’ size and quality. And, new in Photoshop CC 2014, you even get to specify which folder Generator exports the files to. This is a huge timesaver for folks designing graphics for websites, especially sites for multiple devices—computers, smartphones, tablets, and so on—as each device may use different image sizes and file formats.

Note

If you’re creating a website with Adobe Muse, you can access individual layers in Photoshop documents from inside Muse. That means there’s no need to export your Photoshop imagery for use in that particular web editor. Slick!

First, you need to turn on Generator: Choose Photoshop→Preferences→Plug-Ins (Edit→Preferences→Plug-Ins on a PC) and turn on Enable Generator. After that, here’s the basic process you use: Design your graphics, and then turn on Generator for your document by choosing File→Generate→Image Assets (when you choose this command, a checkmark appears next the command’s name). Next, in the Layers panel, rename each layer that you want to export with the desired file name and file extension (.jpg, .png. or .gif), as shown ...