Andy Taylor

Andy Taylor

Adobe Generator Suggestions

A couple of days ago, Adobe updated Photoshop CC to include a new feature called Adobe Generator. For anyone familiar with MacRabbit’s Slicy, it’s essentially a ‘native’ implementation. It uses Photoshop layer names to export individual assets for use in websites, apps etc. For example, a layer name of icon.png, 200% icon@2x.png would export both 1x and 2x assets. The genius here is that it’s automatic. An assets folder updates on editing or renaming layers; you don’t even need to save.

If you aren’t across everything Generator can do, I suggest checking out the introductory blog post. It’s a great first release. I do, however, have a few suggestions that might make it more useful:

Layer Naming Sucks

The anally retentive among us name our layers descriptively. Using layer names to describe how you wish assets to be output is messy and hard to read.

This feels like a hangover from MacRabbit’s implementation. Slicy had to use layer names. Adobe doesn’t. I think a better implementation would look a lot more like Layer Styles; metadata on the layer, rather than the layer name.

When you’re not restrained by the layer name, a better and more feature rich implementation would fall out. Like setting an export path, copyable settings and reusable defaults. But most importantly, it would mean that no one would need to remember a syntax like 24x24 icon.png24, 48x48 200% icon@2x.png24.

Canvas Size Options

While exporting assets cropped as tightly as possible is handy, I far more often find myself in the situation where I have multiple transparent assets that all need the same canvas size. Take a set of icons as an example: In a 20x20px canvas you might have 19x20, 16x18 and 19x19 pixel icons. These are arbitrary examples, but you often need to use visual—rather than mathematical—alignment. And as these icons are a set, they’re much easier to work with when they are the same size.

You can specify pixel dimensions, but doing so stretches the asset, rather than expanding the canvas size. Therefore, 20x20 icon.png will stretch a 16x19px icon to 20x20px. Additional options could enable the canvas to be expanded around the icon instead. For example, 20x20canvas icon.png.

Alternatively, a layer (or folder) mask could be treated as the canvas. Enabling a higher level of control over exactly where the asset is placed within the canvas.

Smart Objects Don’t Scale Correctly

If you have to work with raster layers, it’s wise to create a smart object so they can be scaled down from the original size and back again non-destructively.

In the current implementation, if you have a large smart object scaled down to well below 50%, setting 200% image@2x.png makes it blurry instead of using the data inside the smart object.

It shouldn’t. If I scale that layer back up the quality is there and Generator should be able to use it.

This is the Start

Layer naming feels like an implementation decision, where as the other issues seem more like version one oversights. Software is hard, you can’t foresee every use case.

It’s also worth noting that Generator is open source, and that plugins can be written in Javascript. So even if Adobe makes slow progress, it’s bound to be improved by the community.

This is a killer feature and I’m looking forward to seeing where Adobe take it.

Have a comment? @me on Twitter.