Photoshop may have been created as a tool for working with photos, but it has become the first, and sometimes only, option for designers from every industry. While web designers struggle with whether or not Photoshop is the right tool for the job (apps like Sketch and Pixelmator are worthy challengers), Adobe and others are constantly working on ways to make Photoshop a better fit for a web design workflow.
Today, we’re going to look at two new ways to turn a Photoshop web design comp into code that can be implemented in a live website. They’re not wholesale, one-click solutions, but rather a new way to explore a PSD comp one element at a time for the information that developers need to translate it into a web design.
Creative Cloud Extract
If you have a Creative Cloud account, then this option is free for you. To begin, drag a PSD into your Creative Cloud Files dashboard. I’ll be using the beautiful FreshForest – OnePage PSD Template throughout this tutorial.
Once your PSD is uploaded (it’ll take a while depending on your file size), you can simply click on it to be taken into Extract (formerly Project Parfait).
When you open a PSD, you’ll have to wait a minute for “processing,” but then you should see something like the screen below.
The idea here is dead simple: the main column shows an interactive preview of your PSD and the column on the right is a context-sensitive suite of tools that helps you extract information from items within your design.
Exploring a PSD
When you click on any item within your PSD, you’ll see some nice, quick code tips pop up.
Here we can see the width, height, and position of the item, as well as some options for grabbing some CSS. In conjunction with this, crammed over on the side of the screen with far too little padding are some tools for deeper interaction with the selected element.
As you can see, the code is generated live, as you select things, ready to copy and paste right into your CSS file. There are lots of great features here to explore, including automatic color palette generation, and Typekit integration.
Layers and Assets
If you want more control over just what it is that you’re selecting, you can dive right into the file’s layers. The entire structure from the original PSD is maintained, folders and all.
One of the absolute best features here is the ability to select and extract image files, instantly saving them in any format or quality that you like. Many web designers know that extracting image assets from a PSD comp can be time consuming and this presents a really slick workflow.
As you choose to “extract” assets, they’ll show up in the “Assets” sidebar panel for you to download.
The Verdict
Overall, Creative Cloud’s Extract feature does what it says on the tin. Though many (all?) of these features can be performed right inside of Photoshop, it’s kind of nice to remove all of the distractions of Photoshop’s huge feature set and focus in on just what you need for converting a comp. This is especially useful for developers who would prefer to leave Photoshop for the designers.
Avocode
Creative Cloud’s Extract feature is pretty slick, but I confess that I was even more interested in the competition. The folks at Source set up a gorgeous website to show off their new, soon to be released product, Avocode.
I personally love Source’s Photoshop plugins. CSS Hat is much more robust than Photoshop’s built in PSD to CSS toolset and I wanted to see if I would similarly favor Avocode over Creative Cloud Extract. As soon as I saw Avocode, I shot the guys at Source an email and they were kind enough to let me in on the Beta.
Getting a PSD Into Avocode
The method for getting a PSD into Avocode is pretty simple, you simply hit the “Sync to Avocode” button in the Photoshop extension that comes with the application. This goes through a process of uploading your file, just like we saw with Creative Cloud Extract. Avocode gives you more information about where you are in the process though so it feels snappier and, at the very least, has a slightly better user experience on this point.
As I mentioned above, it seems that an app like this would draw the attention of those who don’t even want to own Photoshop, but are still forced to code up PSDs. The fact that you currently still have to use Photoshop may seem like a deal breaker. Fortunately, Avocode will soon be adding a whole host of alternatives for getting a PSD into the application, from direct upload to Dropbox sync (these features are shown, but not enabled in my beta copy).
Exploring a PSD with Avocode
I spent a ton of time exploring Creative Cloud’s Extract app. It’s nice, but it doesn’t feel premium. That concept is difficult to describe, but you’ll understand as soon as you open a PSD in Avocode.
The much larger default preview combined with the dark (and honestly Photoshop-like) interface makes Avocode look and feel really slick when compared to CC Extract.
Look and feel aside, the core feature sets of the two apps are nearly identical. When you select an item in your PSD, the sidebar shows the CSS for that app. As a bonus, Avocode also gives you the option to copy LESS code as well (I’d love to see Sass support in the future). I’ll confess that I did miss CC Extract’s little popup window and quick styles on the item that’s selected, but otherwise the experience was very similar.
Just as with CC Extract, you have full access to the layers and groups of your PSD. The layout of Avocode separates this feature out into a first class citizen on the left side of the screen, which felt better than burying it under a tab.
You can also see the basic toolset in this screenshot for selecting, measuring, grabbing colors, and moving the canvas.
Color and Images
Just as with CC Extract, you can easily build a color palette with the eyedropper. That being said, Extract did its best to build your color set automatically, something I’d like to see in Avocode as well.
The image exporting options in Avocode are really nice. You can set up different rules that allow you to export all your images in any number of configurations (CC Extract was similar, but not as powerful). I can easily see this feature alone saving you hours when converting a really complex PSD to a live site.
The Verdict
Overall, I thoroughly enjoyed using Avocode. True to Source form, it’s a great looking utility that surprises you with the depth and thoughtfulness of the toolset. It feels less like a software company doing research to figure out how to please web designers and more like real web designers solving problems that they face every day.
Which App is Better? Let’s Compare.
I hate it when comparison reviews cop out and tell you that both options are good enough, so let’s review and pick a winner.
Cost
Update:
Previously, this section compared the cost of Creative Cloud to Avocode’s $69 per year price tag. It turns out that this was a mistake on my part. Extract is 100% free for all users, clearly making it the winner in this category!
Interface
If you’ve already read my comments above, then you know how this one is going to go. The Avocode Mac app destroys the CC Extract web app in terms of aesthetics and usability. Even with similar feature sets, CC Extract feels like a nifty tool while Avocode feels like a powerful and professional application.
Features
This one is tricky because the feature sets are so similar. That being said, each has a bragging point or two. The automatic color scheme grabbing nature of CC Extract is useful, and the ability to copy styles quickly without digging through a sidebar is one of my favorite unique features.
For Avocode though, the wins are more powerful. Multiple options (soon) for importing PSDs, the ability to generate LESS in addition to CSS, the ability to use the app outside a browser, and the powerful rule-based image exporting features really set it far ahead.
Update: I was informed that Extract has CSS Preprocessor support too, something I did not notice in my review! It looks to be even more robust than Avocode’s with support for both LESS and Sass.
Conclusion
Both apps promise the same thing and deliver the same thing: the ability to simplify the mockup-to-website workflow by pulling the analysis phase out of Photoshop and into something that’s more targeted toward a development workflow. Whether you choose Avocode or CC Extract, you’ll be able to complete this task easily enough.
That being said, I declare Avocode the winner of the brawl. The experience feels faster, smoother, and more powerful with Avocode than CC Extract. If you’re tired of your current workflow and really want something that’ll give you a boost, I recommend starting there. If you’re looking for a free tool though, or merely exploring whether or not this type of app can be useful for you, CC Extract is the way to go.
Download these worksheets and start practicing with simple instructions and tracing exercises.
Download now!
Making beautiful design simple & accessible to all.
View More Posts
7 Comments