Photoshop Extract: Mobile Graphics Production Goes On Afterburner

of 08

What Is Extract Assets

The web page is open in Photoshop.
Create a comp in Photoshop.

 In a previous article I explained a relatively easy way to prepare images for a Responsive Web Design (RWD) workflow. The new Extract  Assets feature of Photoshop CC 2014 straps an afterburner on the otherwise tedious workflow of  image creation for 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 new 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 I am 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 rather intuitive. You are shown the layer or selection to be extracted. Above it you are shown the files size and below it is 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 plavced 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 the Extract button. 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 the Settings button 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 the OK button 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 the Extract button 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.