I’ve worked on several retina projects at this point now that the iPhone has had a high-density display for several years. Retina computers, however, are still a new phenomenon and it seems that designers are still working out how to best prepare assets that will be simple for both design and development.

I’ve seen my fair share of documents that were twice as large as they needed to be, so I wanted to briefly share my workflow in hopes that it will prevent more people from chugging computers and full hard drives.

Remember how developers code shapes

CSS has come a long way in the last few years, and developers rarely use image assets anymore to create objects. Buttons and lines are now created exclusively in code, and even icons are developed as SVG code snippets. This fact means that object sizes are now relative, not fixed, and can be designed at whatever size you choose.

Remember that fonts are inherently vectorized

Hopefully this doesn’t need an explanation for all you type nerds out there, but all fonts and web fonts are brought in as vector shapes, so they can be designed at any size, then scaled relative to the rest of the layout.

What’s more, your developer will code the sizes just same as he or she always has, in Ems relative to a standard 12pt base. Those size 12 fonts will render at exactly the same physical size on a retina screen and standard screen, so there is no need to design them at double resolution and subsequently double size in the PSD.

The canvas size shouldn’t change

The culmination of my two prior points is that there is no need for you to alter the canvas size of your PSDs. My guess is that this practice originated with iOS design where developers actually needed bitmapped assets (remember @2x?) from their designers, and this bad habit carried it’s way over to desktop design.

You don’t need to double your canvas, or even double your resolution. You just need to watch out for image assets.

Use Smart Objects for large image assets

There are a lot of uses and misuses of Smart Objects in Photoshop about which I could write several opinions, but I think that they are very well served for creating retina-ready assets. They make the process so simple and straightforward, and in a workflow that many people are accustomed to. All you have to do is make sure that any image you use in a layout is at least twice as large as it needs to be within that layout. Once you’ve added it, make it a smart object, reduce it’s size to 50% and viola! you’re all set. All your developer has to do is open the object, save out the full-resolution asset, and the layout is good-to-go with little to no change in your workflow.

I know these steps may be obvious and I hope they were, as it means you’re already making life easy for both yourself and your developer friends. Good luck with retina, it doesn’t have to be as frustrating as it once was, other than you having to procure gigantic images!