Tengo algunos problemas con el icono PPI. Por ejemplo, cuando hago un ícono para una aplicación de iPhone 6, sé que el ícono tendrá 326 PPI. Pero si hago un ícono de 256x256 px que se puede usar en iPhone, Android y en la Web en diferentes resoluciones de pantalla, ¿cuál PPI uso? ¿Existe una "fórmula" para calcular el PPI en función del tamaño de la imagen?
Quiero hacer un conjunto de íconos para la venta, pero quiero evitar crear múltiples iguales con diferentes PPI para poder vender paquetes sin abrir. Estoy usando Photoshop CC porque aún no estoy familiarizado con Illustrator.
Cuando diseña para digital, no necesita usar DPI. Solo preparas el archivo en su tamaño 'natural', y en el doble de ese tamaño para pantallas retina.
Entonces, su ícono de salida sería 250x250 para web y 500x500 para iPhone.
Puedes hacerlo solo con el de alta resolución, redimensionándolo. Pero cuando trabaja para la web, es importante mantener un tamaño de archivo pequeño (¡las redes móviles son caras!), por lo que se recomienda hacer dos copias y usar CSS para orientar la densidad de la pantalla.
Puede encontrar más información sobre cómo preparar activos para pantallas de mayor densidad de píxeles aquí: Cómo crear gráficos Retina para sus diseños web
La mejor manera de crear íconos para todos los PPI sería crear gráficos vectoriales y exportarlos como SVG o crear una fuente de ícono. Dado que la densidad de píxeles de los dispositivos cambia, no puede planificarlos todos fácilmente, por lo que proporcionará muchas imágenes duplicadas en diferentes tamaños.
Sin embargo, si lo hace, guardar una red y una del tamaño de una retina cubrirá la mayoría de sus bases. Y para densidades de píxeles aún más altas, una imagen con calidad de retina se mostraría decentemente. Vector es definitivamente una necesidad para una calidad perfecta todo el tiempo. Además, proporcionar íconos basados en vectores a través de SVG o una fuente de ícono permitiría a las personas usar sus íconos en cualquier tamaño (no solo los tamaños en los que guardó la imagen) y podrían usar CSS para cambiar cosas como el color del ícono (sería útil para hovers porque, de lo contrario, es necesario que exista una versión regular y hover del icono).
Si te sientes cómodo con Photoshop, puedes usar este truco para exportar gráficos SVG desde vectores dibujados en el programa: http://hackingui.com/design/my-workflow-to-export-svgs-out-of-my-photoshop- archivos de diseño/
Sin embargo, el proceso de dibujar vectores en Photoshop no es tan diferente al de Illustrator.
Yisela
Gian
Yisela
Gian
Voxmujer