Pixel-Perfect Design using Photoshop on a Retina Display

I recently purchased a MacBook Pro with the infamous retina screen display. Everything does look beautiful and there is a noticeable difference in comparison to non-retina icons. However I noticed a problem using Photoshop that others in the web design field have also likely noticed.

Every new document is shown at half-size while the document view claims to be 100%.

Anyone running CS5 or below should not find this to be much of a problem. But CS6 and CC have been updated to include retina-based icons and interfaces. This creates a pixel-dense display in Photoshop(and other Adobe programs) where new documents appear twice as small instead of “regular size”. Another way to put this is @1x images will appear tiny because retina Photoshop only uses @2x documents.

I’d like to provide an overview of how this affects web design vs other areas of design like photo editing or vector work. I also have a workaround solution for anyone struggling with this problem on a retina display.

So What’s the Deal?

When Apple started releasing MacBooks with retina displays it became the new standard for their laptops. This meant app developers had to redesign their icons to larger specifications and, if necessary, update the interface too. Adobe already released Creative Suite 6 and eventually put out an update for retina users.

A typical MacBook resolution is 1440×900 but with the retina display more pixels can be fitted into the same physical space. Adobe’s update now works nicely with the retina 2880×1800 dimensions. With some programs like Dreamweaver or Illustrator this wouldn’t be a problem – actually it looks amazing!

But with Photoshop there is a slight problem. Photoshop is a pixel-based program which means you’re designing graphics in a pixel grid. When copying a “regular” 400×300 image you’ll see it in Photoshop at 100% zoom 200×150. 200% zoom will show you the actual 400×300 pixel image, which should be 100% zoom. Keep in mind that PPI does not matter, only the document dimensions.

photoshop cs6 retina display resized images

I want to clarify that I simply adore the retina interface in the updated Adobe products. The older icons look okay but you can tell a major difference between the two versions. The toolbars look nicer, fonts look nicer, every panel and every icon just looks sharper and cleaner on a retina display. The biggest problem comes down to working directly with pixels.

Differences in Web Design

Consider how it would work to draw a small vector icon with the pen tool. Or consider opening a new document to perform a digital painting with your tablet where the pixel locations don’t matter as much. In these circumstances it really doesn’t matter if Photoshop squeezes twice as many pixels into the screen because the end result isn’t dependant on exact pixel locations.

However I should note that your vector icon or painting will look bigger on a regular monitor. It isn’t actually bigger, the retina display just makes it look smaller.

At this point you should be able to understand why this is detrimental to web designers. If we need a rectangle to outline a 1000px layout this shape needs to display exactly as a user would see it. The web browser is responsible for automatically retina-izing background colors and fonts. Photoshop will not do this so each new shape layer needs to be an exact perfect size.

Many support threads have been made about this, with almost everyone dismissing it as a non-issue. The problem is summed up nicely by this post:

View > 100% means that one image pixel will be represented by one screen pixel and that means that on a screen with smaller pixels this will naturally result in a smaller display of an image of certain pixel dimensions.

So how are we told to fix this? An irresponsibly pompous answer states “what’s wrong with 200%?”

Well Mr. Noel Carboni, the problem is most people don’t want to rearrange their workflow and make 200% their new default document view just because Apple forces everyone to use retina screens. Retina Photoshop is not an improvement for web design. Perhaps for mobile app design, maybe icon design, and certainly vector design, but not pixel-based work.

Switching your workflow to 200% zoom is a weak and tiresome solution.

A Designer’s Solution

If you’re frustrated with Retina Photoshop forcing 1px to display smaller in PS than it would in a browser, you are not the problem. Adobe & Adobe’s support is the problem for laughing this off like it’s a joke.

What should happen is that Adobe should release an update which retains the Photoshop retina interface, icons, and other tidbits, without forcing new documents to adhere by these same pixel rules. A simple checkbox in the preferences panel could switch between retina-based document views and non-retina document views.

If there’s “nothing wrong with 200%” then why not give us the option to label that zoom as 100%? Then 200% can be called what it really is on every other monitor – 300%. Unfortunately I seriously doubt Adobe is rushing to fix this anytime soon.

The best solution I have found is to run Photoshop in low resolution mode. After hours of searching I found this in another support thread coincidentally also arguing against Noel Carboni on this very topic. Here are the steps to get low-res mode:

  1. CTRL+click Photoshop icon > Options > Show in Finder
  2. Quit out of Photoshop
  3. CTRL+click the Photoshop.app in Finder and select “Get Info”
  4. Check the box “Open in Low Resolution”

low resolution mac osx info menu photoshop

Now when you re-launch Photoshop all the interface elements will appear blurry. But every new document will display at a pixel-perfect 1:1 ratio without getting fixed into the retina grid.

The only other solution is to design all your websites @2x, so a 1000px website layout becomes a wider 2000px PSD document. A header bar which spans the entire webpage 1000×50 will become 2000×100. I prefer using low-res mode over this method because not every site I design needs retina support.

Just a quick Google search will prove I’m not the only one to feel that this is a legitimate problem. For anyone who stumbles onto this article I truly hope one of these solutions can work for you. I love web design so I regularly switch between low-res and hi-res mode when I’m doing pixel work vs. general design or photo editing.

