Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
Im currently designing an app and exporting images for the developers. I am struggling to know that if i create an icon that on my retina screen shows at say 40px X 100px, when i export, should i create the graphic again but with 20 x 50px instead so they are "real" css pixels?
Same goes for fonts. I have one at 40pt on retina, but should i make them 20pt?
Thanks for the help!
In general terms. A retina device declares one thing and does another.
With the data you are providing, (if you are working in vectors) start with the "real css values", 20x50px. Then provide two more images, a 2x and a 3x. 40x100px and 60x150px.
Regarding the fonts they are in vectors, make some tests in CSS itself, because if you are simulating them in a Photoshop file, the pixel size depends totally on the resolution declared on your working file.
I personally do not use pt. In the printed version, the pts become real units, absolute units, not relative to the device.
I think it's worth noting the HTML meta viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Which allows developers to more easily program responsive websites and web apps on high res devices.
What @Rafael said:
A retina device declares one thing and does another
is exactly right... i.e. CSS pixels are not always equal to the actual rendered pixels. I would take a look at this article and the "A Pixel is Not a Pixel" section of the meta viewport article.
As @Rafael also mentioned, fonts are vector files so they will look good (for the most part) no matter how they are rendered.
As for the images, websites can be programmed to swap out an image for a higher quality version (2x or 3x) if a retina device is detected. This is why you would provide multiple to the developer. You can also, depending on what's in your image, save it as an SVG, Scalable Vector Graphic, which will make the developer's job a bit easier as he or she can just use one image file.
This might be too much detail for you, but I figured I'd add it for those who are interested in more details. Even as a designer I think it's good to know, at least at a high level, what's going on in the browser.
Don't worry about the fonts as this will just automatically happen depending upon the device. Be sure to supply a mock up and at 100%.
Images best to plan that they all can be doubled / tripled evenly. 10, 20, 30 etc. artwork at 100% as above then export as needed if using an app like Sketch.
Hope this helps.
