Working with Retina on a standard resolution

[dkwel]

I convert Photoshop designs into html, all was fine until a few weeks ago when the designer got a shiny new retina macbook. The psd's now come over HUGE, if I simply resize I lose some of the crispness, the text if I do not have the font installed gets converted to pixel data and look awful.

What do other people do, the designer says that he is creating the files at 1300px wide but when they come to me they show much bigger on my screen as I am standard res.

 

[ChrisHirst]

I convert Photoshop designs into html,

Assuming you are using Photoshop "slicing and dicing", the answer is DON'T, and for the fonts, you can:

install the required font
or
ask the designer to embed them in the PSD
or
tell the designer to only use fonts that ARE available as a Windows font.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[dkwel]

I don't understand? I use photoshop to grab the assets for the page templates, such as site images, background images, transparent pngs etc.

 

[ChrisHirst]

But do then write 'proper' HTML and CSS or let Photoshop do it's wort?

And

what is "standard res. "?

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[spamjim]

Google leads to a lot of tips via "retina web design".

Consider:

http://retinajs.com/

 

[dkwel]

I don;t think my original question came over well, I am happy creating retina graphics for websites and am fluid with html to create 'proper' templates.

My issue is the psd file the designer is sending over to me, which he doesn;t know how to fix.

Say we have a website that is 1300px wide. The designer will design in PS at 1300px and it looks perfect on his screen. I have a standard 64bit windows 7 machine, no retina display. When I open his psd on my machine the file isn't 1300px wide, but around 2000px wide.

I am assuming that this is because of his retina display.

Googling for this simply returns lots of 'how to create retina graphics' results which is not what I want, so I wondered whether anyone else has experienced this issue?

 

[spamjim]

A 1300px image is a 1300px image, no matter what you display it on. Your original question never mentioned 2000px. Your original message also indicated that you were not sharing the same fonts. This influenced the manner in which your question was answered.

What do you mean "around 2000px wide"? How are you measuring the pixel dimensions? What does the "Image->Image Size" dialog show?

Is Photoshop's "View->Pixel Aspect Ratio" altered from the default "square" for this image?

 

[ChrisHirst]

So you are talking about the "pixel density" NOT dimensions, 1200 pixels is 1200 pixels but if the


"Retina" displays have a much higher PPI (Pixels per Inch) than SVGA displays have

http://demosthenes.info/blog/564/Understanding-Pixel-Density-Resolution-and-Retina-Displays

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[audiopro]

If a 1200px x 1200px picture is displayed on a monitor with a resolution of 72px/inch, the displayed picture will be 16 inches square.
On a monitor with a resolution of 300px/inch it will be 4 inches square.
The size of the displayed image will always reflect the resolution of the screen on which it is displayed.
Retina is just a modern term for high resolution.

Keith

http://www.studiosoft.co.uk