Extract – Convert PSD comps to code

Project Brief

Creative Cloud Extract was launched by Adobe in 2014 to help web designers convert their Photoshop comps into code. The web service allowed users to get dimensions between two elements, copy CSS from an element, download optimized assets etc. The Dreamweaver team had to integrate this service into their workflows to make users more productive in Live View as well as Code View. The challenge was to adapt a web service into a Desktop IDE with enhanced code completion, image insertion and CSS extraction capabilities.

img04

Tags

Extract, Photoshop, CSS, Styles, Dreamweaver

Summary

A panel within Dreamweaver that allows you open Photoshop files and extract all the CSS needed to build your website.

Process Overview

The process involved understanding the end-to-end customer workflows, the team dynamics and the user workspaces. Customer meetings were conducted in Italy with freelancers, design agencies and college students to get an overview of the development process. The problem areas were broadly categorized into – File Management, Layout Support, CSS Styles, Asset Extraction and Code Hinting. We had a deep dive into each category to flesh out the details even further. Striking a balance between the real estate available in Dreamweaver v/s the space needed for Extract was a challenge. We resolved this problem by making the workspaces flexible and customizable. Prerelease played an important role in providing insights and early feedback for some key features and new workflows.

Key Workflows

File Management:

A demo PSD that illustrated the key features of Extract was provided to the user to play around with. Workflows to upload new PSD files, navigate between folders, view the style summary and offline use cases were detailed.

img04

Layout Support:

The user could hover over an element to view its width and height. Clicking 2 elements would reveal the distance between them.

img04 img04 <

CSS Styles:

Selecting an element would reveal its CSS. Width and Height were unchecked by default as properties like margin, padding and position had to be considered while creating a layout. To make the CSS generated look more like real code, it was given the Classic Color theme as in Code View. Scenarios for inline styles, pasting CSS into CSS Designer and element HUD, unchecking properties already applied to the parent etc were taken care of.

img04 img04

Code Hinting:

Contextual code hints were developed where a user could select an element from a PSD and get a list of all the CSS styles applied. All the extracted CSS could directly be inserted in Code View. A preview for images and colors was also provided to help users in their workflows.

img04 img04

Asset Extraction:

Assets could be downloaded as a background-image in CSS through code hinting. It could also be inserted as an IMG tag in html through drag-drop in Live View. The user could change the extension of his file from .png to .jpg as well as specify the multiple resolutions he wants to extract his images at, and we did the necessary optimization.

img04 img04 img04 img04 img04