Estou tentando criar o ícone para o meu aplicativo para iPhone, mas não sei como obter o raio exato que os ícones do iPhone usam. Pesquisei e procurei um tutorial ou um modelo, mas não consigo encontrá-lo.

Tenho certeza de que sou apenas um idiota, mas como obter os cantos arredondados exatamente com o ícone do Illustrator ou Photoshop?

Editar:

Qual é o raio do iPad Retina?

Você pode criar quatro ícones (a partir de hoje) para o seu aplicativo e todos eles terão uma aparência diferente - não necessariamente com base na imagem de 512x512.

• raio do canto do ícone de 512x512 = 80 (iTunesArtwork)
• raio do canto do ícone 1024x1024 = 180 (iTunesArtwork Retina )
• raio do canto para o ícone 57x57 = 9 (iPhone / iPod Touch)
• raio do canto do ícone de 114x114 = 18 (iPhone / iPod Touch Retina )
• raio do canto do ícone de 72x72 = 11 (iPad)
• raio do canto do ícone de 144x144 = 23 (iPad Retina )

Se você criar um conjunto de ícones personalizados, poderá definir a UIPrerenderedIconopção como true no arquivo info.plist e ele não adicionará o efeito de brilho, mas colocará um fundo preto sob ele e ainda arredondará os cantos da imagem com esses raios de canto. portanto, se o raio do canto de qualquer um dos ícones for maior, ele aparecerá preto nas bordas / cantos.

Edit: Veja o comentário de @ devin-g-rhode e você pode ver que qualquer tamanho futuro de ícone deve ter uma 1:6.4proporção entre o raio do canto e o tamanho do ícone. Também há uma resposta muito boa em https://stackoverflow.com/a/29550364/396005, que possui o local dos arquivos de máscara de imagem usados ​​no SDK para arredondar os cantos dos ícones

Para adicionar um arquivo compatível com retina, use o mesmo nome e adicione '@ 2x'. Portanto, se eu tivesse um arquivo para meu ícone de 72x72 chamado icon.png, também adicionaria um arquivo PNG de 114x114 chamado [email protected] ao projeto / destino e o Xcode usaria isso automaticamente como o ícone em uma tela retina. Você pode ver isso em ação na página Resumo do destino do aplicativo, se você fez corretamente. O mesmo funciona para suas imagens de inicialização. Use launch.png em 320x480 e [email protected] em 640x960.

Depois de tentar algumas das respostas deste post, consultei Louie Mantia (ex-designer da Apple, Square e Iconfactory) e todas as respostas até agora neste post estão erradas (ou pelo menos incompletas). A Apple começa com o ícone de 57px e um raio de 10 é escalado para cima ou para baixo a partir daí. Assim, você pode calcular o raio para qualquer tamanho de ícone usando 10/57 x new size(por exemplo, 10/57 x 114fornece 20, que é o raio apropriado para um ícone de 114px). Aqui está uma lista dos ícones mais usados, convenções de nomenclatura adequadas, dimensões de pixel e raios dos cantos.

1. Ícone1024.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

Além disso, como mencionado em outras respostas, você realmente não deseja cortar nenhuma das imagens que usa no binário ou enviar para a Apple. Todos devem ser quadrados e não devem ter nenhuma transparência. A Apple mascarará automaticamente cada ícone no contexto apropriado.

Entretanto, é importante saber o que foi dito acima para o uso de ícones na interface do usuário do aplicativo, onde você deve aplicar a máscara no código ou pré-renderizada no photoshop. Também é útil ao criar obras de arte para sites e outros materiais promocionais.

Leitura adicional:

Neven Mrgan sobre tamanhos de ícones adicionais e outras considerações de design: tamanhos de ícones de aplicativos para iOS

Marc Edwards, do Bjango, sobre as diferentes opções para criar roundrects no Photoshop e por que é importante: roundrect

Documentos oficiais da Apple sobre tamanho do ícone e considerações de design: Ícones e imagens

Atualizar:

Fiz alguns testes no Photoshop CS6 e parece que três dígitos após o ponto decimal são precisão suficiente para acabar exatamente com o mesmo vetor (pelo menos como exibido pelo Photoshop com 3200% de zoom). A ferramenta Round Rect às vezes arredonda a entrada para o número inteiro mais próximo, mas você pode ver uma diferença significativa entre 90 e 89,825. E várias vezes a Ferramenta Retângulo Redondo não arredondou e mostrou vários dígitos após o ponto decimal. Não tenho certeza do que está acontecendo lá, mas definitivamente está usando e armazenando o número mais preciso que foi digitado.

