Macbook Pro Retina Photoshop Pixelated Results?


I'm a web designer, and my old (non retina) Macbook, Photoshop used to produce clear images and text both in Photoshop and out of Photoshop when the final images had been saved as a png or jpg.

However, ever since moving to the retina MacBook i've been completely stumped by the fact that my text and everything else in the images are coming out pixellated, which doesn't help at all.

So, for example i'm creating a logo which is just text in a font, i'm editing at 200% which is the real size of the image i believe for the Macbook retina, the text appears blurry or pixelated and I can never seem to get it to sharpen up? This is not a case of changing the text to sharp/smooth etc because even then no matter what I choose the text is still pixellated. So when I go to save the image as a png or jpg the image, of course is still pixellated. The issue is it's not like it can go unnoticed either, it's that bad.

Am I missing some settings here? Surely graphic designers aren't putting up with this?

Sorry if this seems like a really stupid question, but I really can't get this working, so if anyone can help then it'd be really appreciated!

6/18/2014 2:30:00 AM

Accepted Answer

The confusion begins when you think you need to adjust how you work simply because you are working on a retina display. You do not. Treat your machine as you always have. Don't adjust your workflow due to the hardware you are using. Basically forget you are working on a retina display.

Now, to support retina display in projects, you need 2 images - one standard and one double-sized (@2) for anyone else using a retina system. To this end, I find it's always best to start with the large image, the double-sized version.

So, if you are designing a web site and need a 500x100px header image, you start with a 1000x200px image and design the header. When you are done, you can reduce the image by 50% to get the 500x100px image and save that. If, after reduction, there are detail areas which need adjusting, you can do that before saving. By starting with the @2x image you design for retina viewing. Reducing 50% then designs for all non-retina displays.

Retina technology doesn't use any zoom to alter image appearances. It actually swaps images. If you have images with @2x titles, even in a web site design, retina displays pull those larger images and use those, they do not simply enlarge (or zoom) the standard image 200%.

6/18/2014 2:46:00 PM