3

I'm a web designer, and my old (non retina) Macbook, Photoshop used to produce clear images and text both in Photoshop and out of Photoshop when the final images had been saved as a png or jpg.

However, ever since moving to the retina MacBook i've been completely stumped by the fact that my text and everything else in the images are coming out pixellated, which doesn't help at all.

So, for example i'm creating a logo which is just text in a font, i'm editing at 200% which is the real size of the image i believe for the Macbook retina, the text appears blurry or pixelated and I can never seem to get it to sharpen up? This is not a case of changing the text to sharp/smooth etc because even then no matter what I choose the text is still pixellated. So when I go to save the image as a png or jpg the image, of course is still pixellated. The issue is it's not like it can go unnoticed either, it's that bad.

Am I missing some settings here? Surely graphic designers aren't putting up with this?

Sorry if this seems like a really stupid question, but I really can't get this working, so if anyone can help then it'd be really appreciated!

Improve this question
7
  • It's also worth noting that there is no difference in result when running Photoshop in low resolution mode. I am running Photoshop CC.
    – Jcsh
    Commented Jun 18, 2014 at 2:31
  • When you say editing at 200% how did you get to 200%? If you doubled the size of a raster image than that's your issue.
    – Ryan
    Commented Jun 18, 2014 at 3:07
  • @Ryan Editing at 200% zoom shows me the exact size of the image and what it will look like when I save it as an image. The result is blurry, even though the image is at its actual size at 200%? I don't get it.
    – Jcsh
    Commented Jun 18, 2014 at 3:44
  • 2
    You should not "edit at 200%" you should create the image at twice the necessary size and edit at 100%. Retina images are double the size, not zoomed in 200%. When you edit a double-sized image at 100%, then save for non-retina screens (50%) the image will be sharper. If you are looking for pixel accuracy, then you need 2 images each @ size, not using zoom. Retina screens do not use zoom.
    – Scott
    Commented Jun 18, 2014 at 3:53
  • @Scott What would the result of this be for non retina users? Double the size images?
    – Jcsh
    Commented Jun 18, 2014 at 12:26

1 Answer 1

Reset to default
4

The confusion begins when you think you need to adjust how you work simply because you are working on a retina display. You do not. Treat your machine as you always have. Don't adjust your workflow due to the hardware you are using. Basically forget you are working on a retina display.

Now, to support retina display in projects, you need 2 images - one standard and one double-sized (@2) for anyone else using a retina system. To this end, I find it's always best to start with the large image, the double-sized version.

So, if you are designing a web site and need a 500x100px header image, you start with a 1000x200px image and design the header. When you are done, you can reduce the image by 50% to get the 500x100px image and save that. If, after reduction, there are detail areas which need adjusting, you can do that before saving. By starting with the @2x image you design for retina viewing. Reducing 50% then designs for all non-retina displays.

Retina technology doesn't use any zoom to alter image appearances. It actually swaps images. If you have images with @2x titles, even in a web site design, retina displays pull those larger images and use those, they do not simply enlarge (or zoom) the standard image 200%.

Improve this answer
1
  • the @2x is 'automatic' only in apps. On a web site, one needs to set up their CSS accordingly to handle them. If the image is 'normal', the browser does double the pixels as best as it can (albeit leaving it the same 'physical' size compared to a non-retina screen)
    – DA01
    Commented Sep 24, 2014 at 1:22

Not the answer you're looking for? Browse other questions tagged or ask your own question.