De qualquer forma, atualizei a lista acima para incluir apenas 3 dígitos após o ponto decimal (antes havia 13!). Na maioria das situações, provavelmente seria difícil dizer a diferença entre um ícone transparente de 512 px mascarado em um raio de 90 px e um mascarado em 89.825, mas o antialiasing do canto arredondado definitivamente terminaria um pouco diferente e provavelmente seria visível em determinadas circunstâncias, especialmente se uma segunda máscara mais precisa for aplicada pela Apple, no código ou de outra forma.

Eu vejo muitas discussões em "px", mas ninguém está falando sobre porcentagens, que é o número fixo pelo qual você deseja calcular.

22,37% é a porcentagem chave aqui. Multiplique qualquer um dos tamanhos de imagem mencionados acima em 0,2237 e você obterá o raio de pixel correto para esse tamanho.

Antes do iOS 8, a Apple usava menos arredondamentos, usando 15,625%.

EDIT : Obrigado @ Chris Prince por comentar com a porcentagem de raio iOS 8/9/10: 22,37%

Importante: equação do ícone do iOS 7

Com a próxima versão do iOS 7, você notará que o raio do ícone "padrão" foi aumentado. Portanto, tente fazer o que a Apple e eu sugerimos com esta resposta.

Parece que, para um ícone de 120 pixels, a fórmula que melhor representa sua forma no iOS 7 é a seguinte superelipse:

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

Obviamente, você pode alterar o 120número com o tamanho do ícone desejado para obter a função correspondente.

Original

Você deve fornecer uma imagem com cantos a 90 ° (é importante evitar cortar os cantos do ícone - o iOS faz isso quando aplica a máscara de arredondamento de cantos) ( Apple Documentation )

A melhor abordagem é não arredondar os cantos dos seus ícones. Se você definir seu ícone como um quadrado, o iOS cobrirá automaticamente o ícone com uma máscara predefinida que definirá os cantos arredondados apropriados.

Se você definir cantos arredondados manualmente para seus ícones, eles provavelmente parecerão quebrados neste ou naquele dispositivo, porque a máscara de arredondamento muda ligeiramente de uma versão do iOS para outra. Às vezes, seus ícones serão um pouco maiores, às vezes (suspiro) um pouco menores. O uso de um ícone quadrado o libertará dessa carga e você terá um ícone sempre atualizado e bonito para seu aplicativo.

Essa abordagem é válida para cada tamanho de ícone (iPhone / iPod / iPad / retina) e também para a arte do iTunes. Eu segui essa abordagem algumas vezes e, se você quiser, posso postar um link para um aplicativo que usa ícones quadrados nativos.

Editar

Para entender melhor esta resposta, consulte a documentação oficial da Apple sobre os ícones do iOS . Nesta página, afirma-se claramente que um ícone quadrado receberá automaticamente essas coisas quando exibido em um dispositivo iOS:

1. Cantos arredondados
2. Sombra projetada
3. Brilho reflexivo (a menos que você impeça o efeito de brilho)

Assim, você pode obter o efeito desejado apenas desenhando um ícone quadrado simples e preenchendo o conteúdo. O raio do canto final será algo semelhante ao que as outras respostas aqui estão dizendo, mas isso nunca será garantido, pois esses números não fazem parte da documentação oficial da Apple no iOS. Eles pedem para você desenhar ícones quadrados, então ... por que não?

Pessoas discutindo sobre o raio do canto estar ligeiramente aumentado, mas na verdade não é esse o caso.

Deste blog :

Um "segredo" dos produtos físicos da Apple é que eles evitam a tangência (onde um raio encontra uma linha em um único ponto) e criam suas superfícies com o que é chamado continuidade de curvatura .

Você não precisa aplicar o raio do canto aos ícones para iOS. Basta fornecer ícones quadrados. Mas se você ainda quiser saber como, a forma real é chamada Esquilo e abaixo está a fórmula:

A resposta do dbarnard tem a fórmula para calcular o raio correto, mas como você procurava os modelos, todas as máscaras e superposições podem ser encontradas neste diretório:

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

(o caminho é para versões recentes do XCode. Para versões mais antigas, provavelmente estará dentro de / Developer /).

