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 obtienes las esquinas redondeadas exactamente con tu icono de Illustrator o Photoshop?

Editar:

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

Puede crear cuatro iconos (a partir de hoy) para su aplicación y todos pueden tener un aspecto diferente, no necesariamente basados ​​en la imagen de 512x512.

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

Si crea un conjunto de iconos 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 en cualquiera de los íconos es mayor, entonces se mostrará negro alrededor de los bordes / esquinas.

Editar: Vea el comentario de @ devin-g-rhode y puede ver que cualquier tamaño de icono futuro debe tener una 1:6.4relación de radio de esquina al tamaño de icono. También hay una muy buena respuesta de 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 icono de 72x72 llamado icon.png, también agregaría un archivo PNG de 114x114 llamado icon@2x.png al proyecto / destino y Xcode lo usaría automáticamente como el icono 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 a 320x480 y launch@2x.png a 640x960.

Después de probar algunas de las respuestas en 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 incompletas). Apple comienza con el ícono de 57 px y un radio de 10 y 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 114da 20, que es el radio adecuado para un icono de 114px). Aquí hay una lista de los iconos más utilizados, convenciones de nomenclatura adecuadas, dimensiones de píxeles y radios de esquina.

1. Icon1024.png - 1024px - 179.649
2. Icon512.png - 512px - 89.825
3. Icon.png - 57px - 10
4. Icon@2x.png - 114px - 20
5. Icon-72.png - 72px - 12.632
6. Icon-72@2x.png - 144px - 25.263
7. Icon-Small.png - 29px - 5.088
8. Icon-Small@2x.png - 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 enviar a Apple. Todos deben ser cuadrados y no tener ninguna transparencia. Apple enmascarará automáticamente cada icono 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 pre-renderizado en Photoshop. También es útil al crear 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 ios

Marc Edwards de Bjango sobre las diferentes opciones para crear reacciones redondas en Photoshop y por qué es importante: redondear

Documentos oficiales de Apple sobre el tamaño de los íconos y las consideraciones de diseño: íconos e imágenes

Actualizar:

Hice algunas pruebas en Photoshop CS6 y parece que 3 dígitos después del punto decimal es suficiente precisión para terminar con exactamente el mismo vector (al menos como se muestra en Photoshop con un zoom de 3200%). La herramienta Rect de redondeo 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 Redondeado no se redondeó y en realidad mostró varios dígitos después del punto decimal. No estoy seguro de lo que está sucediendo 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 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 en 89.825, pero el antialiasing de la esquina redondeada definitivamente sería 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 "px" pero nadie habla porcentajes, que es el número fijo por el que desea calcular.

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

Antes de iOS 8, Apple usaba menos redondeo, con un 15.625%.

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

Importante: ecuación de icono de iOS 7

Con el próximo lanzamiento de iOS 7, notará que se ha aumentado el radio del icono "estándar". Intenta hacer lo que Apple y yo sugerimos con esta respuesta.

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

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

Obviamente, puede cambiar el 120número 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 icono; iOS lo hace por usted cuando aplica la máscara de redondeo de esquinas) ( Documentación de Apple )

El mejor enfoque es no redondear las esquinas de sus íconos. 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 iconos, 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. Algunas veces sus í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 ilustración de iTunes. Seguí este enfoque un par de veces, y si lo desea, puedo publicar un enlace a una aplicación que utiliza iconos 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 icono cuadrado obtendrá automáticamente estas cosas cuando se muestre en un dispositivo iOS:

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

Por lo tanto, puede lograr el efecto que desee simplemente dibujando un ícono cuadrado simple y llenando el contenido. 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 son parte de la documentación oficial de Apple en iOS. Te piden que dibujes iconos cuadrados, así que ... ¿por qué no?

Gente discutiendo acerca del aumento leve del radio de la esquina, 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 necesita aplicar el radio de la esquina a los íconos para iOS. Solo proporcione iconos cuadrados. Pero si aún quieres saber cómo, la forma real se llama Squircle y debajo está la fórmula:

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 otros han señalado, NO debe enmascararlos usted mismo, pero puede usarlos para verificar cómo se verán sus iconos una vez enmascarados.

(los créditos para este hallazgo van a Neven Mrgan IIRC)

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

