Skip to main content
SB-W
SB-W
Inspiring
December 6, 2024
Question

Pixel Perfect work, I do not like 200% or 2280px(1140x2) for web design.

  • December 6, 2024
  • 2 replies
  • 927 views

What can I do for my new 16" MacBook Pro? It's resolution is too high and the 1140px wide document takes up an area nearly smaller than my phone :'( There used to be an option in "Get Info" that would allow you to scale it up without zooming to 200% or changing the image size, but its now missing from Photoshop. Zooming 200% feels like a hack, and making the image size 2280px is not great either.

I do not really like using 200% or doubling the document pixel size to 2280px; are there any other options? I am using Photoshop for this project because I am including lots of visual FX with pixel-perfect design, grunge brushes, etc. I also do not like slicing a 2280px image because the slices will be too big on 1140px designs, and it also does not keep consistency when you downscale. Especially with 1 to 3 pixel borders that are built with noise, you can make them 2 to 6 pixels on the 2280px design, but they do not scale the same when they get to 1140px.


200% seems like the best option, but the bitmaps, brushes, etc. are a bit blurry in this case and hard to design with; its not the best option. 

Do I just set it to 144 dpi and make it 1140px? That way, its not so blurry at 2x? Also, making it 2280px is not comfortable even at 72dpi; a 3 pixel line just feels so small, and I have to do the math in my head that 3 pixels is supposed to be 6 pixels, not 3 pixels, so that it looks right when I go to scale it down. This is a real pain. Just makes it kind of gross to design for, especially when I start introducing layer styles, assuming I want to resize it later, not as a bitmap but as a PSD.

Thanks,
SB-W

This topic has been closed for replies.

2 replies

Conrad_C
Community Expert
Conrad_CCommunity Expert
Community Expert
December 6, 2024

200% magnification is the best solution because that emulates web browser scaling, for any images that are not marked in the website CSS as 2x scaling.

 

The problem with asking for Photoshop to change is that would go against industry standards. This isn’t a problem with Photoshop at all. It’s a natural consequence of the move to HiDPI (called Retina on Mac) display scaling.

 

To prove it isn’t a Photoshop problem: If you get fed up with Photoshop and decide to use another pro level photo editing app, including some of the biggest competitors to Photoshop, you will find that they all work the same way (as far as I know). They are all following the technical standards.

 

Also, if you decide this is a problem with the Mac, so you try a Windows computer with a similar HiDPI display, you will find the same “problem” because again, everything is working the way it’s supposed to work. The only link in this chain that isn’t working right is that web designers are still designing for old 1x displays that are getting rarer and rarer, even after CSS was updated to accommodate HiDPI/Retina resolutions for images.

 

So it isn’t a problem with Photoshop or macOS display settings. 

 

Another potential solution (which unfortunately takes up space) is to buy a cheap 1x scaling display (a used one will do), connect it, and preview 1x web graphics on that.

    SB-W
    SB-WAuthor
    Inspiring
    December 7, 2024

     

    Another potential solution (which unfortunately takes up space) is to buy a cheap 1x scaling display (a used one will do), connect it, and preview 1x web graphics on that.


    By @Conrad_C

    This is the only option I have right now. Maybe I have a bad memory, but I recall Photoshop working better in early 2021 or 2014, or when ever I first got a Retina Mac.

    I understand people are getting higher ppi displays, which is great, though I think most of the world uses 92 ppi or so for desktop monitors. Unless they are gamers. Like occasionally I will get a client who has a 4K TV as a monitor or an iMac/expensive laptop with higher ppi, but most people still use 1080p for their monitors or less. The only exception are phones, which I think are awful devices, and we should not be designing and accompanying them, especially when it effects the desktop design; and it does, despite media queries, etc.

    I will try the --hidpi flag on Windows when I get a new monitor, but I believe it just scales UI and does not work how the MacOS Photoshop flag worked in 2014/2021 or when ever it was.

    Thank you.

    Per Berntsen
    Community Expert
    Per BerntsenCommunity Expert
    Community Expert
    December 6, 2024

    Web browsers will scale images to 200% when they detect a high resolution display, so a 2280 px image will also be scaled to 200% (or scaled to fit the window if there aren't enough screen pixels available). If the display is standard resolution, no scaling will occur.

     

    Some websites use special coding to prevent the scaling, it requires two versions of each image - one at 1x and 2x.

    The 1x version will be served to standard resolution displays, and the 2x version will be served unscaled to high resolution displays. This is done with a script that tricks the browser to think that the image already has been scaled. At least that's how it worked when I implemented this on my website some years ago.

     

    If the websites you display your work on don't have this feature, the best you can do is to make the image look as good as possible at it's native size (1140 px). You can assign a keyboard shortcut to View > 200% to check how the image looks when scaled.

     

    quote

    Do I just set it to 144 dpi and make it 1140px? That way, its not so blurry at 2x? Also, making it 2280px is not comfortable even at 72dpi

    By @SB-W

     

    PPI (it's not DPI) stands for Pixels Per Inch, and is optional metadata used to calculate printed dimensions.

    Pixel dimensions divided by PPI = Printed dimensions in inches.

    For screen viewing, PPI is irrelevant, and not even required. The image will display according to its pixel dimensions no matter what the PPI value is.

    If you export from Photoshop, the PPI value will be stripped out because it's not needed for screen viewing.

      SB-W
      SB-WAuthor
      Inspiring
      December 6, 2024

      @Per Berntsen 


      Yea true, I know this about PPI, was just turning up the PPI so it's not blurry at 200% when working in photoshop. I really don't know what to do, why don't they bring back the high PPI resolution mode in settings? So that even at 100% the canvas is big. Instead of taxing the designer when he goes to export, or when he is designing etc. It's not comfortable for me to design at 200%, like I said my brushes look blurry, and it's not a good depiction what it will actually look like, etc. I feel like I am forced to design on 1080P unless I am doing vector web design, then I can use a higher resolution display.


      I still don't know what the exact solution is, can you run a hyphenated command on the app/exe to force the mode it uses for high resolution displays? Windows use to have --hidpi(not sure if it still does?) for photoshop and Mac use to have an option in get info.

      D Fosse
      Community Expert
      D FosseCommunity Expert
      Community Expert
      December 6, 2024

      Read Per's post again.

       

      The small screen size is a display panel property, it has nothing to do with Photoshop or any other applicaton.

       

      All the application can do is compensate, by using four screen pixels to display one image pixel. This is 200% scaling.

       

      Web browsers and consumer grade image viewers do this automatically when they detect such a display. Photoshop does not do it automatically, because it's used for many other purposes than web. You have to invoke it manually, by going to View > 200%. The result is identical.

       

      This workaround is necessary because the majority of users still have standard resolution displays. So it has to display at a comfortable size on both panel technologies. If everybody had 4K/retina displays, we could skip that and just double the size of files. But everybody doesn't.

       

       

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices