3 Replies Latest reply on Aug 17, 2014 7:24 AM by Noel Carboni

    Using Photoshop to create web graphics on a MacBook Retina Display

    jennyhughesvt

      I have the new 2014 MacBook Pro with Retina Display and just downloaded the latest version of Photoshop. I've found that when creating graphics for the web (buttons, banners, etc), I have to zoom to 200% in order for the size of the graphic to be what will appear on the web. For example, a 600px wide banner appears to be 300px wide in Photoshop (even though it is, indeed, 600px when viewed on the web). I've learned that I have three options:

       

      1) design while squinting to see the very small object on the screen (not really a good choice),

       

      2) check the "Open in Low Resolution" box for Photoshop if I want my graphics to appear to be the right size when designing them in Photoshop, or

       

      3) continue zooming to 200% when working in Photoshop.

       

      My question is: aside from the obvious annoyance factor, which of these options is the best choice for creating the highest quality graphics for the web? Are they both the same result... or am I hurting my graphics in some way by choosing one over the other?

       

      THANK YOU!

        • 1. Re: Using Photoshop to create web graphics on a MacBook Retina Display
          Noel Carboni Level 8

          jennyhughesvt wrote:

           

          For example, a 600px wide banner appears to be 300px wide in Photoshop (even though it is, indeed, 600px when viewed on the web).

           

          That statement indicates you have a bit of a misunderstanding about how things work.  It's not true, because you seem to be confusing the term "px" with a physical measurement. What you need to understand is that a pixel on a Retina display is far smaller than one on a non-retina display.

           

          The key is this:  Images are upsampled by Safari when displayed.  Therefore, "viewed on the web", which you appear to think of as invariant,  is actually not the same from computer to computer.  Try this:  Put a 600 px image into a simple web page, then display it in Safari on your Retina system and screen-grab it.  Now measure the size of the image in pixels in the screen grab.  It will actually NOT be 600px as you have stated.

           

          Why would Safari upsize a web image on a Retina-equipped system?  Because Apple realizes that if it displayed an image that's been prepared for a typical non-retina 100 ppi display, as most are, it would look tiny on the 200+ ppi Retina display, so it's zooming everything for you as a convenience.

           

          I suggest taking some time to get your mind around how things actually work, and get to understand what a pixel really is, rather than making assumptions based on what you see.  Once you truly understand how images are actually being displayed, you'll be able to make the right decisions that work for you.

           

          Keep in mind that Photoshop is giving you the use of each and every pixel in that beautiful 200+ ppi Retina display.  Safari is not, unless you program your HTML to take advantage of it.

           

          The future of the web, in my opinion, is moving toward a model where images are actually provided at a higher-than-absolutely necessary resolution, and so high resolution displays will be able to make more of them, and people can easily use zooming to see even more detail as they want.

           

          You might want to glance at this test page I created (and view the source to see how the HTML is coded):

           

          http://Noel.ProDigitalSoftware.com/temp/WebImage/Test.html


          -Noel

          • 2. Re: Using Photoshop to create web graphics on a MacBook Retina Display
            jennyhughesvt Level 1

            Thank you, Noel! You are correct that I am not speaking correctly about pixels in the sense of actual size dimensions. I am just used to the old way of thinking (my previous MbP was a 2009) where a client can say "i want an email banner designed 500px wide" and I can create a new doc in Photoshop that is 500px wide. With the Retina Display, I need to adjust my way of thinking. I just wasn't prepared for it, that's all. I appreciate your insight! Thank you!

            • 3. Re: Using Photoshop to create web graphics on a MacBook Retina Display
              Noel Carboni Level 8

              Clients - assuming we're talking about the folks that put images and HTML together - need to start thinking in terms of high resolution imagery.

               

              I think I'll develop the above web page into something more substantial, that can be used as a teaching tool.

               

              -Noel