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:
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
Lets drag the downloaded file to this panel
Once the file is uploaded, double clicking on the file opens the file. The PSD is shown on the left as shown below
On the right side, all the layres are shown
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
These might not seem very helpful right. But there’s more. Lets keep this item selected and write some css code:
and for border radius
Ok, that’s cool. Let’s try another element the background image for twitter feed:
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 🙂