Photoshop Extract: Mobile Graphics Production Goes On Afterburner

of 08

What Is Extract Assets

A web page comp open in Photoshop
Create a comp in Photoshop.

The Extract Assets feature of Photoshop CC 2014 straps an afterburner on the otherwise tedious workflow of image creation for Responsive Web Design (RWD). Let’s take a look at how the Extract Assets command can quickly reduce a web page comp to assembly-ready assets in a couple of minutes.

Let's start with an obvious question: What Is Extract Assets?

In simple terms, Extract Assets is a feature in Photoshop that provides Photoshop's Generator feature with an interface to help automate the creation of imaging assets for web and screen design from your Photoshop files. The Extract Assets command allows you to define which layer or layers you want to create assets for, their physical size, file format and saved location on disk. This feature is not meant for text unless the intention is to turn the text into a bitmap, which really is not a good idea.

Let’s get started.

of 08

Open a Photoshop .psd File

The comp of the page is shown in Photoshop and the layers panel is open
We start with a web page comp prepared in Photoshop.

The example we're using contains a Smart Object from Illustrator, some text, a hero unit containing text, an image, and a button and a series of outdoors images that reinforce the theme of the site. The key here is organizing the Layers into groups. This is necessary because the task is to pull all of these items out of the comp so they can be quickly added to web layouts that adapt to varying screen resolutions and sizes. 

of 08

Two Ways to Extract Assets

The Extract Assets item is shown in a Layer menu
Extract Assets can be found in the File menu or by right-clicking a layer.

Unlike Generate, which also extracts objects through the addition of a graphic extension to the layer name, Extract Assets uses an interface that can be reached by right-clicking a layer or selecting a layer and choosing File>Extract Assets.

of 08

The Extract Assets Interface

The Extract Assets dialog box is open abd the logo layer is selected
The Extract Assets dialog box.

The Extract Assets dialog box is fairly intuitive. You are shown the layer or selection to be extracted. Above it you are shown the files size and below it is a control that allows you to zoom in and out on the object. The right side of the dialog box is where the magic happens. The four buttons at the top allow you to select the resolution/size of the object. The next strip shows you the selected layer and clicking the + sign lets you output the selected layer in another format as well. The Trash Can removes the layer from the queue. In the next strip down, you can choose the file type and you can adjust the width and height of the output image.

of 08

Extracting an .svg Image

Extracting an svg image in the Extract Assets dialog box
Extracting an svg image.

Photoshop doesn’t handle svg images all that well and browsers and devices can’t display an Illustrator image. This has resulted in the rise of svg files being used for vector artwork such as the Illustrator logo shown here. Being vectors their resolution is device independent meaning they can be scaled with no loss of detail or image. To convert the Illustrator Smart Object to svg, select svg from the pop down and click Extract.

of 08

The Extract Assets Process

The Extracted assets are placed in the Wilderness assets folder
Images are placed in a folder in the same spot as the .psd image.

 A couple of things will happen when you click Extract. You will first be warned the file name may change. This is no big issue. Then you will be told a new folder is being created to hold the asset. Once the process finishes, the folder, placed in the same location as the original .psd file, opens and shows you the new asset.

of 08

The Settings Button Is Your New Best Friend

The resolution settings for the Extracted asset are shown in the Settings dialog box
Accommodating device resolution.

Clicking Settings opens a Settings dialog box that is seriously useful. The settings on the left are the scaling factors. What they do is create the various copies of the image a developer will use in the media queries to target a specific device’s screen resolution. For example, the 3x version would be targeted to an iPhone or iPad Retina display whereas a 1.25 factor would be pointed at an Android device. The suffix is added to the end of the file name to allow your developer to easily identify the image to be used in a media query. Once you are finished, click OK and your selections will light up in the Extract Assets area in the dialog box. You can also access the setting by clicking the gear icon in the Extract Assets area over on the right side of the interface

of 08

Finishing Up

The various images and resolutions are show being placed in folders.
Multiple images with varying formats and resolutions are extracted.

 When you click Extract all of the assets will be created and added to the folder. At this point, all you need to do is to send your developer a copy of the folder and move on to your next project.