Como otros han dicho, no quieres redondear tus esquinas. Desea enviar gráficos cuadrados planos (sin capas o alfa). Apple cambió la máscara que usan para redondear sus esquinas en iOS7 y luego nuevamente en iOS8. Puede encontrar estas máscaras dentro de su paquete de aplicación 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.frameworkpero no confíes 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
./DefaultIcon-20@2x.png
./DefaultIcon-20@3x.png
./DefaultIcon-29.png
./DefaultIcon-29@2x.png
./DefaultIcon-29@3x.png
./DefaultIcon-40.png
./DefaultIcon-40@2x.png
./DefaultIcon-40@3x.png
./DefaultIcon-60@2x~iphone.png
./DefaultIcon-60@3x~iphone.png
./DefaultIcon-76@2x~ipad.png
./DefaultIcon-76~ipad.png
./DocumentBadgeMask-145.png
./DocumentBadgeMask-145@2x.png
./DocumentBadgeMask-20.png
./DocumentBadgeMask-20@2x.png
./DocumentBadgeMask-20@3x.png
./DocumentBase-320@2x~ipad.png
./DocumentBase-320~ipad.png
./DocumentBase-48.png
./DocumentBase-48@2x.png
./DocumentBase-48@3x.png
./DocumentMask-320@2x~ipad.png
./DocumentMask-320~ipad.png
./DocumentMask-48.png
./DocumentMask-48@2x.png
./DocumentMask-48@3x.png
./NanoDefaultIcon-24.0@2x.png
./NanoDefaultIcon-27.5@2x.png
./NanoDefaultIcon-40.0@2x.png
./NanoDefaultIcon-44.0@2x.png
./NanoDefaultIcon-86.0@2x.png
./NanoDefaultIcon-98.0@2x.png
./NanoIconMaskChiclet-24.0@2x.png
./NanoIconMaskChiclet-27.5@2x.png
./NanoIconMaskChiclet-40.0@2x.png
./NanoIconMaskChiclet-44.0@2x.png
./NanoIconMaskChiclet-86.0@2x.png
./NanoIconMaskChiclet-98.0@2x.png
./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
./NewsstandMagazineSwitcherGradientLeft@2x.png
./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
./NewsstandNewspaperSwitcherGradientBottom@2x.png
./NewsstandNewspaperSwitcherGradientLeft.png
./NewsstandNewspaperSwitcherGradientLeft@2x.png
./NewsstandNewspaperSwitcherGradientRight.png
./NewsstandNewspaperSwitcherGradientRight@2x.png
./NewsstandThumbnailShadow@2x~ipad.png
./NewsstandThumbnailShadow@2x~iphone.png
./NewsstandThumbnailShadow~ipad.png
./NewsstandThumbnailShadow~iphone.png
./NotificationAppIconMask.png
./NotificationAppIconMask@2x.png
./NotificationAppIconMask@3x.png
./SpotlightAppIconMask.png
./SpotlightAppIconMask@2x.png
./SpotlightAppIconMask@3x.png
./TableIconMask.png
./TableIconMask@2x.png
./TableIconMask@3x.png
./TableIconOutline.png
./TableIconOutline@2x.png
./TableIconOutline@3x.png

Como puede ver, hay muchas máscaras diferentes, pero se nombran con bastante claridad. Aquí está la AppIconMask@3x~iphone.pngimagen:

Puede usar eso para probar su icono para ver si se verá bien después de que esté enmascarado. Pero no redondees tus esquinas . Si lo hace, cuando Apple vuelva a cambiar esas máscaras, tendrá artefactos.

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

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

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

Si no considera el trazo, el radio exacto es en realidad 10 píxeles para el icono de 57x57.

Recibo esta información de iconreference .

Al diseñar mis iconos de aplicaciones con Photoshop, descubrí que ningún radio de esquina entero se ajusta 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 biselado y el brillo 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.

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

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

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

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

Como 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 muy bien.

Esto es lo que hago ahora en PhotoShop:

1. Puedo crear un lienzo de tamaño 1026x1026px con un 180px máscara para el diseño principal objeto inteligente .
2. Duplico el objeto inteligente principal 5 veces y cambio su tamaño a 1024px, 144px, 114px, 72px y 57px.
3. Puse un "Nuevo segmento basado en capas" en cada objeto inteligente y renombro los segmentos de acuerdo con su tamaño (por ejemplo, icon-72px).
4. Cuando guardo la obra de arte, selecciono "All User Slices" y ¡BANG! Tengo todos los iconos necesarios para mi aplicación.

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

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

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

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

Mantenga el fondo simple y evite la transparencia . Asegúrese de que su icono sea opaco y no desordene el fondo. Déle un fondo simple para que no domine otros íconos de aplicaciones cercanos. No necesita llenar todo el ícono con contenido.

No necesita aplicar el radio de la esquina al icono de su aplicación, solo puede aplicar iconos cuadrados. El dispositivo aplica automáticamente el radio de la esquina.