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.
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:
- CTRL+click Photoshop icon > Options > Show in Finder
- Quit out of Photoshop
- CTRL+click the Photoshop.app in Finder and select “Get Info”
- Check the box “Open in Low Resolution”
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!
Source: http://ift.tt/1ut2S6a
No comments:
Post a Comment