Como outros observaram, você NÃO deve mascará-los, mas você pode usá-los para verificar como seus ícones ficarão mascarados.

(os créditos para esta descoberta vão para Neven Mrgan IIRC)

O raio do canto do ícone de 57 x 57 pixels é 9 pixels.

Como outros já disseram, você não quer virar as esquinas. Você deseja enviar gráficos quadrados planos (sem camadas ou alfa). A Apple alterou a máscara usada para arredondar seus cantos no iOS7 e depois novamente no iOS8. Você pode encontrar essas máscaras dentro do seu pacote de aplicativos Xcode. O caminho muda a cada nova versão do SDK lançada. Então, eu vou te mostrar como você pode sempre encontrá-lo.

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

Neste exato momento, o caminho encontrado por esse comando é, /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/MobileIcons.frameworkmas não confia nisso. Use o comando para encontrar você mesmo.

Esse caminho aponta para um diretório com esses arquivos (novamente, no momento desta postagem)

./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 você pode ver, existem muitas máscaras diferentes, mas elas são nomeadas com bastante clareza. Aqui está a AppIconMask@3x~iphone.pngimagem:

Você pode usá-lo para testar seu ícone e verificar se ele ficará bem após ser mascarado. Mas não vire à esquina . Se o fizer, quando a Apple alterar essas máscaras novamente, você terá artefatos.

Todas as respostas anteriores para esta pergunta estão desatualizadas. Desde pelo menos maio de 2015, a Apple exige que você forneça ícones quadrados sem arredondamento:

Mantenha os cantos dos ícones quadrados. O sistema aplica uma máscara que arredonda os cantos dos ícones automaticamente.

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

Se não considerar o traçado, o raio exato é na verdade 10px para o ícone 57x57.

Eu recebo essas informações do iconreference .

Ao projetar meus ícones de aplicativos com o Photoshop, descobri que nenhum raio de canto inteiro se encaixa exatamente na máscara do dispositivo .

O que faço agora é criar um projeto vazio com o Xcode, definir um arquivo PNG completamente branco como ícone e desativar o chanfro e o brilho predefinidos. Em seguida, executo o aplicativo e tiro uma captura de tela da tela inicial. Agora, você pode criar facilmente uma máscara a partir dessa imagem, que você pode usar no Photoshop. Isso proporcionará cantos perfeitamente arredondados.

O iphone arredonda os cantos para você, tudo que você precisa é de um ícone quadrado de 57x57 png e você deve ser bom

Existem duas respostas totalmente conflitantes com grande número de votos, uma com 160px @ 1024 e a outra com 180px @ 1024. Então bruxa?

Fiz algumas experiências e acho que é 180px @ 1024, portanto o drbarnard está correto.

Eu baixei o ícone do iTunes U na App Store, com 175x175px. Eu o escalonei no photoshop para 1024px e coloquei duas formas, uma com raio de 160px e outra com 180px.

Como você pode ver abaixo, a forma (fina linha cinza) com 160px (a 1ª) está um pouco deslocada, enquanto a de 180px parece bem.

É isso que faço agora no PhotoShop:

1. Eu crio uma tela do tamanho de 1026x1026px com uma máscara de 180px para o design principal Smart Object .
2. Duplico o principal objeto inteligente 5 vezes e o redimensiono para 1024px, 144px, 114px, 72px e 57px.
3. Coloquei uma "Nova fatia baseada em camadas" em cada Objeto inteligente e renomeio as fatias de acordo com o tamanho (por exemplo, icon-72px).
4. Quando salvo o trabalho artístico, seleciono "Todas as fatias de usuário" e BANG! Eu tenho todos os ícones necessários para o meu aplicativo.

Eu tentei o raio 228px para 1024x1024 e funcionou :)

Atualização (a partir de janeiro de 2018) para os requisitos do ícone do aplicativo:

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

Mantenha os cantos dos ícones quadrados . O sistema aplica uma máscara que arredonda os cantos dos ícones automaticamente.

Mantenha o plano de fundo simples e evite a transparência . Verifique se o ícone é opaco e não perturbe o plano de fundo. Forneça um plano de fundo simples para não dominar outros ícones de aplicativos nas proximidades. Você não precisa preencher o ícone inteiro com conteúdo.

Você não precisa aplicar o raio do canto no ícone do seu aplicativo, basta aplicar ícones quadrados. O dispositivo está aplicando automaticamente o raio do canto.