Acabo de recibir una nueva Macbook Pro con Retina y no sé cómo atacar mis PSD. Si estoy diseñando un sitio que tiene un tamaño de fuente de 14 px, ¿debo configurarlo en 28 px en Photoshop para obtener el aspecto que tendrá en CSS? O si mi sitio web debe tener un encabezado de 60 px de alto, ¿debería hacerlo de 120 px en Photoshop?
Supongo que estoy confundido porque el CSS sigue siendo el mismo, pero ¿debería duplicar todo en Photoshop para obtener el aspecto que tendría en CSS?
Para las imágenes, entonces sí, querrás una versión de la misma imagen. Un tamaño original y la versión más grande tiene el doble de tamaño. Hay un par de formas en las que puedes hacer que tu imagen funcione cuando haces zoom. A la manera de Javascript, querrás guardar las imágenes como myimage.jpg y myimage@2x.jpg. Luego deberá descargar retina.js desde http://imulus.github.io/retinajs/ y luego incluir
<script src="js/retina.js"></script>.
también puedes hacer esto con 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
}
}
Me mantendría alejado de cortar un PSD y tratar de hacer que todo sea "Retina".
t.niese