One of the pain points of retina MacBook Pros is that Photoshop, natively, offers no elegant way to design in relative dimensions, thus 100% 1:1 pixel ratio files look tiny on a retina monitor.
My first stab at alleviating the squinting and blurriness was a naive attempt to simply x2 the pixel dimensions of my document (1200px scaled to 2400px).
Bottom line: Don’t do it!
While it gets the job done, Photoshop doesn’t natively do a great job of scaling type and patterns up and down. Thus, what was 24px on a retina screen becomes 12.01px on a non-retina screen, which will drive any designer completely crazy.
So what’s the solution? Well, thanks to the folks at UI Parade, I did stumble upon an indirect solution. Their plugin, DevRocket, offers magical (+) and (-) buttons that leave nothing to Photoshop’s interpretation. This was originally released to facilitate more realistic iOS retina comping. In a recent version of DevRocket, however, they’ve allowed the plus and minus buttons to be used on documents not generated by their plug-in.
While small, this DevRocket feature has been quite handy; enabling myself as well as our entire design team to work together in a way that is beautiful-regardless of pixel density!
Troubleshooting Tip: The only hiccup in this process is that copying and pasting text in a new layer occasionally confuses Photoshop; copying 12px text onto a new layer sometimes creates 24px text on a 1:1 document. After a few times though, this will become second nature.
