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.
Creative Cloud Extract
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.
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 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.
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.
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.