Extract for Brackets – An Overview

Brackets has been around us for a while now and Adobe has been working on an extension for Brackets called Extract. Extract for Brackets is now available for preview and in this post I’m going to share my experience with this new extension.

Extract for Brackets is a creative cloud service i.e one needs to have a Adobe ID which a user can signup for free. Extract provides with a minimum clean css directly from the PSD files. It greatly improves the performance as many properties are readily available in intellisense.

To experiment with this extension, I used a free psd available online. We can download Brackets with Extract or install Extract extension separately if we already have Brackets installed. Once the extension is installed, the icon for extract appears on the right side:

Extract Icon at Bottom Right

Once the extension is installed, the icon for extract is now available under the extension manager icon. Let’s click on this icon, it asks  for Adobe ID. After login and accepting the license agreement a Creative Cloud Assets panel is shown

Creative Cloud Assets Panel

Lets drag the downloaded file to this panel

Creative Cloud Assets - Uploading PSD File

Once the file is uploaded, double clicking on the file opens the file. The PSD is shown on the left as shown below

Asset Left Side with Pointer on Sub Title

 

On the right side, all the layres are shown

Layers Panel

So we can see all the folders and we can show/hide the layers. That’s great. Let’s click on some element to see some of it’s properties

Some Properties being shown by Extract

These might not seem very helpful right. But there’s more. Lets keep this item selected and write some css code:

Font Property So after typing fo, I just Press enter and here is what I get

Font PropertiesSo it inserted the color, font size, font height, and font-family. That’s cool. Lets check some other elements. I click on the signup button

Background Color

and for border radius

Border Radius

 

Ok, that’s cool. Let’s try another element the background image for twitter feed:

Background Image

 

As you can see, there are many properties that are extracted for each single element. In this case the background is extracted. I just need to select background property, type the path and file extension and the image will be extracted for me.

This was just a very basic overview of some of the features that I’ve explored so far. I hope this will help someone searching for an intro to Extract for Brackets 🙂

 

ShareTweet about this on TwitterShare on Facebook0Share on LinkedIn3Pin on Pinterest0Share on Reddit0

3 thoughts on “Extract for Brackets – An Overview”

Leave a Reply

Your email address will not be published. Required fields are marked *