With the release of the Creative Cloud Extract, Adobe has made it easier to go from Adobe Photoshop CC design to code. In the past, this workflow often included a tedious process of creating a specification, style guide or red lines for a design so that a developer could more easily translate it into code. Extract provides solutions for getting the style information out of a design in just a few clicks. This information includes positioning of elements, sizes, colors, fonts and gradients. We have also streamlined the process of exporting assets out of Photoshop CC.
What’s new for designers and developers:
Extract Assets in Photoshop CC
With the October update of Photoshop CC comes a new feature called “Extract Assets” that allows designers to quickly extract image assets from layers for multiple screens. You might be familiar with using slices to get images out from Photoshop CC, or repetitively having to “Save for Web” for each image you need. With Extract, you can manage all assets for web and mobile designs, in one dialog. It will save you so much time: Just select all the layers you want to export and choose the “Extract Assets” menu item.
From the Extract Assets dialog where you specify formats to output (PNG, JPG, GIF or SVG), you can also view a preview of the image to be created, setup 1x, 2x or more versions of all image assets, and add or remove layers from which to extract assets. For more information on Extract Assets in Photoshop, visit this CC Learn tutorial.
Extract in Creative Cloud Assets
If you store PSDs in Creative Cloud, you get access to so much more useful web information. The Extract view of your PSD in Creative Cloud gives you access to the following information:
- The layer hierarchy along with the ability to toggle layers on and off
- CSS styles for layers
- A style guide of colors and fonts used in the design
- Position and size of elements in the design
- The ability to extract assets to PNG, JPG or SVG
From Creative Cloud Assets, this PSD can also be shared with anyone. Using the public URL, the recipient can use Extract in Creative Cloud Assets in their browser to get all of the same useful information to translate this design into code.
Extract in Dreamweaver
You can now browse and view your Photoshop CC documents stored in Creative Cloud directly within Adobe Dreamweaver CC, letting you rapidly take your designs to code. Yes, that’s right, you can open a fully-layered PSD in Dreamweaver CC. When a PSD is loaded, you can extract CSS, colors, gradients, fonts, measurements and web-optimized images from your Photoshop layers when building your web projects. This will let you preserve the integrity of the design when bringing it to code, and takes the guesswork out of how that PSD will translate to web.
When a PSD is loaded in Dreamweaver CC, you can fully inspect the CSS pulled from Photoshop CC layers. When you select a layer, you’ll see all the CSS associated with that selection. This is useful for grabbing colors, gradients, border-radius, font styles and more when building the front-end of your website—it’s kind of like Web Inspector for a PSD.
You can also code hint directly into a PSD for full control as you write styles. When writing CSS, contextual code hints are pulled right from your Photoshop CC layers, expediting the time it takes to go from comp to code. For more information on Extract in Dreamweaver CC, visit this CC Learn article.