If you have a better solution please let us know in the comments section. Also if you know anyone else struggling with this problem be sure to share the advice!

Tags:
6 shares
Jake is a researcher and writer on many design & digital art websites. He frequently writes on topics including UX design, content marketing, and project management. You can find more work on his portfolio and follow his latest tweets @jakerocheleau.
  1. Ben
    January 5, 2015

    Yes agree – finding it difficult to design for web on retina PS. Most advice I can see suggests to run Photoshop in low res mode – but everything looks blurry. I might try upscaling my documents to 200% and working in normal photoshop retina mode and then exporting to 50% when presenting visuals for clients who mostly will be using non retina displays.

    Would appreciate any other comments on this as retinas have been around a while now.

  2. rose
    February 27, 2015

    Such a relief to find someone explaining this so clearly.

    It’s one of the things that shocked me when I upgraded my computer… my glorious 5K 27″ iMac display is honestly more of a hindrance than a help when considering professional design work.

    And now I see that it would be an easy fix!! argh.

  3. September 1, 2015

    Just stumbled across this after searching for hours on a resolution for the retina issue. I can’t believe this has been on going for close to two years! I only just got a retina display MBP after my 4 year old MBP started slowing down.

    This issue I’ve got is that 50% of my work involves banner ads. The fact that Adobe don’t see that you can’t save GIF backups as retina as an issue is concerning. File size limit it a big one for banner ads, and I can’t just hand a client a file that is double the size and double the dimensions! Can’t tell you how frustrating this is…

  4. Tyran
    September 30, 2015

    THANK YOU!
    Open in Low res worked… After countless hours wasted trying to sort this out.
    YOU’RE AWESOME!

  5. Rusquish Harowan
    October 31, 2015

    Despicable that they have not offered an update for this.

  6. Rafael Costa
    November 20, 2015

    THANK YOU SO MUCH

  7. theCena
    January 15, 2016

    even at low res when exporting jpgs and such everything is sill pixelated like, specially fonts and other vectors.. this is really unacceptable..

  8. Derek Webster
    March 4, 2016

    I cant believe that this is still an issue. I just upgraded my late 2009 imac to a 5k and my gorgeous web interface designs all look like tiny postage stamp sized Mobile designs. Low res mode kinda works but even the fonts on the design are kinda blurry. Thing is if you browse a website in chrome everything looks normal. ie 100% but photoshop is 50% smaller. Major oversight here. 5K is all well and good but Its unusable – So if Apple came out with a 20K monitor would we have to result to zooming in to 500%! NOT COOOOOOL!!!

  9. Simon Alexander
    April 27, 2016

    I read the thread you mentioned before finding this article. That Adobe support guy really should find another way to make a living. Thank you for this info and I hope Adobe fixes the problem soon.

  10. Jayden Lawson
    May 10, 2016

    Steve Jobs was 100% correct when he said that Adobe is a lazy company. This still is not resolved, and unfortunately, I’m going back to turning off “Open in low resolution”. I’ve noticed the Photoshop interface is much crisper with it off, so I’ll just have to put up with always zooming my documents to 200% to see the “normal” size. Sigh.

  11. ɐznןɐʞ ɐpuɐʇs
    June 26, 2016

    If you don’t want to hurt your eyes with the “Open in low res” option, you can go System prefs > Displays > Larger text. You will now effectively have a 1440×900 screen that is 72ppi. Unfortunately your toolbars will be effin’ huge and you’ll have a lot less space for work…

  12. June 27, 2016

    Totally agree, and can’t believe this still doesn’t have a fix in the program. Photoshop is the only software that seems to have this irritating issue. A simple “Compensate for HiDPI display”/ “Display at 72ppi” checkbox in the preferences would appease everyone.

  13. Semas VYK
    August 20, 2016

    Thanks for the article.. But opening PS in low resolution in 27″ 5k retina will make it really pixelated. Maybe it works with macbook but it doesn’t in iMac 5k

  14. Hanneke Verhoeven
    September 26, 2016

    Thanks Jake. Searched for hours as well. I have a 5K monitor and use a screen resolution of 260×1440. The open in low resolution “fixed” the problem. I know i’m not using the full retina advantage now but like you said “not every site uses retina”. So tnx again

  15. Alexei Yudin
    November 11, 2016

    “Open in Low Resolution” or “200% zoom” have no difference. Fonts and Images are pixelated

  16. MDom
    January 13, 2017

    2017 and still no real fix.

  17. wormz30
    April 25, 2017

    3 months later from the last comment and still no fix for this. As a matter of fact, I had a technician from adobe assisting me and he had no fix for this either. As a matter of fact, he didn’t seem to know why this was happening.

    The funny part is that I came across the actual thread where this conversation originated and even saw that quote from Noel Carboni and I thought… “Seriously?! Zooming to 200%?! Are you kidding me?” and then i came across this post. LOL.

    There should be some kind of native adaptation to this issue. Otherwise, what’s the point of designing on a macbook pro with retina or any system with retina display… what about 4k?!

Leave a Reply

Your email address will not be published. Required fields are marked *

Wall Street Presents The Top 50 Business Themes: WordPress vs Joomla vs The World