How to Design for the Web on Retina Macbooks
I’ve been working with my Retina display Macbook Pro for well over a year now. My first reaction was “This thing is sweet for browsing the web and watching movies…but sucks for Photoshop.” I also don’t love the 2x screenshots, but that’s for another day.
In Photoshop, lets say you create your document at 1200 x 750, a reasonable size for designing a modern website. You want to see what it’ll look like at 100%, so you double click the magnifying glass icon in Photoshop’s toolbar.
But it’s showing you 1200 x 750 pixels on your Macbook Pro. Which, if it wasn’t a Photoshop document but rather a rendered web page, would actually be 2400 x 1500 pixels. So you’re left with a really tiny workspace that isn’t ideal for design.
It’s so easy you’re going to kick yourself. Just create the document at 2x the width and height you want. Design away, and when you’re ready to export, the Save for Web… option has a Percent box at the bottom right corner where you can type in 50% and be done with it.
Why this is great:
- You can see your work at the size it will be displayed on all machines, retina or otherwise.
- These days, outside of actual photos, there really isn’t much need to export graphics. Rounded borders, drop shadows, gradients, the things we used to use graphics for can mostly all be accomplished by CSS3. Even if you do, though, the 50% trick will shrink those to the size you need.
- Retina-ready raster images. When you do need a raster image, you’ll already have a large enough image in your Photoshop document so you can export a 2x sized image. Just scale it down for normal screens, too.