100% zoom is too small on screen (designers don't get high resolution displays)

[pmlink360]

Hello, I'm using photoshop CC on amacbook pro retina. I mainly use photoshop for web design and when I open a document that is 300x200 px, the 100% view is too small on screen. Any ideas, It was this way on PS cs6 also before I upgraded. I just tried to delete the prefs file and restarted PS and it did not change. I have also tried to change my screen resolution to "best for retina" and it is still the same.

Steve

[D Fosse]

This thread has been going largely unanswered lately, for one simple reason: The answer has been provided so many times by now, here and elsewhere, that most regulars have given up. Me too, really.

Steve, the feature is there. Robert, the issue is fixed. There is nothing more to fix.

Photoshop at 100% displays one image pixel represented by one screen pixel. That's 1:1, or 100%.

The problem with that, of course, is that screen pixels are much smaller in a retina/4K/UHD display - so the image becomes much smaller than everybody's used to from traditional displays. The exact same thing has happened before, when displays went from 480 pixels to 670 pixels to 1024 pixels to 1600 pixels. With each increase in screen resolution, displayed content gets smaller.

Now, 4K is a pretty big leap. So when detecting a high resolution display, what other applications (including web browsers) now do, is to scale everything up, but without telling the customer. They can do that, because they don't have the strict requirements for accurate display that Photoshop has to meet. They now use 4 screen pixels to represent 1 image pixel. But there's a catch: the retina display is just turned into a standard display. All the extra resolution is wasted.

Photoshop now has a preference to scale the UI to 200%. So that takes care of that. But what about the image? It's still small at 1:1 pixel ratio. So there's now a similar View > Zoom option: 200%.

This is exactly what every other application on the planet does when detecting a high resolution display. But they don't tell you about it. They just turn your high-res display into a perfectly ordinary low-res one.

We all understand that for web design, it's important to see the design as most other users will see it. But there really is only one solution to that, and that is scaling up on a retina display. While most other applications do it to everything, UI and image, Photoshop can't do that. When you think about it, that's the way it has to be. A fairly small percentage of PS users do web design. For photography, prepress, illustration and so on, in fact everything that ends up on paper, screen scaling makes no sense whatsoever.

So Photoshop offers web designers an option to scale to 200%. It's the next best thing, because using exactly four screen pixels to represent one image pixel shouldn't introduce too much interpolation blur. But you're still wasting all that magnificent extra resolution.

---

Now, I don't have much hope for this post to fare any better than the others. But I'll probably keep this as a boilerplate text and paste it whenever the question comes up, which is several times a week.

[robertg31141100]

Thanks for your clear explanation! I understand the technical issues for the pixels and scale factor.

In my region and company we all use Photoshop for designing webpages, so we all got problems designing pixel perfect (with crisp fonts) in Photoshop now and in the future.

In illustrator it works perfect with pixels and fonts so maybe there will be an option to integrate a more vector based enviroment whitin Photoshop?

About the zoom factor: if you choose it by the view menu, will it render different then zooming with cmd+?

Thanks again

[D Fosse]

Illustrator, as you say, isn't pixel-based, it's vector-based. So there the problem simply doesn't exist. It just displays at roughly physical print size, whatever the display resolution. But Photoshop is raster/pixel-based by its very nature. I don't see how that can change without a complete paradigm shift.

Cmd+ will give you the same result. but the advantage of having a menu item is that you can assign a shortcut to it.

In the end, all of this is just a technology transition. In a few years time, we will all have high-resolution displays, and it's no longer a problem. Then we will all design with more pixels, and standard web images will have twice the linear resolution they have today. When that time comes, the 200% workarounds are no longer necessary.

[ckfoxtrot]

Hey guys... I just found this workaround that absolutely no one has found yet, you can open PS in "low resolution mode," an option found when doing "get info" on the app.  /sarcasm

Wow is all I really have to say after reading this entire thread, just WOW.

Noel wasn't really being condescending at all and had a ton of posts I found very, very informative.  I think what was being said was lost on many of the other participants in this thread.

The problem is really one of presentation.  It's not that Photoshop is showing the image at 50% of its actual size in terms of pixels on retina displays, it's that the images are being presented larger than 100% by pretty much everything else, leading to the disconnect for web and UI designers.

However, in terms of workflow, I can see how a PS option allowing designers to mimic how images are presented in other applications would be desirable, especially for people in the situation like whoever it was that said (on page 6 or 7 I think) they run multiple monitors of different resolutions and quality and drag things around to different displays to assess their work in real time (but then you'd still have to enable/disable the option every time you go to a new display).  Maybe Noel sort of missed some of the point behind why this sort of option would be desirable to many.  Working at the same relative size is more familiar and easier to comprehend, if it can be done with the same relative image quality (especially for text and such).  I can see why just zooming to 200% isn't necessarily ideal I guess, and having the same relative size (with the same quality) between Safari (or whatever else) and PS would be nice.

Still, it seems like web and UI designers would be better suited just doubling the resolution of their work (mentioned somewhere above, probably pg 6 or 7), then either reduce it after the work is complete or control how the higher res work is presented with the HTML code like Noel said (or have the end result be multiple versions of the work, targeted to different users).  Really, when designers start designing for higher res displays, this will become less of a problem, like D Fosse said.  That, and maybe web designers should be moving away from PS to better suited programs anyways.

Interesting side note, Corel Painter displays images matching how you'd see them in other apps when using a Retina display (i.e. the image will look the same in Painter as it does in Safari).  Might just be that the program isn't really designed for high res displays yet (I'm actually testing out a trial version now to see if I like it, not much experience with it in general).  Pixelmator functions like PS does.

[D Fosse]

You read the whole thread? Respect...

The problem is really one of presentation.  It's not that Photoshop is showing the image at 50% of its actual size in terms of pixels on retina displays, it's that the images are being presented larger than 100% by pretty much everything else, leading to the disconnect for web and UI designers.

Yep, that's it. But let's call it for what it is: scaling up. That's all it is.

The whole problem is that, say, Safari does this upscaling without telling the user - and the user then automatically assumes that this is the correct representation. But it isn't! It's just scaled up to 200% or 150% or whatever.

Photoshop just cannot do this. No way. It has to represent the image accurately. What these web designers tend to forget, is that Photoshop wasn't made exclusively for them. For anyone else, photographers and so on, this upscaling makes absolutely zero sense. That's not what they need at all.

So the 200% zoom option is in fact the only possible way to deal with it. OK, maybe there should have been a 150% option as well, but still, this is what these web browsers do anyway. So why is it suddenly "not good enough" when Photoshop does the same thing?

[ckfoxtrot]

Yup, the whole thing lol (which is how my sarcastic joke came into play).

Talking in terms of scaling is more accurate.

Actually, I'm not sure why the 200% zoom option isn't good enough for most designers (or the one's here anyway).  It looks extremely close to how the image ends up being scaled.  I guess some people (here and elsewhere) argue that there is a loss of "quality," that the PS zoom looks more pixelated compared to the scaled images in Safari (and everything else).  However, I don't see how this is going to make or break doing any design work, especially as the difference is pretty minimal.  Really, it seems to me just PS (again) being more truthful/accurate.

[Travis_NIO]

Hi ckfoxtrot, and thank you.  You are right and finally after skipping all of the flames in this post you are the prize winner!!! I haven't posted much if ever. but been using Photoshop 20+ years.  It is a presentation issue in Photoshop.  Yes, the issue is the rest of the world is in a resolution 1/4 the size of us with the 5K monitor which I just started using this week.  I read the PPI preference and it didn't solve. 200% makes it busier (but 20 years of Cmd+1 is hard to break).   But there it was hidden and you found it for me.  It's not ideal, but at least I can see like I have for 20 years in Photoshop taking screenshots of apps and enhancing them for my job.  This should be in the preferences.  Not such a hidden feature.  I didn't read all of the posts, but my goodness people what a rant.  Once again THANK YOU, GOING TO THE APPLICATION IN THE APPS FOLDER, GET INFO, AND HITTING SELECTING LOW RESOLUTION solves most peoples problems.  Now having to get through the Adobe interface of Googling this term, clicking through 1 through 5, then the ellipsis and getting to page 7 (so far) on this way too long thread, that's another issue to suffer through.  Thanks Adobe, make it a Preference.

[Curata_Steve]

Bwaaaaaaa ha ha ha ha. Zooming to 200% is not a fix. It's a crappy work around, as are all of the other suggestions.

Peace!

[D Fosse]

Curata_Steve wrote:

Zooming to 200% is not a fix. It's a crappy work around, as are all of the other suggestions.

See? What did I say...

Steve, that's precisely what all your other applications do! But they just apply that "crappy workaround" without telling you.

Why is this simple point so hard to get across?

[Herbert2001]

I have to correct you there, because it is only a half-truth: applications such as browsers render the fonts and vector images at the highest pixel resolution possible on a retina/4K screen. Photoshop is unable to emulate this behaviour, and zooming in 200% causes the pixels to be doubled for both vector graphics and text.

In Photoline and Illustrator, for example, the pixel grid can be turned off, which renders bitmaps as bitmaps (pixels), and vector art and text are rendered at the native screen resolution, even at 200% zoom - which is the "correct" behaviour.

The situation is exacerbated by the limitations of smart objects: even IF a 2X resolution version is nested in a SO, it is still rendered visually at the lower resolution of the master document. Photoshop's preview on a retina screen does not reflect the actual rendering of such an image in a browser. In applications such as Photoline, InDesign, and Illustrator this is a non-issue: the designer works at the "interpreted" lower resolution (for example, 1024px width), and the high resolution image content is displayed nicely at true resolution on a retina screen. Not so, unfortunately, in Photoshop.

Thus the only solution is to design at double the resolution in Photoshop, which is not exactly ideal either. As a Photoshop user, the front-end designer has two work-arounds available to her/him:

1) work at the original interpreted resolution, zoom in at 200%, but with the caveat that vector, text, and 2x resolution content in SOs is rendered at a twice as low resolution compared to what browsers and apps on retina screens render, or

2) work at double the resolution, zoom out at 50%, which means all measurements must be doubled, and thereby losing the physical dimensions relationship with the platforms one designs for.

In the end the proposed 200% work-around in Photoshop is only halfway usable for screen, web, and front-end designers dealing with retina screen design. Arguably I would say Photoshop is rather awkward in the first place for screen-based (GUI) design work, and I would urge anyone still doing this type of work in Photoshop to look for alternatives. Especially now that retina screens have become the norm (well, at least for Mobile). Even Illustrator and InDesign are "better" choices in my opinion - and for many other reasons as well.

My advice: do your bitmap prep work in Photoshop, and the GUI/front-end design in other design applications which honour the interpreted resolution and vector/text/2x image rendering. Even apps such as Macaw and PineGrow  are better propositions for web work (Muse might become usable after the devs add responsive layout design) - especially since they render the result directly in a browser-based environment. You truly get what you see in those cases. And having a code base for free is incredibly useful as well.

[D Fosse]

What you all forget here is that Photoshop, as a raster image editor, wasn't made for web design. That's not its purpose. For web design, there are better and more suitable tools. And of course in a vector-based application, such as e.g. Illustrator or InDesign, the whole issue is moot.

If Photoshop behaved the way you all seem to want, it would be basically useless for photography, prepress, forensic/diagnostic purposes and so on. Photoshop has to reproduce accurately, which it does. There's no choice.

Everything here is about workarounds and nothing else. The basic problem is that a new generation of high density displays changes the old rules of how many pixels are required to reproduce at a decent size on screen. If everyone had these displays the problem would simply cease to exist; you'd just double the pixel count of raster images. But everyone doesn't, and so workarounds are needed to accommodate both types of display.

I suggest web designers start to work with the issue instead of fighting windmills, trying to force applications into something they aren't.

[Curata_Steve]

Mate, If you think working zoomed in at 200% all fuzzy and pixelated is acceptable, then good for you. I certainly wouldn't try to pursue a conversation with you to convince you otherwise.

What I'm saying is it's not good enough for me, it's a crappy workaround. I don't care what other applications do, I'm here to talk about how Photoshop can be better. I believe a better implementation is possible. If you're not interested in moving things forward and making the application better, then you're not contributing in a positive way to the conversation? After all, this conversation is about users wanting Photoshop to be better.

Why is this simple point so hard to get across?

[ckfoxtrot]

Curata_Steve wrote:

Mate, If you think working zoomed in at 200% all fuzzy and pixelated is acceptable, then good for you. I certainly wouldn't try to pursue a conversation with you to convince you otherwise.

The degree to which stuff is "all fuzzy and pixelated" is pretty (i.e. very) minimal compared to opening the same image in Preview or Safari, at least for me and on my retina display, at 200% in PS.  It's pretty hard to notice in fact, without trying to look for it.  Maybe how things display are a lot different for others for some reason...

I don't get why just designing at a higher res isn't acceptable either, dealing with the proper size/scale when finished (or at different stages to show the work to others).

[robertg31141100]

If the textrendering and vector shapes will be sharp on 200% it will be representative presentation, maybe an option for adobe?

Thanks already!

[Curata_Steve]

No one is claiming Photoshop's primary use case is web design. Like it or not however, many web/digital designers use Photoshop because it is a fantastic tool for that type of design work. Adobe knows this and touts features that are for web/digital designers, so?

Why couldn't there be dual modes of operation? High DPI displays will become more common, however there will be a significant period of transition where standard/high DPI displays need to coexist, and applications should be working to enable this. Currently they don't do this very well.

[D Fosse]

So, vector data completely divorced from raster data, and the two living separate lives in one file. In other words, Photoshop and Illustrator rolled into one.

Yes, I suppose that's possible. But is there any point? Let's be realistic here. The overhead would be huge, for very marginal benefit.

For a new application designed from the ground up this could be a way to go. But again, this is a time window we're talking about - in five years or so high resolution displays will probably have taken over completely, and the whole point is moot once again.

[Herbert2001]

...which is why I use Photoline: basically exactly what you are describing. And as for a huge overhead: Photoline's installation file is a mere 20~30mb(!) depending on Windows or Mac. True page support and basic DTP features are also quite helpful.

It is neither a new application, and has been around since 1995. Granted, no animation, video, or 3d fluff in Photoline - I use dedicated (far more powerful) applications for those anyway.

D Fosse wrote:

So, vector data completely divorced from raster data, and the two living separate lives in one file. In other words, Photoshop and Illustrator rolled into one.

Yes, I suppose that's possible. But is there any point? Let's be realistic here. The overhead would be huge, for very marginal benefit.

For a new application designed from the ground up this could be a way to go. But again, this is a time window we're talking about - in five years or so high resolution displays will probably have taken over completely, and the whole point is moot once again.

[D Fosse]

Yeah, well, Adobe had Fireworks, which also worked that way. It just died for lack of interest and nobody seems to miss it.

[Herbert2001]

No, Fireworks renders its vector shapes to the native pixel resolution of the document, just like Photoshop. There is no way to turn that behaviour off either. In Photoline vectors, text, and high resolution bitmap assets can be either visually rendered to the native document pixel resolution, or to the screens resolution. A simple keyboard flick "Ctrl-1", and presto.

Therein lies the rub, my friend. It is the main reason why Photoshop will never be great for this type of screen design work, and why we are discussing the half-hearted work-arounds in this thread in the first place.

Fireworks had (has?) a number of features which are still sorely missing in Photoshop.

[D Fosse]

OK, fair enough.

My point still stands: this is not a problem of application architecture. Photoshop just does what it has to do, considering this is software used by a heck of a lot more people than web designers.

This is a problem of new display technology vs. old display technology, and how to deal with that transition. That's the problem web designers need to solve, and it has nothing to do with Photoshop.

[andreask33100275]

Sorry, I think that´s wrong. Retina displays are a new technology and I think, Adobe must be go with the new technology and not other.


What does the users of the new iMac retina? There´s have the same problems. Do you see an iMac 27´ without the retina display? No!


In the future this problem it´s getting bigger and biggggger and biiiiggggggggger! What´s the problem for Adobe to find a solution?

(Affinity Photo (the alternative photoshop) does have a solution or a "fix". It´s possible!)

(Sorry for my bad english.)

Greetings from Munich,

Andy

[Herbert2001]

Andreas, as D Fosse stated, newer software obviously has more breathing room to cater to these issues. Affinity Photo was recently introduced on the market, and its developers are acutely aware of the challenges posed by retina screens for screen designers. And they built a solution into Affinity straight from the bat.

Photoshop, however, has a legacy code base which is over two decades old. It is going to be more problematic to rewrite core parts of Photoshop's code to accommodate a good solution. I doubt it is even possible at this point, or worth the effort.

[Guest]

Hi All!

I read through the entire thread... it was quite something.

I'd like to elaborate on something D Fosse pointed out at the top of this page. Some might have overlooked it. Keep in mind, I'm not condescending, not making fun of any of you, just simply trying to cater from everyone from students to professionals. I know some people had enough of the technical explaining, but please bear with me! I've seen a lot of web pages which didn't consider any of the below and they looked (and worked) horribly on displays that are even a little bit different than what the designer had in mind.

When you design a web page and want to create a certain experience, you are probably previewing your page as a whole in browsers and look at how it looks on the whole screen. Like an artist painting on a canvas. Whether you use the whole screen is up to you, leaving space by the edges is your choice. Now, in relation to composition, there are (at least) two basic things that you should think about: screen resolution and pixel density.

There's no such thing as browser resolution. There are only colored pixels next to each other and display devices. What you see of the pixels depends on the number of them in both dimensions and the attributes of the display. The fact that some browsers and operating systems are actively try to distort this is awful. Please bear with me and keep reading!

Make two simple web pages: one with a picture that is relatively small, say 300x300px and one with a picture that is relatively large, like a digital photo, at least 6MP. Just display the images, do not set any attribute in relation to their displayed size.

Now, check out these pages on as many displays with different resolutions and/or different physical sizes as possible! Smartphones, old CRT displays, TVs, etc. Make note of the difference how the image is displayed. For example, you will see distortion between displays with 4:3, 5:4, 16:9/16:10 and 21:9 aspect ratios. Just by checking out the images on both a 21-24" and a 32-60" screen you will see that physical size of the images change vastly.

Here is a link to a web site which can be used to check a display, if you are unsure about its attributes.

So, a display with a higher resolution will display the images in a smaller physical size compared to a display with the same physical size. These differences can be averted by calculating with the PPI of the device used to display the web page. The PPI is the ratio of the displayed pixels to the display's physical size. Your developer should be able to come up with different ways to achieve that, there are plenty of examples out there. You don't have to have all the different displays, you should be able to calculate how your work will look on them. Except if you really want to experience your work on them in reality.

Keep an open mind! Screens out there not only have 110 or 220 PPI. A lot of people now have 96 PPI displays (~24" using 1920x1080px). Images should not look good, while you're working on them, they should look good when you're finished. I'm quite sure sometimes you have to zoom the hell in just to get that one or two pixels colored differently to get the whole thing right.

Therefore, please keep in mind the following:

1. You have a (Retina) display device that is capable displaying more image data per square inch than many other displays, because it has more pixels to do so. Setting it to a lower resolution makes you lose its advantages and it will probably introduce display errors. Removing tyres from a car's wheels.
2. Apple is cheating you, by making other apps lie to you about resolution and upscaling content. What happens when you blow up an image to twice the sizes? It at least begins to look like sh*t. So, don't upscale, without the ability to turn it off. Ever.
3. Times will pass and there will be even higher PPI displays in the future. When you will get one of those and the change in PPI will be similar to your current situation you will have the exact same experience.
4. So, if you need to display the same image on a higher PPI display in the same physical size then you will need to zoom in using the same ratio as your PPI changed. Yes, yes, you're right, a low resolution image looks like sh*t. Upscaling, remember? Guess what though, that image will still look good on a lower PPI display at 100%. Just check it on that lower PPI screen.
5. You kept reading on and #3 just happened? Well, you are going to need to use images with a higher resolution. Higher at least by the ratio of the higher PPI to the lower PPI. If you want people to see the image the same way they did previously. However, the image will have more clarity. If you just blow up the image, it will look worse. Remember starting to see the wrinkles on the faces of people on TV when the resolution of the broadcast changed?
6. You worry about hardware resources like bandwidth? I'm quite sure there are ways out there to provide everyone with the content they need. Will you need to make different layouts for different displays? That is exactly what you need to do. I'm sorry, but if you are a professional web designer, you should've started doing this a decade ago. People use several types of operating systems, displays, etc.
7. You don't like #4 and #5? Use the same display as your customers. Each and every one of them. That's why I wanted you to see how stuff looks on different displays. Even if you find an emulator of sorts to display an image or web page in the physical size your customer will use, you won't see the same thing. Either some pixels would fall between the actual pixels your display has or more than one pixel would need to be displayed on one actual pixel your display has. You lose information either way.

I'm willing to help further if you have more questions. I'm not willing to debate the above however, as what I wrote is based on physical, mathematical and biological facts and figures. The way you feel about them is your personal problem. If you feel that using another software is easier instead of using PS differently than you did before, that's your personal choice. There's no logical way to modify how PS works out of the box in this aspect, without losing basic functionality and core userbase.

[gener7]

As a reminder to those that just joined in, we are not Adobe employees, do not speak for Adobe and do not make final decisions on Photoshop. We provide volunteer technical assistance as well as helpful advice on production techniques and related issues like printing and color management. A lot of great minds here experienced in their craft.

Discussion is good, but keep that in mind.

A more direct line is here: Photoshop Family Customer Community if you want the ear of staff, programmers, and project directors.

[summerlover]

I have read through most of this thread and think I have found something that may help, that has not been mentioned. I just recently bought my Retina screen, so like most new people when I opened up my web art in PS was thinking "WTF, why is it so tiny" and headed off to see what I was missing. I have tried most of the "fixes" not thinking they helped much. One of the better solutions is just to create a larger document and size down the images 50% using Adobe Generator (love this new feature). Another one is to simply open a new PS document and select for the Pixel Aspect Ratio "Anamorphic 2:1 (2)". You will get a warning that it is for preview purposes only, but you get a pretty nice image to view and work on.

Not perfect, but it might make some of the web designers a bit happier. I still feel like I need glasses after staring at it for a while.