Video icon 64
Want to be a web designer? Skill up fast with video courses from Tuts+. Start your free trial.
Advertisement

Adobe Extract: Free Code Extraction From PSD Files in the Cloud

by

Back in June this year we walked through some of the super useful features of Adobe's Project Parfait. Project Parfait was a free web-based tool, purpose built to streamline the PSD code extraction process for teams using Photoshop as a major element in their workflow.

Now Adobe have taken the tool to its next incarnation, whereby it has been integrated directly into their free cloud file storage and sharing service Creative Cloud Files (CC Files), and fittingly renamed to Extract.

Extract retains all the existing functionality of Project Parfait, however the integration with CC Files along with new sharing capabilities aims to make collaboration on PSDs between designers and developers much quicker and easier.

Let's take a look at how the Extract workflow runs.

Uploading or Syncing Files

Using Extract starts with uploading or syncing a PSD to your CC Files space, which comprises a minimum of 2GB storage and comes along with any CC membership. You can upload files directly via the web interface, or you can use the CC desktop app to automatically sync files from your computer.

Generally speaking, you'll find the smoothest way to proceed is by using the desktop app via the following steps.

First, download and install the desktop app and sign in with your Creative Cloud credentials. Then, on the app’s interface, select the Assets tab and below that the Files tab. You should see the following:

Go ahead and click the Open Folder button and you'll be taken straight to a dedicated Creative Cloud Files folder on your computer. From there, all you have to do is copy a PSD into that drive and it will automatically sync to your online CC Files space.

When the upload is complete you'll see a green tick image over the top of the file thumbnail like so:

If you now head back to your CC Files web interface you should see the thumbnail for your newly uploaded PSD, ready to be opened in Extract:

Using Extract

With your PSD uploaded to CC Files, to do to open it in Extract click the thumbnail, then click the tab labelled Extract (currently labeled Preview). You’ll immediately see your design in the interface, ready for code extraction:

The processes for getting code out of Extract are still the same as they were in Project Parfait, which you can read all about in our earlier article. However, there are also some new features that have since been added into the mix.

New Features

Some of the new features available have been added into Project Parfait since our last article and will be carried over into Extract, while others will come about due to the integration with CC Files.

Alpha Values on CSS3 Shadows

Previously the CSS generated for shadows incorporated flat color hexcodes. RGBA color codes with accurate transparency are now produced instead.

Preferred Font Unit and Base Font Size Settings

You no longer have to work exclusively with pixel values in the CSS generated for text. The option to have font values generated in em or rem values is now available.

Along with this comes the option to set the base font size for the page, the setting from which your em and rem values will be calculated.

Preprocessors & Mixins

You can also now choose to have SCSS with Bourbon mixins or LESS with LESSHat mixins generated instead of just raw CSS. This will be a huge boon for lovers of either of these preprocessor languages.

I hope the future will see code for Stylus integrated (I’m a huge fan), as well as Nib or Kouto Swiss mixins. That will really round off the preprocessor options. 

Actions

As part of the new integration with CC Files you'll now have access to an Actions menu, providing you with quick shortcuts to download, rename, archive or replace the PSD.

Sharing Options

Also newly present thanks to the CC Files integration is a Share menu, allowing you to send work straight to your Behance portfolio. 

The most pertinent feature under this Share menu however is the Send Link option. With this function you can send a URL straight to a developer, who will then be able to directly open the PSD inside Extract.

The developer won't even have to be signed in to Creative Cloud in order to access Extract. This means team members who are focused on code will no longer need to maintain a Photoshop installation or any design oriented services at all in order to handle their part of the site creation process.

Timeline

Extract is freely available as of today. Project Parfait will remain available through until October, giving everyone currently using it plenty of time to make the transition over to Extract.

You don’t need to be a paid subscriber in order to use Extract, so if you're on a pre-CC version of Photoshop you can still send your designs off for coding all the same. Likewise, the person receiving the links to access your designs in Extract won't need to be a paid CC subscriber, nor will they need to be a CC user at all in order to utilize the tool.

Go and check out Adobe Extract - let us know what you think!

Advertisement