6

I just got a new Macbook Pro with Retina and I'm confused about how to attack my PSD's.

If I'm designing a site which has 14px font size, should I be creating it at 28px in Photoshop to see what it will look like in CSS on a standard display?

Or if my website should have a 60px tall header, should I make it 120px in Photoshop?

I guess I'm confused because the CSS stays the same, but I'm wondering if I should be doubling up on everything in Photoshop to get what it would look like in CSS on a non-retina display?

Improve this question
0

4 Answers 4

Reset to default
5

If you are asking:

"I just got a retina display and noticed how blurry some web graphics look even when they are saved at the actual size they are used. Should one save images for the web twice the size because there are retina displays out there?"

Then this is my answer:

You are correct. You should make your images for the web twice the size you actually need them but not because you have now a retina display but because there are devices out there with retina displays like yours that will be used to browse the website you are creating. But you should set the dimensions of your images in CSS at the actual size (not the double size). For example

  • You need a 20x20 icon
  • design it and save it as a 40x40 image
  • when you use it on the web page, indicate using CSS that it is a 20x20 image

The image will be displayed as a 20x20 image but since retina has a higher density it will use 4 "physical" pixels (2x2) to display each of the "conventional" pixels.

When the page is viewed on screens with regular density, the browsers will down sample the image so they can display every "conventional" pixel using only one "physical" pixel. The image will still be 20x20. The difference will be (most of the time) unnoticeable.

If the difference is noticeable due to the down sampling introducing artifacts I suggest using media queries in to CSS to provide different images depending on the resolution of the display.

Physical and conventional are not standard terms. I made them up.

Improve this answer
6
  • 3
    I don't think the OP is asking how to create images for retina displays but instead how to create images on a retina display for standard displays.
    – Dom
    Apr 18, 2014 at 16:17
  • Oh I see. My answer still applies though. When designing for web (either using a Retina display or not), since Retina displays are out there, graphic elements should be saved double the size (that will be specified in CSS) and/or provide two different images using media queries. One never knows what kind of monitor or device the visitor might have.
    – cockypup
    Apr 18, 2014 at 16:37
  • If the question is "does having a retina display on a system imply that Photoshop tells me my image is 20x20 when it is really 40x40", I think the answer is "no."
    – horatio
    Apr 18, 2014 at 18:02
  • 1
    I think this answer is very misleading. Whatever OP chooses to design, the fact they are now using a retina display should not change the dimensions they create images at. If you want to design for retinas whilst using a retina display, you choose exactly the same dimensions are if you weren't using a retina display. If you just want to design for non-retinas whilst using a retina display, you choose exactly the same dimensions as if you weren't using a retina display
    – OGHaza
    Apr 21, 2014 at 14:26
  • Edited my answer. But nevertheless it is a good practice to save images for the web twice the size they will be used (or serve different images for different resolutions).
    – cockypup
    Apr 21, 2014 at 14:47
3

I think you are asking about how to design whilst using a retina display, rather than asking how to design for retina displays. You don't need to change anything about the dimensions you choose.

If you create a 120px header on your retina display, it will appear as 120px high on a non-retina display - you don't need to change your behaviour because you're using a retina display.

Mac OS X scales everything you see behind the scenes, so when you create a 100x100px image in photoshop it is actually occupying 200x200 pixels on your display. If you double the pixels yourself, you'd have a 200x200px image displaying at 400x400px - which is not your goal.

If you want some proof of this, try creating a 100x100 image in photoshop, then use CtrlShiftCmd4 to take a screenshot of it. Now CtrlV in a new layer, the screen shot will be twice the dimensions of the image.

If you want to design for retina displays, any advice given regarding dimensions has nothing to do with what sort of display you are using.

Just to try and clarify my point:

I'm wondering if I should be doubling up on everything in Photoshop to get what it would look like [...] on a non-retina display?

To produce something that looks like it would on a non-retina, you produce exactly what you did before.

To produce a double resolution graphic, that only retinas can fully display (although of course can be scaled by a browser on a non-retina), you would indeed double the resolution.

But my point is that you would have to do that even if you weren't using a retina display right now.

Improve this answer
3
  • But wouldn't you still want to export a 16x16 icon at 32x32 for macs? I guess I'm a little confused about how this works.
    – Hanna
    Apr 21, 2014 at 16:10
  • @Johannes Yes, to fully make use of retina resolution, but that's my point you said "for macs", if you choose to support retinas you'd want to export at 2x resolution whether you're working on a retina display, a regular display, or an Osbourne 1. OP isn't asking about choosing dimensions for retinas, they're asking if their behaviour needs to change now that they are designing on one.
    – OGHaza
    Apr 21, 2014 at 16:26
  • @Johannes However, the more I repeat it the more I suspect he might now want to design for retinas, because now he has one himself. But I do think it would be easy to be confused over the fact when you create a 100x100 image in photoshop, your screen renders it at 200x200, so I had figured that was the misunderstanding. Ah well..
    – OGHaza
    Apr 21, 2014 at 16:28
2

You're right - at this moment in time, there is no easy way around retina displays other than to double the resolution of your PSDs and work with 2x as many pixels.

It's actually a lot easier than it sounds, and lends itself well to a non-destructive working process (e.g. using Photoshop polygons for standard shapes, vectors for solid icons and compound shapes, implementing layer effects and blending modes, using Smart Objects for raster graphics etc). I'm a big proponent of avoiding rasterization unless you have no other choice, just in case of instances like this where your work needs to be scaled or resized - it's always good to be prepared for these things!

In terms of CSS implementation, see cockypup's answer for more detail.

Best of luck, there's nothing to it. :)

Improve this answer
0
-2

Maybe the same size with 150dpi of resolution, it will be up and ready.

Improve this answer
2
  • 1
    Hi there, and welcome to GD! This is not really a substantial answer, that helps the OP very much. Please feel free to edit your answer to be more informative. Otherwise, it is likely that your answer will be removed as a low quality.
    – benteh
    Apr 21, 2014 at 22:33
  • Thank you @Isaiaseg. This is exactly what I was trying to get confirmation for and wasn't able to find. As if it was totally obvious. I appreciate your sharing it. What it says is that you can double an image size either by doubling its pixel size so that 100px x 100px becomes 200px x 200px or by doubling its resolution so that 72dpi becomes 144dpi. I hope this makes sense. Thanks again!
    – user3104978
    Sep 17, 2015 at 17:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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