Iconos de aplicaciones de iPhone: ¿Radio exacto?
Estoy intentando crear el ícono para mi aplicación de iPhone, pero no sé cómo obtener el radio exacto que usan los íconos del iPhone. He buscado y buscado un tutorial o una plantilla pero no puedo encontrar ninguno.
Estoy seguro de que soy un idiota, pero ¿cómo consigues que las esquinas redondeadas queden exactamente bien con tu ícono de Illustrator o Photoshop?
Editar:
¿Cuál es el radio del iPad Retina?
Puede crear cuatro íconos (a partir de hoy) para su aplicación y todos pueden tener un aspecto diferente, no necesariamente basado en la imagen de 512x512.
- Radio de esquina para el icono de 512x512 = 80 (iTunesArtwork)
- Radio de esquina para el ícono de 1024x1024 = 180 (iTunesArtwork Retina )
- Radio de esquina para el icono de 57x57 = 9 (iPhone/iPod Touch)
- Radio de esquina para el ícono de 114x114 = 18 (iPhone/iPod Touch Retina )
- Radio de esquina para el icono de 72x72 = 11 (iPad)
- Radio de esquina para el ícono de 144x144 = 23 (iPad Retina )
Si crea un conjunto de íconos personalizados, puede establecer la UIPrerenderedIconopción en verdadero en su archivo info.plist y no agregará el efecto de brillo, pero colocará un fondo negro debajo y aún redondeará las esquinas de la imagen con estos radios de esquina. entonces, si el radio de la esquina de cualquiera de los íconos es mayor, se mostrará negro alrededor de los bordes/esquinas.
Editar: vea el comentario de @ devin-g-rhode y podrá ver que cualquier tamaño de icono futuro debe tener una 1:6.4relación entre el radio de la esquina y el tamaño del icono. También hay una muy buena respuesta en https://stackoverflow.com/a/29550364/396005 que tiene la ubicación de los archivos de máscara de imagen utilizados en el SDK para redondear las esquinas de los iconos.
Para agregar un archivo compatible con retina, use el mismo nombre de archivo y agregue '@2x'. Entonces, si tuviera un archivo para mi ícono de 72x72 llamado icon.png, también agregaría un archivo PNG de 114x114 llamado [email protected] al proyecto/objetivo y Xcode lo usaría automáticamente como ícono en una pantalla retina. Puede ver esto en acción en la página Resumen del destino de la aplicación si lo ha hecho correctamente. Lo mismo funciona para las imágenes de lanzamiento. Utilice launch.png a 320x480 y [email protected] a 640x960.
Después de probar algunas de las respuestas de esta publicación, consulté con Louie Mantia (ex diseñador de Apple, Square e Iconfactory) y todas las respuestas hasta ahora en esta publicación son incorrectas (o al menos están incompletas). Apple comienza con el ícono de 57 px y un radio de 10, luego aumenta o disminuye desde allí. Por lo tanto, puede calcular el radio para cualquier tamaño de ícono usando 10/57 x new size(por ejemplo 10/57 x 114, da 20, que es el radio adecuado para un ícono de 114px). Aquí hay una lista de los íconos más utilizados, las convenciones de nomenclatura adecuadas, las dimensiones en píxeles y los radios de las esquinas.
- Icono1024.png - 1024px - 179.649
- Icono512.png - 512px - 89.825
- Icono.png - 57px - 10
- [email protected] - 114px - 20
- Icono-72.png - 72px - 12.632
- [email protected] - 144px - 25.263
- Icono-Pequeño.png - 29px - 5.088
- Icono-Pequeñ[email protected] - 58px - 10.175
Además, como se mencionó en otras respuestas, en realidad no desea recortar ninguna de las imágenes que usa en el binario ni enviarlas a Apple. Todos deberían ser cuadrados y no tener transparencia. Apple enmascarará automáticamente cada ícono en el contexto apropiado.
Sin embargo, saber lo anterior es importante para el uso de íconos dentro de la interfaz de usuario de la aplicación, donde debe aplicar la máscara en el código o prerenderizada en Photoshop. También resulta útil a la hora de crear obras de arte para sitios web y otro material promocional.
Lectura adicional:
Neven Mrgan sobre tamaños de íconos adicionales y otras consideraciones de diseño: tamaños de íconos de aplicaciones ios
Marc Edwards de Bjango sobre las diferentes opciones para crear roundrects en Photoshop y por qué es importante: roundrect
Documentos oficiales de Apple sobre consideraciones de diseño y tamaño de íconos: íconos e imágenes
Actualizar:
Hice algunas pruebas en Photoshop CS6 y parece que 3 dígitos después del punto decimal son suficiente precisión para terminar exactamente con el mismo vector (al menos como lo muestra Photoshop con un zoom de 3200%). La herramienta Redondear Rect a veces redondea la entrada al número entero más cercano, pero puedes ver una diferencia significativa entre 90 y 89,825. Y varias veces la herramienta Rectángulo redondeado no redondeó y de hecho mostró varios dígitos después del punto decimal. No estoy seguro de qué está pasando allí, pero definitivamente está usando y almacenando el número más preciso que se ingresó.
De todos modos, actualicé la lista anterior para incluir solo 3 dígitos después del punto decimal (¡antes había 13!). En la mayoría de las situaciones, probablemente sería difícil distinguir entre un ícono transparente de 512 px enmascarado en un radio de 90 px y uno enmascarado en 89.825, pero el antialiasing de la esquina redondeada definitivamente terminaría siendo ligeramente diferente y probablemente sería visible en ciertas circunstancias, especialmente si Apple aplica una segunda máscara más precisa, en código o de otra manera.
Veo mucha discusión sobre "px", pero nadie habla de porcentajes, que es el número fijo con el que desea calcular.
El 22,37% es el porcentaje clave aquí. Multiplique cualquiera de los tamaños de imagen mencionados anteriormente por 0,2237 y obtendrá el radio de píxel correcto para ese tamaño.
Antes de iOS 8, Apple utilizaba menos redondeo, utilizando un 15,625%.
EDITAR : Gracias @Chris Prince por comentar con el porcentaje de radio de iOS 8/9/10: 22,37%
Importante: ecuación del icono de iOS 7
Con el próximo lanzamiento de iOS 7, notarás que se ha aumentado el radio del icono "estándar". Intente hacer lo que Apple y yo sugerimos con esta respuesta.
Parece que para un ícono de 120px la fórmula que mejor representa su forma en iOS 7 es la siguiente superelipse:
|x/120|^5 + |y/120|^5 = 1
Obviamente puedes cambiar el 120número con el tamaño de icono deseado para obtener la función correspondiente.
Original
Debes proporcionar una imagen que tenga esquinas de 90° (es importante evitar recortar las esquinas de tu ícono; iOS lo hace por ti cuando aplica la máscara de redondeo de esquinas) ( Documentación de Apple )
El mejor enfoque es no redondear las esquinas de los íconos en absoluto. Si configura su ícono como un ícono cuadrado, iOS automáticamente superpondrá el ícono con una máscara predefinida que establecerá las esquinas redondeadas apropiadas.
Si configura manualmente esquinas redondeadas para sus íconos, probablemente se verán rotos en este o aquel dispositivo, porque la máscara de redondeo cambia ligeramente de una versión de iOS a otra. A veces tus íconos serán un poco más grandes, a veces (suspiro) un poco más pequeños. El uso de un ícono cuadrado lo liberará de esta carga y se asegurará de tener un ícono siempre actualizado y atractivo para su aplicación.
Este enfoque es válido para cada tamaño de icono (iPhone/iPod/iPad/retina) y también para la obra de arte de iTunes. Seguí este enfoque un par de veces y, si quieres, puedo publicarte un enlace a una aplicación que utiliza íconos cuadrados nativos.
Editar
Para comprender mejor esta respuesta, consulte la documentación oficial de Apple sobre los íconos de iOS . En esta página se indica claramente que un ícono cuadrado obtendrá automáticamente estas cosas cuando se muestre en un dispositivo iOS:
- Esquinas redondeadas
- Sombra paralela
- Brillo reflectante (a menos que impidas el efecto brillo)
Por lo tanto, puede lograr cualquier efecto que desee simplemente dibujando un ícono cuadrado simple y completando contenido en él. El radio de la esquina final será algo similar a lo que dicen las otras respuestas aquí, pero esto nunca estará garantizado, ya que esos números no forman parte de la documentación oficial de Apple en iOS. Te piden que dibujes iconos cuadrados, así que… ¿por qué no?
