Escale capas en un archivo psd en un 200 % para retina iPad

Tengo un archivo PSD que mi diseñador me dio ajustado para las dimensiones del iPad. Necesito apoyar el iPad retina también. ¿Cuál es la mejor manera de crear las imágenes retina 2x? ¿Debo escalar las capas en un 200% y luego cortar el archivo PNG? Me imagino que esto sería mejor que simplemente ampliar el archivo PNG. Si es así, ¿cuál es la mejor manera de escalar capas en Photoshop? Probé Imagen -> Tamaño de imagen, pero eso también parece producir bordes irregulares. La "escala según el contenido" también distorsiona algunas de las líneas rectas del icono.

Gracias.

A veces, simplemente proporcionar una sola imagen al 150% funcionará. iOS aumentará automáticamente el tamaño (sin demasiada pérdida de calidad) para retina y reducirá el tamaño para iPad normal (siempre que haya configurado las imágenes para que tengan un tamaño específico en IB).

Respuestas (4)

La mejor manera absoluta de trabajar es crear el documento utilizando solo formas vectoriales, estilos de capa y (si es necesario) objetos inteligentes que tengan una resolución lo suficientemente alta como para cubrir el tamaño de @2x.

Si se construye correctamente, su documento se puede escalar hacia arriba y hacia abajo sin pérdida alguna: Photoshop volverá a representar las formas y los estilos de capa a tamaño, por lo que serán lo mejor posible, con dos advertencias:

  1. Las propiedades de estilo de capa tienen valores que son enteros. La reducción de escala los redondeará. Un radio de desenfoque de 3 se convertirá en 2 cuando se reduzca un 50 %, porque 1,5 no es posible. Ah, y asegúrese de tener los estilos de escala activados cuando escala el documento.

  2. El calado de la máscara de forma no se escala al escalar el documento.

Si necesita texturas, puede hacerlo con capas de patrón (con una máscara de forma vectorial), un estilo de capa de patrón o un objeto inteligente que tenga una máscara vectorial.

Debe evitar el escalado de mapas de bits a toda costa. Esto significa que nunca debe escalar los activos PNG finales... necesita que el documento de Photoshop se cree correctamente y deberá volver a exportar todos los activos.

Aquí hay una comparación entre dos formas comunes de escalado de mapa de bits y escalado correctamente usando capas de forma vectorial y estilos de capa.

ingrese la descripción de la imagen aquí


He escrito más sobre el diseño para Retina aquí: Diseño para pantalla Retina

Desafortunadamente, para los datos ráster, el aumento de tamaño siempre resultará en una pérdida de calidad.

Si el archivo .psd está configurado con capas vectoriales o de forma, entonces no debería haber problemas al aumentar el tamaño. Imagen > Tamaño de imagen e ingrese 200%.

Es preferible trabajar con capas vectoriales o de forma siempre que sea posible y trabajar al tamaño de la retina (2x).

La reducción de los datos ráster generalmente mantendrá (y quizás mejorará) la apariencia.

Su mejor apuesta puede ser volver al diseñador y explicarle el problema y pedirle un archivo más grande con la calidad adecuada.

La "escala consciente del contenido" es para estirar en lugar de ampliar. Así que esa no es una opción.

Realmente depende de cómo esté configurado su archivo de Photoshop, si, por ejemplo, hay texturas que no necesitan escalarse o si todo está diseñado en estilos de capas.

Entonces, el mejor método rápido y sucio sería usar Image Interpolation: Nearest Neighbor, ya que esto simplemente duplicaría todos los píxeles. Pero la calidad puede describirse simplemente como "no borrosa". Pero no habrá líneas irregulares.

El camino largo hacia la calidad es tratar de aumentar la escala (quizás también verifique los estilos de capa de escala) y luego solucione problemas como texturas, estilos de capa que están desactivados o tamaños de fuente. Una vez más, dependerá en gran medida de la escalabilidad del archivo de Photoshop. Pero este es el tipo de trabajo en el que un diseñador es bueno, si se me permite decirlo.

Gracias. ¿La "Interpolación de imagen" es cuando haces "Imagen -> Tamaño de imagen ..."?
Sí, pero también puede cambiar esto en la Configuración (Cmd+K) para que funcione, por ejemplo, en la transformación.

Estos son todos buenos consejos. Una cosa más que mi diseñador me dijo que hiciera era: 1) duplicar la capa relevante en un nuevo archivo 2) ahora convertir la capa en un objeto inteligente 3) luego escalar el tamaño de la imagen hasta 2x 4) exportar a PNG como antes

Esto produce resultados notablemente mejores que simplemente cambiar el tamaño de la imagen directamente. Tal vez si miro muy de cerca, podré ver alguna imperfección, pero se ve bien a simple vista en el dispositivo.

Tenga cuidado con los objetos inteligentes creados en Photoshop: se escalan como un mapa de bits dentro del documento, por lo que no son mejores que una capa de mapa de bits. (Sin embargo, se escalan como vectores/mapas de bits/estilos de capa si abre el objeto inteligente).