Tuesday, March 19, 2024

Inside Adobe Extract

The new Creative Cloud Extract allows you to extract important information from a PSD comp. This includes colors, fonts, CSS and assets for use in your mobile and desktop websites. In order to make this work, you´ll need the latest version of Photoshop CC which includes the Generate plug-in installed by default. This process is also included with Dreamweaver CC and Creative Cloud Assets.

 

To show you how this works, Adobe has created a file which is used as part of the learning process.

 

Here is that file. Note that with this file all the image formats are set to PNG.

 

Extracting the assets is a straightforward process. The first thing to do is to go to the Layers panel and find a folder that contains images. An example is the Branding folder and below that, the logo-lockup folder. Clicking on that reveals the logo file.

 

Right-click on it and in the popup, choose Extract Assets from the menu.

 

This brings up the Extract Assets dialog box. This shows the image and on the right side, information about the size of the image, the file name, the type of PNG file (in this case 32) and sizing options, which are: .25x, .5x, 2x, and 3x.

 

If you want to create the same asset in another format, click on the “+” sign next to the logo name.

 

This creates a new image and you can give it any of the extension names you see in the pop-up.

 

At the top of the assets panel you see four parameters boxes. You can use these to create different sizes of each asset. As an example the 2x setting will scale all assets in this list by a factor of 200. At the far right of this section is a symbol. When you click on it…

 

…it brings up the Settings dialog box. You will note the setting of 2x from the previous step. You will also notice several other settings which allow you to scale the assets up or down. At the bottom of this dialog box is the Auto Extract option which will automatically generate assets when updating the document.

 

When you are satisfied with the changes/additions you´ve made to the assets, click on the Extract button at the bottom of the Extract Assets dialog box.

 

A warning will come up stating that Photoshop will alter the document´s layer names. When you click on OK…

 

…this brings up the Browse for Folder dialog box, where you can select a folder for the image assets or create one. In this case, I named the folder Image Assets. This saved the two images created into that folder.

 

You can select another image layer or layer group and have the option of adding that to the first group of assets. In this case I chose the Social.png folder, right-clicked on it and selected Extract Assets from the pop-up menu.

 

When the Extract Assets dialog box appeared, the Social.png files were automatically added to the list of image assets from the previous step. 

One additional note: when saving the extract image files Adobe recommends creating a completely separate folder from the original.

That´s it.

 

Conclusion

I was rather surprised by the entire process since I expected it to be complicated but that wasn´t the case, at least not for Photoshop.

 

Observations

This new process is designed to simplify the creation of image assets. In the past that could be a laborious process. The introduction of the Generator plug-in simplified the process of converting image layers into files of different file types and sizes which could be easily exported. If you were using Edge Reflow, you could rebuild the Photoshop layout in Reflow and create several different layouts. On paper it was easy but not so in actual practice. I found that it was necessary to carefully build the design in Photoshop and even then, exporting to Edge Reflow didn’t replicate a perfect copy of Photoshop layout. Still, it was much better than the previous method.

 

This extract process allows you to create all the image assets quickly and there is no need to make use of the Save for Web command. Not having it makes it easy to size and change images into a new format.

 

Additional Information

To get the files you need to learn how to use Extract process, visit: https://helpx.adobe.com/creative-cloud/how-to/extract-assets-browser-workflow.html

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured