Introducing Avocode — PSD to Code Without Photoshop – Blancer.com Tutorials and projects

Photoshop has been a part of web design for years, and it’s very likely to continue as such for a long time. If you design for the web using Photoshop, or you’re a developer who handles coding up PSDs, it’s likely there are a few issues you run into on a regular basis.

Even if you’ve transitioned from Photoshop over to Sketch for the design stage of your workflow, you’ll still face the issue of coders needing access to software they otherwise wouldn’t use. With either of the two programs, it’s likely you’ll hit speed bumps that are just par for the course when using tools whose primary purpose is design, not generating code for the web.

Made by Source

The guys at Source have been producing extensions for Photoshop since 2012. Their plugins are designed to ease some of the most common issues in the design to code process, such as creating CSS that accurately represents a design, and exporting images efficiently.

I’ve been a long time fan of their CSSHat plugin, which generates CSS or preprocessor code from Photoshop layers. I also use their PNGHat plugin almost every time I use Photoshop, for exporting images to PNG, JPEG or Base64. You can see both of these plugins in action in my two part tutorial:

These plugins are focused on the developer stage of the site creation process; turning PSDs into fully functional websites. Given many developers don’t even need Photoshop for any other purpose than accessing PSDs, it’s a natural next step to see this type of workflow enhancement taken right out of Photoshop all together.

That’s what Source’s new desktop and web based tool, Avocode, is all about.

Avocode is a program which is purpose built for the process of going from PSD (or Sketch) to code. It doesn’t automatically generate sites for you, rather it gives you a set of tools which enable you to create sites in the way you personally prefer, but more efficiently than when working directly inside Photoshop or Sketch. Avocode aims to bridge the gap between the design and coding stages of web development.

Comin’ up

In this article we’ll look at how you can use Avocode to:

Open up PSDs for coding without Photoshop, and without emailing or uploading files.
Select layers, groups and move around in a design.
Generate CSS or preprocessor code for elements in your design.
Get accurate dimension measurements with which to build your layout.
Copy out text content for easy placement in code.
Extract color palettes and hexcodes from PSDs.
Export images, even from multiple layers, without having to deal with the slicing process.

Open PSDs Without Photoshop

With Avocode, PSDs are shared between designers and developers via an automated syncing process. If you’re a designer you’ll install a Photoshop plugin and, when your design is ready, you’ll just hit a “Sync now” button to make your PSD available to the developer.

Additional ways to sync are on the way, with Dropbox as a confirmed option coming in a future release. Judging by the current beta 0.5.0 interface we might also see syncing via Layervault, direct upload and pulling files straight in from local storage.

If you’re a developer you’ll receive a notification through Avocode that a new design is available, at which point you can just open it up directly via a single click in the PSD browsing panel. This does away with the need for emailing mega-attachments or otherwise manually transferring PSD files.

Along with each design comes an in-built version management system. Progressive iterations of a PSD can easily be synced between designer and developer, again by hitting the Photoshop plugin Sync now button, with each version accessible through the PSD browsing panel. Avocode remembers the previous export settings of the images in the design, meaning tasks such as exporting newly updated images can be automated.

Selecting and Navigating

Once you have a PSD open in Avocode you’ll find interacting with it to be quite intuitive. Like Photoshop, Avocode has a Layers Panel where you can see all the PSD’s layers and groups. These layers and groups can all be shown or hidden, and you can also click to select any of them.

As well as selecting elements of the design via the Layers Panel, you can choose the Select Tool from the tools panel on the left, then click any item on the stage directly. To select multiple items, just hold down SHIFT and continue clicking the items you wish to select.

Multi select works whether clicking directly on the stage or in the Layers Panel.

To pan around the design choose the Hand Tool then click and drag to move.

Generate CSS and Preprocessor Code

With any layer selected and the Inspection Panel open you’ll see the CSS for that item output in the panel’s Code subsection, in either raw or preprocessor form depending on your preference. This uses the same CSS generation logic as the CSSHat plugin, which is still the most visually accurate CSS generator I’ve seen among the currently available options.

Grabbing the CSS for the item is as easy as clicking the Copy CSS or Copy LESS button, so you can paste into your stylesheet or directly highlight the lines you want to use and copy them from there. If you’re having preprocessor code generated, it will automatically include mixins from your preferred mixin library. The presently available options are:

LESS + LESSHat
Sass + Compass
SCSS + Compass
Sass + Bourbon
SCSS + Bourbon
Stylus + Nib

Get Accurate Layout Measurements

I’m sure I’m not alone when I say that finding the layout dimensions inside Photoshop can be a bit arduous. Avocode’s approach to this problem is very straight forward. To get the height and width of an item:

1. Choose the Select Tool and select any item, or multiple items.

2. Read the values at the bottom left corner of the blue selection highlight box.

3. Or, read the values to the right of the preview thumb at the top of the Inspection Panel.

To find the horizontal and vertical distance in pixels between any two items:

1. Choose the Measure Tool and select any item.

2. Hover over any other item and read the values next to the horizontal and vertical red lines.

Copy Out Text Content

If you have a text layer selected you’ll see a clipped preview of the content in the Inspection Panel, as well as its width and height, and a quick Copy text button you can use to grab the text therein for pasting into your code.

Generate a Color Palette

1. Choose the Color Picker Tool and move your mouse around the stage, watching the color preview until you have the color you want.

2. Click in that location and your color will be added to the Colors subsection in the Inspection Panel, with the hexcodes displayed for each.

Export Images

1. Choose the Select Tool and select any item, or multiple items.

2. In the Inspection Panel under the panel’s Export subsection click the little file icon with the blue plus sign on it to set your selection as an asset.

3. The name of your asset will be drawn from the layer name. Choose PNG, JPEG or SVG export, then click “Export now”. If it’s the first asset export of the project you’ll be able to choose a destination folder, otherwise the file will be exported straight away.

After you have set your selection as an asset it will also appear in the assets panel. From here you can click the magnifying glass icon to be taken to the folder storing your asset exports.

You can also click the “Get Code” button at the top of the panel, or the <> icon to the right of your asset’s name, to generate HTML, CSS or LESS you can use to place the asset in code.

In the PNGHat plugin for Photoshop there is also control over the exact JPEG and PNG export settings as well as scaling options, so I imagine we’ll see these same controls ported over to Avocode soon.

To get an idea of what to anticipate in Avocode’s image exporting processes read more about PNGHat here: How to Export Photoshop Assets For the Web With PNGHat

Extra Features In Development

Right now Avocode is in private beta so there are still several very interesting looking features due to come out in the near future. The app is scheduled to move into public beta at some point this summer, after which we’ll see the official launch.

As the development moves along, here are some of the things we can anticipate:

Full Multi-Platform and Web Based Support

Whatever OS you work with, or even if you’re on a mobile device, you’ll be able to use Avocode. At the moment the closed beta version of Avocode is being put through its paces on Mac, but the full release of the native app will also run on Windows and Linux, and the web version will run in any modern browser.

Use With Sketch Based Designs

Source report they already have a working prototype to deliver all the same functionality for Sketch based designs. So if you’re a designer using Sketch on Mac, a designer using Photoshop on Windows, a developer writing code on Linux, or if you’re using any other combination you’ll be equally ready to go.

Atom Code Editor Inside Avocode

Avocode is actually built on top of the Atom Code Editor produced by GitHub. What’s really exciting about this is it means there will be a fully fledged, robust and feature rich code editor available right inside Avocode upon its public release. Being able to handle the entire coding process right inside a single app really caps off what is already shaping up as a powerful feature set.

Color Variables

As well as being able to grab the hexcodes for the colors added to your palette, you’ll also be able to assign variable names to each color for use in your preprocessor code.

In Built FTP and CDN Upload

As with many of the other functions on the way for Avocode, the ability to upload directly to CDN is already present in one of Source’s plugins, PNGHat, so we can guess that the functionality will be much the same. Images can be exported locally through Avocode, or alternatively you’ll be able to push them directly to a CDN and have the file location added to your CSS output. You’ll also have the option to FTP the images directly to your server on export.

Connect With TypeKit and Google Fonts

The introductory videos for Avocode mention there will be an option to integrate with TypeKit and Google Fonts when generating your font settings code. This isn’t yet in the closed beta or any of Source’s plugins so I’m not sure exactly how this will work, but I’m personally hoping it will streamline the process of putting together the appropriate URLs and code with which to call in various fonts.

Base64 and Sprite Sheet Export

The first stage of image export in the current closed beta version of Avocode is for JPEG, PNG and SVG. However Source already has a process established for Base64 generation through their PNGHat plugin for Photoshop, so I expect we’ll see them drawing from that code base to bring it into Avocode. They also intend to support production of sprite sheets along with the required CSS.

Export Code for iOS

The focus of Avocode will be the web until it has reached full maturity, however there are also plans in the works to enable it to be used as part of iOS development.

Source already have a plugin called iOSHat that works within Photoshop to generate Objective-C or Swift code from Photoshop layers for use in iOS development. It’s likely the support for iOS code export within Avocode will work in much the same way.

Packages for Custom Extensions

There is an intriguing menu item in Avocode; one which hints at the future extensibility of the platform, with some initial packages already in place:

Source say they were inspired by the release of Atom to adopt a similar method of allowing custom “Packages” to be created and shared among the community. We can look forward to seeing this pathway open up as development moves along.

Preorder to Lock In a 70% Discount

At the moment Source are steadily rolling out features and working in beta user feedback as they go along. When the software is publicly released it will be available via a subscription model for $240 per year.

However, if you get in early on the preorder you’ll lock in a spot with a 70% perpetual discount, bringing it down to $69 per year instead. You’ll also get access to the private beta, and during this period you’ll be able to use the software free of charge. Your actual subscription only begins when Avocode goes to public launch.

Preorder spots are limited, and as of this moment there are fewer than 230 places available. To preorder: http://avocode.com/preorder.html

Useful Links

For extra information visit:

Conclusion

I’ll leave the drawing of conclusions entirely up to you! What do you think, are you surprised by any of the features Source have announced? Will Avocode form a part of your future workflow? Let us know in the comments!

{excerpt}
Read More