Using Photoshop to create web graphics on a MacBook Retina Display

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!

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

Similar Messages

  • Why use Dreamweaver for create web pages

    Hi I am new in Dreamweaver and I want to know why use Dreamweaver for create web pages?

    Twitter
    http://twitter.com/altweb
    Blog
    http://alt-web.blogspot.com/
    Site
    http://alt-web.com/

  • I was wondering how I could use Photoshop to create a custom border

    I was wondering how I could use Photoshop to create a custom border around the featured slider image on my homepage.
    I am using a Wordpress theme called Gazetti if that helps. Thanks in advance for any help given.

    the simple answe is no, the macbook pro screen cannot be used as a second display for other devices

  • I have set up photoshop cs6 onto my new mac book pro retina display and it is so blurry i can't use it, is there an update i can use?

    I have set up photoshop cs6 onto my new mac book pro retina display and it is so blurry i can't use it, is there an update i can use?

    HiDPI and retina display support FAQ

  • I am programmer and I am using dr java on my mac-book pro with retina display but dr java doesn't support retina display, what is the possible way to solve this ?

    I am programmer and I am using dr java on my mac-book pro with retina display but dr java doesn't support retina display, what is the possible way to solve this ?

    I have made some progress.... I can print wirelessly from my printer now, but I can't set the printer itself to be wireless.  I had to move my printer downstairs to where my router is...which is not that convient.   I printed up the page you asked about....and as expected, it says it is off line and there is no IP address.    So now I need to figure out how to make my printer itself wireless.  I did download the HP driver I needed...but I can't access it to do anything else.  It seems l like I am missing a step... or I need to hook up my computer itself to the printer to help get the printer to be wirelss, but I can't hook it up because there is no port for me to do that (no port that looks like a phone jack).  I am guessing I would need a different type of cord, but I am not sure what kind of cord that would be! Ugh!

  • Illustrator and Photoshop for creating web banners?

    My company for years has worked with print products. We recently started creating web banners. We use Illustrator for the layout for print and Photoshop for the layout of web products. I have artists who dont see the difference between the two. They want to continue to create web banners in Illustrator. Or they want to export the Illustrator file into Photoshop with the layers. But, to export it this way it has to be cmyk. ugghhh. Can somebody please give me valuable reasons on what application is best and why? Thank you very much!

    >But, to export it this way it has to be cmyk.
    Not true.
    Illustrator is "best" for vector. Photoshop is "best" for raster.
    I would let your artists work in whatever program they feel they produce the "best" art. You should be able to quickly and easily develop a workflow around their needs. If you cannot, then you have your answer too.
    J

  • Illustrator or Photoshop to create web banners?

    My company for years has worked with print products. We recently started creating web banners. We use Illustrator for the layout for print and Photoshop for the layout of web products. I have artists who dont see the difference between the two. They want to continue to create web banners in Illustrator. Or they want to export the Illustrator file into Photoshop with the layers. But, to export it this way it has to be cmyk. ugghhh. Can somebody please give me valuable reasons on what application is best and why? I understand one is vector and one is raster. But if you are using type and photos in the banner, which one is the best? Thank you very much!

    If the document is RGB in Illustrator, then you can export layers to PSD. It shouldn't be a problem. I personally prefer Illustrator, but I do export to PSD and open in Photoshop if I wish to animate from there.

  • Using Photoshop to create menus

    This question was posted in response to the following article: http://help.adobe.com/en_US/encore/cs/using/WS2C3F3ABD-6457-4ca0-898F-720B7E3D0C10.html

    Author Jeff Sengstack shows how to create viable Encore menus using Photoshop in this short tutorial at InfiniteSkills: http://infiniteskills.com/blog/2012/07/adobe-encore-cs6-tutorial-designing-menus-in-photos hop/

  • Web Images and App Store Icons are distorted in MacBook Retina Display

    Recently, most of the icons on Mac App Store are distorted. I also noticed this on web images when browsing using Safari or Google Chrome. By the word "distorted", I mean that the image was not properly loaded, it contains pink lines and multiple blue and pink dots. I even experienced this on Apple website. When I click on "Shop", the images for Macs, iPod, iPhone, etc. are distorted or you can see some image ghosting. I haven't experienced this issue on other non-web applications like Office, Finder, etc.
    Do you think it is a problem with my machine, or my internet connection? My internet connection seems fine when I use other laptop or computer. I even tried browsing the web around 3 AM in the morning when the connections is fast, but the issue is persistent for web browsers (Safari and Chrome) and for App Store as well.
    I am using 13" rMBP, by the way.

    I can now observe the issue on websites that contain large graphics like Flickr. On another laptop (Windows), some websites are not loaded properly because of my internet connection. For my Mac, I think it would be best to test Safari and Chrome using a stable internet connection before asking for technical support just to rule out a possible cause of the problem. Also, some websites that I view, aside from the distorted images, contain codes (maybe HTML codes). This means that the web page is not loaded properly, right?
    My connection speed is 0.48 Mbps for download speed and 0.28 Mbps for upload. Is this too slow for Retina display?
    I bought my MacBook Pro during the first week of November and did not encounter any graphics issue until now. I used to browse the internet and the web images seems to be loaded properly.
    I do not encounter any graphics issues when using other non-web applications like Microsoft Office, Calendar, Photoshop, et al.

  • Viewing graphics on a Mac Retina display?

    I want to make some graphics that will be viewed on the web. I understand that lower resolution displays will display graphics larger than higher resolution displays. My question is with regards to how the graphics will be displayed on a Retina display that has 326 pixels per inch. My understanding has always been that you design graphics based on 72ppi for web.
    1. If I wanted to create graphics knowing that all of my users would have Retina displays, would I setup my .PSD files at 326ppi?
    2. Will graphics and websites designed at 72ppi appear really small on a Retina display?
    Thanks.

    You're asking the question kind of the wrong way.  Pixels per inch (ppi) has nothing to do with the web, it's all about the pixel count - the number of horizontal x the number of vertical pixels.  Trying to think in ppi just muddies the water.
    Assume that a typical web graphic is from a few hundred pixels to roughly a thousand pixels wide and tall and you won't be far wrong.
    But your thinking is not off base.  You actually SHOULD be thinking about designing graphics with greater pixel counts for higher resolution display - both by high ppi Retina displays and by users who might zoom in to see things more closely.  That's less common on a computer, but quite natural on a tablet.  Your web visitor wants to buy a product, he/she invariably just does a reverse pinch gesture to see it close up.  It's natural.
    Today's web graphics that are designed to show on a typical non-retina display monitor will not look as crisp as they could when displayed on a Retina display, because the display processor is upsampling them to be of sufficient size to see.
    A forward-thinking individual who values image presentation quality over minimizing download file size (which is becoming less important each day) might design his/her web graphics with 2 to 3 times the pixel count in each dimension normally used, then set up in the HTML to display on a typical monitor at a zoomed-out size.  That way when viewed on a super-high ppi display, or zoomed-in on a tablet, the graphics will look good.
    If you're all about making things look better on the web than the next guy, here's a whole new realm to work in. 
    Check out this page for an example of what I'm talking about in action:  http://Noel.ProDigitalSoftware.com/temp/WebImage/Test.html
    Perhaps someone here with a Retina display will describe how different the two images look.
    -Noel

  • Photoshop & Macbook Retina display

    Does Photoshop support the new Macbook Pro Retina display?

    Chris Cox wrote:
    If the user hasn't changed the OS scaling preferences, then Photoshop on a retina display will look just like Photoshop on a non-retina display.
    It just won't have smooth text and UI edges that the increased resolution offers, and the image won't be using the full resolution of the display because the OS will be doubling all the pixels automatically.
    MacOS on the new machines offers several choices for how to scale applications, including several choices for dealing with apps that don't know about high resolution displays.
    So what your writing is Apple realizes there is a problem running programs written for older low resolution displays. So they have programmed into their OSX system options to scale up application windows to simulate running on a lower resolution device.   Things will appear larger and less sharp then they actually are.  Whoop de do. Why pay for a retina display and not use its resolution. Scaling windows up in size is like using 1/4 the retina pixel for every pixel you display Apple scales it to use 4 of the retina display pixels so the pixels is as large as it would be on a 100dpi display.   Just buy a normal lower resolution and don't have the overhead required to scale windows up to simulate 100dpi to use a 226dpi display as a 100dpi device. Waste of money and resources. Applications like Photoshop need to be changed or run on a 100dpi display.
    Photoshop has no problem with images and high resolution displays.  Photoshop scales image windows content all the time. Its second nature for us to zoom images and pan about them and also change the window size on screen. The only problem there is is that Photoshop can not zoom its Dialogs and Paletts and bars  Photoshop at best offeres one, two or three size options for these and they were designed for displays that have a resolution around 100DPI.  On a 226 or 326 DPI display these areas will be so physically small you will have difficulty reading the small text and making out which small icon your seeing within these areas.
    I find all versions of Photoshop with the exception of CS6 quite useable on my 133DPI displays. The GUI is on the small side. With a magnifying glass or software magnifying glass to see the GUI I would think Photoshop would be useable on a retina display using its native 226Dpi resolution. Its the GUI physical pixel size that is a problem not the 226DPI resolution. If you double the resolution of a display the size of an object becomes 1/4 the size it was on the lower resolution display. If the displays pixel count is not increased the display will be 1/4 the size of the lower resolution display. let get Physical

  • Does photoshop elements 12 editor on app store support retina display

    Hello.
              I was wondering if anyone has downloaded photoshop elements 12 editor from the app store and does it support the retina display function. I know that the version you get from adobe ( elements 12) does not support this function. The reason I ask is that I have elements 11 and that does not support retina display and the screen image does not look crisp. I would of thought that because it comes from apple/app store themselves it should, but i don't won't to upgrade if it is still the same. I am running O S X 10.9.2 software if this helps.Cheers

    Hi Barbara I´ve done what you suggested and I´m having the same problem. Its freezed. Is there any way I can download the update? I´m
    stuck with a Photoshop that doesnt work. Adobe says that they cant help without a serial number and apple doesnt let me update. This is the most bizarre I have lived in terms of software.

  • Photoshop 100% 72dpi is too small on Mac Retina Display

    I see a lot of threads about this.
    Well, the other day I actually had a tech from Adobe on the line, and after much wailing and gnashing of teeth, he admitted, "It's a Photoshop issue".
    Apparently they are looking into it, just not quick enough. It is unfortunate because it seriously affects our ability to work effectively in Photoshop as you don't get the mostly accurate visual sizing.
    We can only hope... Come on Adobe, FIX IT!!!

    I am going to explain this one more time, it is also clear that some are not understanding my question, as I am making comparisons that are relevant, not just saying why is my Photoshop image soooo small...
    My question is, at 72dpi image, why is the image smaller in Photoshop than what it displays in the browser, both at 100%. So you are not answering my question, I am comparing the same image, at 100% in Photoshop to Chrome, Safari, Firefox... and in Photoshop the image is significantly smaller.
    Before, on previous Macs, the Photoshop image, at 100%, was similar to the same image, at 100%, in Chrome, Safari, Firefox.
    So, since the retina display came out, Photoshop has an issue, but not my Chrome, Safari, Firefox? And everyone is saying it's the retina display even though it did not affect Chrome, Safari or Firefox?
    NOTE to twenty_one - if Photoshop is displaying at 100%, one pixel is represented by one screen pixel, then Chrome, Safari and Firefox are representing them at 2 screen pixels. Right, as the image is double the size on screen? Plus, in Chrome, Safari, Firefox the image are super clear.
    NOTE to Semaphoric - Never said we've had retina display since the 90s but your obvious frustration must have made you assume what I wrote. Not very nice.

  • Can I use the same adapter for my ipad mini w/ retina display as I use for my iphone 4S?

    I have an iPad mini with retina display and an iPhone 4S.  Have both the small and large adapters (5W and 12W I believe) that came with the two products.  I am traveling abroad and want to know if I can just use the smaller adapter (little cube-shaped one, 5W) for both the ipad and the iphone.  OR, can I forgo taking the Apple adapters that were supplied, and instead use one of the travel adapters that has two 2.1-Amp USB ports?

    You can use the 5W to charge the iPhone, but if it charges the iPad Mini Retina, it will be slow, so you would have to turn it off and let it sit forever to get charged.  If you were going to take just one, take the 12 W on as you can use it to charge both devices without issue.
    I would recommend getting the Apple travel adapters if you are going abroad.  The 12W adapter should have a duck head you can pop off and put the international adaptation on there. http://store.apple.com/us/product/MB974ZM/B/apple-world-travel-adapter-kit

  • Can I use Windows compatible software on my new MacPro with Retina Display or do I need to purchase new software? If possible to use this software, how do I do this?

    Is it possible to use my Windows software like Quicken or Turbo Tax with my new Mac Pro with Retina Display or will I need to purchase all new
    software. If there is a way, exactly how do I do it? I am new to Mac and cannot seem to make anything work.
    Thank you,
    Bobbie

    Install Windows either with BootCamp or virtualization software
    Otherwise a Mac is not able to run Windows software
    Allan

Maybe you are looking for