organizar - Iconos de aplicaciones de iPhone-¿Radio exacto?

ordenar iconos iphone alfabeticamente

Question

Estoy tratando de crear el ícono para la aplicación de mi 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 uno.

Estoy seguro de que solo soy un imbécil, pero ¿cómo logra que las esquinas redondeadas sean exactamente correctas con su icono de Illustrator o Photoshop?

Editar:

¿Cuál es el radio para el iPad Retina?

Answer 1

Actualización (a partir de enero de 2018) para los requisitos del icono de la aplicación:

https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/

Incluye:

Mantenga las esquinas de los iconos cuadrados . El sistema aplica una máscara que redondea las esquinas de los iconos automáticamente.

y

Mantenga el fondo simple y evite la transparencia . Asegúrate de que tu ícono esté opaco, y no abarrotes el fondo. Dale un fondo simple para que no supere a otros íconos de aplicaciones cercanos. No es necesario rellenar el icono completo con contenido.

Answer 2

Importante: la ecuación del icono de iOS 7

Con la próxima versión de iOS 7 notará que el radio del icono "estándar" se ha incrementado. Así que trata de hacer lo que Apple y yo sugerimos con esta respuesta.

Parece que para un ícono de 120 píxeles la fórmula que mejor representa su forma en iOS 7 es la siguiente superelipse:

|x/120|^5 + |y/120|^5 = 1

Obviamente, puede cambiar el número 120 con el tamaño de icono deseado para obtener la función correspondiente.

Original

Debe proporcionar una imagen que tenga esquinas de 90 ° (es importante evitar recortar las esquinas de su ícono; iOS lo hace por usted cuando aplica la máscara de redondeo de esquinas) ( IconsImages )

El mejor enfoque es no redondear las esquinas de sus iconos en absoluto. Si configura su icono como un icono cuadrado, iOS superpondrá automáticamente el icono con una máscara predefinida que establecerá las esquinas redondeadas apropiadas.

Si configura manualmente las esquinas redondeadas para sus íconos, probablemente se vean rotos en este o ese dispositivo, porque la máscara de redondeo cambia ligeramente de una versión de iOS a otra. A veces los iconos serán un poco más grandes, a veces (suspiros) un poco más pequeños. El uso de un icono cuadrado lo liberará de esta carga, y se asegurará de tener un icono 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 las ilustraciones de iTunes. Seguí este enfoque un par de veces y, si lo deseas, puedo enviarte un enlace a una aplicación que utiliza iconos cuadrados nativos.

Editar

Para comprender mejor esta respuesta, consulte la IconsImages oficial de IconsImages . En esta página se indica claramente que un icono cuadrado obtendrá automáticamente estas cosas cuando se muestre en un dispositivo iOS:

1. Esquinas redondeadas
2. Sombra paralela
3. Brillo reflectante (a menos que evites el efecto de brillo)

Por lo tanto, puede lograr el efecto que desee simplemente dibujando un icono de cuadrado liso y rellenando el contenido en él. El radio de la esquina final será algo similar a lo que dicen las otras respuestas aquí, pero esto nunca se garantizará, ya que esos números no son parte de la documentación oficial de Apple en iOS. Te piden que dibujes íconos cuadrados, así que ... ¿por qué no?

Answer 3

Al diseñar los íconos de mi aplicación con Photoshop, descubrí que no hay un radio de esquina entero que se ajuste exactamente a la máscara del dispositivo.

Lo que hago ahora es crear un proyecto vacío con Xcode, establecer un archivo PNG completamente blanco como icono, y desactivar el brillo y el biselado preestablecidos. Luego, ejecuto la aplicación y tomo una captura de pantalla de la pantalla de inicio. Ahora, puede crear fácilmente una máscara a partir de esa imagen, que puede usar en Photoshop. Esto te dará esquinas perfectamente redondeadas.

Answer 4

Como otros han dicho, no quieres doblar tus esquinas. Desea enviar gráficos cuadrados planos (sin capas o alfa). Apple cambió la máscara que usan para redondear tus esquinas en iOS7 y luego nuevamente en iOS8. Puede encontrar estas máscaras dentro de su paquete de aplicaciones Xcode. La ruta cambia con cada nueva versión de SDK que lanzan. Entonces, te mostraré cómo siempre puedes encontrarlo.

find /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs -name ''MobileIcons.framework''

En este mismo momento, la ruta encontrada por ese comando es /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/MobileIcons.framework pero no confia en eso Usa el comando para encontrarlo tú mismo.

Esa ruta apunta a un directorio con estos archivos (nuevamente, en el momento de esta publicación)

./AppFolderBadgeIconMask-128_1only_.png
./AppFolderBadgeIconMask-16_1only_.png
./AppFolderBadgeIconMask-256_1only_.png
./AppFolderBadgeIconMask-32_1only_.png
./AppFolderBadgeIconMask-512_1only_.png
./AppFolderBadgeIconOverlay-128_1only_.png
./AppFolderBadgeIconOverlay-16_1only_.png
./AppFolderBadgeIconOverlay-256_1only_.png
./AppFolderBadgeIconOverlay-32_1only_.png
./AppFolderBadgeIconOverlay-512_1only_.png
./AppFolderBadgeIconShadow-128_1only_.png
./AppFolderBadgeIconShadow-16_1only_.png
./AppFolderBadgeIconShadow-256_1only_.png
./AppFolderBadgeIconShadow-32_1only_.png
./AppFolderBadgeIconShadow-512_1only_.png
./AppIconMask@2x~ipad.png
./AppIconMask@2x~iphone.png
./AppIconMask@3x~iphone.png
./AppIconMask~ipad.png
./AppIconMask~iphone.png
./CarAppIconMask.png
./CarNotificationAppIconMask.png
./DefaultIcon-20.png
./[email protected]
./[email protected]
./DefaultIcon-29.png
./[email protected]
./[email protected]
./DefaultIcon-40.png
./[email protected]
./[email protected]
./DefaultIcon-60@2x~iphone.png
./DefaultIcon-60@3x~iphone.png
./DefaultIcon-76@2x~ipad.png
./DefaultIcon-76~ipad.png
./DocumentBadgeMask-145.png
./[email protected]
./DocumentBadgeMask-20.png
./[email protected]
./[email protected]
./DocumentBase-320@2x~ipad.png
./DocumentBase-320~ipad.png
./DocumentBase-48.png
./[email protected]
./[email protected]
./DocumentMask-320@2x~ipad.png
./DocumentMask-320~ipad.png
./DocumentMask-48.png
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./NewsstandDefaultMagazine_1only_.png
./NewsstandDefaultNewspaper_1only_.png
./NewsstandMagazineGradientLeft@2x~ipad.png
./NewsstandMagazineGradientLeft@2x~iphone.png
./NewsstandMagazineGradientLeft~ipad.png
./NewsstandMagazineGradientLeft~iphone.png
./NewsstandMagazineGradientRight@2x~ipad.png
./NewsstandMagazineGradientRight@2x~iphone.png
./NewsstandMagazineGradientRight~ipad.png
./NewsstandMagazineGradientRight~iphone.png
./NewsstandMagazineSwitcherGradientLeft.png
./[email protected]
./NewsstandNewspaperGradientBottom@2x~ipad.png
./NewsstandNewspaperGradientBottom@2x~iphone.png
./NewsstandNewspaperGradientBottom~ipad.png
./NewsstandNewspaperGradientBottom~iphone.png
./NewsstandNewspaperGradientLeft@2x~ipad.png
./NewsstandNewspaperGradientLeft@2x~iphone.png
./NewsstandNewspaperGradientLeft~ipad.png
./NewsstandNewspaperGradientLeft~iphone.png
./NewsstandNewspaperGradientRight@2x~ipad.png
./NewsstandNewspaperGradientRight@2x~iphone.png
./NewsstandNewspaperGradientRight~ipad.png
./NewsstandNewspaperGradientRight~iphone.png
./NewsstandNewspaperSwitcherGradientBottom.png
./[email protected]
./NewsstandNewspaperSwitcherGradientLeft.png
./[email protected]
./NewsstandNewspaperSwitcherGradientRight.png
./[email protected]
./NewsstandThumbnailShadow@2x~ipad.png
./NewsstandThumbnailShadow@2x~iphone.png
./NewsstandThumbnailShadow~ipad.png
./NewsstandThumbnailShadow~iphone.png
./NotificationAppIconMask.png
./[email protected]
./[email protected]
./SpotlightAppIconMask.png
./[email protected]
./[email protected]
./TableIconMask.png
./[email protected]
./[email protected]
./TableIconOutline.png
./[email protected]
./[email protected]

Como puedes ver, hay muchas máscaras diferentes, pero se les da un nombre bastante claro. Aquí está la imagen de AppIconMask@3x~iphone.png :

Puedes usar eso para probar tu ícono para ver si se verá bien después de que esté enmascarado. Pero, no redondeas tus esquinas . Si lo haces, cuando Apple vuelva a cambiar esas máscaras, tendrás artefactos.

Answer 5

Después de probar algunas de las respuestas en este post, consulté con Louie Mantia (ex diseñador de Apple, Square y Iconfactory) y todas las respuestas hasta ahora en este post son incorrectas (o al menos están incompletas). Apple comienza con el ícono de 57px y un radio de 10 luego se escala hacia arriba o hacia abajo desde allí. Por lo tanto, puede calcular el radio para cualquier tamaño de icono usando 10/57 x new size (por ejemplo, 10/57 x 114 da 20, que es el radio apropiado para un icono de 114px). Aquí hay una lista de los iconos más utilizados, las convenciones de nomenclatura adecuadas, las dimensiones de los píxeles y los radios de las esquinas.

1. Icon1024.png - 1024px - 179.649
2. Icon512.png - 512px - 89.825
3. Icon.png - 57px - 10
4. [email protected] - 114px - 20
5. Icon-72.png - 72px - 12.632
6. [email protected] - 144px - 25.263
7. Icon-Small.png - 29px - 5.088
8. [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 o que envía a Apple. Esos deben ser todos cuadrados y no tener ninguna transparencia. Apple enmascarará automáticamente cada icono en el contexto apropiado.

Sin embargo, conocer lo anterior es importante para el uso de los iconos en la interfaz de usuario de la aplicación, en la que debe aplicar la máscara en el código o el renderizado previo en photoshop. También es útil cuando crea ilustraciones para sitios web y otro material promocional.

Lectura adicional:

Neven Mrgan sobre tamaños de iconos adicionales y otras consideraciones de diseño: tamaños de iconos de aplicaciones de iOS

Marc Edwards de Bjango sobre las diferentes opciones para crear roundrects en Photoshop y por qué es importante: roundrect

Los documentos oficiales de Apple sobre el tamaño de los íconos y las consideraciones de diseño: IconsImages

Actualizar:

Hice algunas pruebas en Photoshop CS6 y parece que 3 dígitos después del punto decimal tienen la precisión suficiente para terminar con el mismo vector exacto (al menos como se muestra en Photoshop con 3200% de zoom). La herramienta Recta redonda a veces redondea la entrada al número entero más cercano, pero puede ver una diferencia significativa entre 90 y 89.825. Y varias veces, la herramienta Rectángulo Redondo no se redondeó y en realidad mostró varios dígitos después del punto decimal. No estoy seguro de lo que está pasando allí, pero definitivamente está usando y almacenando el número más preciso que se ingresó.

De todos modos, he actualizado la lista anterior para incluir solo 3 dígitos después del punto decimal (¡antes de que hubiera 13!). En la mayoría de las situaciones, probablemente sería difícil distinguir la diferencia entre un ícono transparente de 512 píxeles enmascarado en un radio de 90 píxeles y otro enmascarado en 89.825, pero el antialiasing de la esquina redondeada definitivamente terminará siendo ligeramente diferente y probablemente sea visible en ciertas circunstancias, especialmente si Apple aplica una segunda máscara más precisa, en código, o de otro modo.

Answer 6

El iPhone redondea las esquinas para ti, todo lo que necesitas es un ícono de png cuadrado de 57x57 y debes ser bueno

Answer 7

El radio de la esquina del icono de 57 x 57 píxeles es de 9 píxeles.

Answer 8

Hay dos respuestas totalmente conflictivas con un gran número de votos, uno es 160px @ 1024 y el otro es 180px @ 1024. Entonces, ¿una bruja?

Hice algunos experimentos y creo que es de 180px @ 1024, por lo que drbarnard es correcto.

Descargué el ícono de iTunes U de la App Store con 175x175px. Lo subí en Photoshop a 1024px y le puse dos formas, una con un radio de 160px y otra con 180px.

Como se puede ver a continuación, la forma (línea gris delgada) con 160 px (la primera) está un poco apagada, mientras que la que tiene 180 px se ve bien.

Esto es lo que hago ahora en PhotoShop:

1. Creo un lienzo de 1026x1026px con una máscara de 180px para el diseño principal de Smart Object .
2. Duplico el objeto inteligente principal 5 veces y lo redimensiono a 1024px, 144px, 114px, 72px y 57px.
3. Pongo un "Nuevo segmento basado en capas" en cada Objeto inteligente y renombro los segmentos según su tamaño (por ejemplo, icono-72px).
4. Cuando guardo la ilustración, selecciono "Todos los segmentos de usuario" y ¡BANG! Tengo todos los iconos necesarios para mi aplicación.

Answer 9

Intenté 228px radio para 1024x1024 y funcionó :)

