Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

This question already has an answer here:

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 settings it to 28px in Photoshop to get what it will look like in CSS? 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 should I be doubling up on everything in Photoshop to get what it would look like in CSS?

share|improve this question

migrated from stackoverflow.com Apr 18 at 19:46

This question came from our site for professional and enthusiast programmers.

marked as duplicate by Yisela Apr 30 at 3:16

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

    
First of all Photoshop is an image editing software and the main purpose is not for creating web designs. Having that said, there is no general rule how you have to set the font size in pixels, as this depends what resolution you set for the image and on which scale you look at it. –  t.niese Apr 18 at 17:35

1 Answer 1

For images, then yes you would want to version of the same image. One original size and the larger version being twice the size. There are a couple of ways you can get your image to work when zooming in. Javascript way, you will want to save the images like myimage.jpg and myimage@2x.jpg. You will then need to download retina.js from http://imulus.github.io/retinajs/ and then include

<script src="js/retina.js"></script>.

you can also do this with css

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
header h1 a {
    background-image: url(images/myimage@2x.png);
    background-size: 164px 148px; //original size image
}
}

I would stay away from slicing a PSD and trying to make everything "Retina".

share|improve this answer

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