Creative Cloud Extract

Search
Adobe Creative Cloud User Guide
Applies to: Adobe Creative Cloud

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Note:

The web-based Extract feature will be retired in March 2019. However, the Extract feature within the Photoshop and Dreamweaver desktop applications will remain available even after March 2019. For more information, see Creative Cloud Assets: Retiring Web-based Extract.

extract_logo

Use Creative Cloud Extract to make the Photoshop design to code workflow easier. Extract simplifies the process for both web designers and web developers, and greatly improves the efficiency in transforming a web design to workable code.


Photoshop compositions are a widely used method for sharing design specifications to web developers, who then need to convert the design intent into HTML and CSS. In a typical workflow, designers create Photoshop comps for a web or mobile design. Production designers then prepare the PSD file for developers, where they slice assets and create redline specs. Web developers are tasked with taking those design elements and assets and turn them into code.

Extract reinvents this workflow, enabling web designers to export optimized assets in record time in Photoshop, and share their PSDs with developers as they code in Dreamweaver.

Extract workflow

Extract is available to you at various places in the PSD design to code workflow.

  • Designers can work in the familiar environment of Photoshop to define and export image assets from layers or layer groups.
  • Web designers and developers can use Extract from within Dreamweaver, a complete self-contained solution that offers contextual code hinting, assets extraction, and more directly within the coding environment.
Adobe_Photoshop_CC_mnemonic_RGB_128px_no_shadow

Export assets in Photoshop

Designers who create Photoshop comps can quickly define and package image assets from individual layers or layer groups, using a simple, visual interface. This dramatically speeds up production time so designers can spend more time designing.  


Adobe_Dreamweaver_CC_mnemonic_RGB_64px

Extract in Dreamweaver

Web designers and developers can now view PSDs in Dreamweaver and use contextual code hinting to easily define fonts, colors, and gradients in their CSS. They can also drag and drop optimized images into the Live View surface, copy text, and more.