Answer 10

La respuesta de dbarnard tiene la fórmula para calcular el radio correcto, pero como estaba buscando las plantillas, todas las máscaras y superposiciones se pueden encontrar en este directorio:

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator5.1.sdk/System/Library/PrivateFrameworks/MobileIcons.framework

(la ruta es para versiones recientes de XCode. Para versiones anteriores probablemente estará dentro de / Developer /).

Como han señalado otros, NO debe enmascararlos, pero puede usarlos para comprobar cómo se verán sus íconos una vez enmascarados.

(Los créditos para este hallazgo son para Neven Mrgan IIRC)

Answer 11

Las personas que discuten sobre el radio de la esquina aumentan ligeramente, pero en realidad ese no es el caso.

De este blog :

Un "secreto" de los productos físicos de Apple es que evitan la tangencia (donde un radio se encuentra con una línea en un solo punto) y crean sus superficies con lo que se llama continuidad de curvatura .

No es necesario aplicar el radio de la esquina a los iconos para iOS. Sólo tiene que proporcionar iconos cuadrados. Pero si aún quieres saber cómo, la forma real se llama Squircle y a continuación se muestra la fórmula:

Answer 12

No es necesario que aplique el radio de la esquina al icono de la aplicación, solo puede aplicar iconos cuadrados. El dispositivo está aplicando automáticamente el radio de la esquina.

Answer 13

Puede hacer cuatro íconos (a partir de hoy) para su aplicación y todos pueden tener un aspecto diferente, no necesariamente en base a la imagen de 512x512.

• radio de esquina para el icono 512x512 = 80 (iTunesArtwork)
• radio de la esquina para el icono 1024x1024 = 180 (iTunesArtwork Retina )
• radio de esquina para el icono 57x57 = 9 (iPhone / iPod Touch)
• radio de esquina para el ícono 114x114 = 18 (iPhone / iPod Touch Retina )
• radio de esquina para el ícono 72x72 = 11 (iPad)
• radio de esquina para el ícono de 144x144 = 23 (iPad Retina )

Si creas un conjunto de iconos personalizados, puedes establecer la opción UIPrerenderedIcon en verdadero en tu archivo info.plist y no agregará el efecto de brillo, sino que colocará un fondo negro debajo de él y redondeará las esquinas de la imagen con estas esquinas. radios, de modo que si el radio de la esquina en cualquiera de los íconos es mayor, entonces se verá negro alrededor de los bordes / esquinas.

Edición: vea el comentario de @ devin-g-rhode y podrá ver que cualquier tamaño de icono futuro debe tener una proporción de 1:6.4 de radio de esquina a tamaño de icono. También hay una muy buena respuesta de https://.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 72x72 llamado icon.png, también agregaría un archivo PNG 114x114 llamado [email protected] al proyecto / target y Xcode lo usaría automáticamente como el ícono en una pantalla de retina. Puede ver esto en acción en la página Resumen del objetivo de la aplicación si lo ha hecho bien. Lo mismo funciona para tus imágenes de lanzamiento. Use launch.png en 320x480 y [email protected] en 640x960.

Answer 14

Si no está considerando el golpe, el radio exacto es en realidad 10px para el icono 57x57.

Obtengo esta información de iconreference .

Answer 15

Todas las respuestas anteriores a esta pregunta están ahora desactualizadas. Desde al menos mayo de 2015, Apple requiere que proporcione iconos cuadrados sin redondeo:

Mantenga las esquinas de los iconos cuadrados. El sistema aplica una máscara que redondea las esquinas de los iconos automáticamente.

https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/

Answer 16

Veo mucha discusión "px" pero nadie habla de porcentajes, que es el número fijo que desea calcular por

15.625% es el porcentaje clave aquí. Multiplique cualquiera de los tamaños de imagen mencionados anteriormente por 0.15625 y obtendrá el radio de píxel correcto para ese tamaño.

EDITAR : Gracias a @Chris Prince por comentar con iOS 8/9/10 radio porcentaje: 22.37%