Exportar tamanhos de ícone do iOS no Affinity Designer

Embora o Affinity Designer tenha a exportação extremamente útil @ 1x, @ 2x e @ 3x, estou pensando se há uma maneira de exportar na variedade de tamanhos necessários para um ícone do iOS?

Encontrei uma grade concisa dos tamanhos necessários aqui , que reproduzirei no formato de lista:

• 1024x1024
• 180x180
• 152x152
• 120x120
• 87x87
• 80x80
• 76x76
• 58x58
• 57x57
• 40x40
• 29x29

São 11 tamanhos diferentes de ícones!

Eu achei o Export Persona inteiro com o conceito de configuração de fatia excelente, especialmente porque você pode aplicar fatias a camadas individuais (por exemplo, para as versões normal e pressionada de um botão). Existe alguma maneira de usar essa mesma ferramenta, talvez, para fazer tamanhos específicos de exportações?

Como os requisitos mudam de tempos em tempos, é sempre uma boa ideia consultar as diretrizes da Apple. No meu site, desenvolvi um modelo do Affinity Designer que exporta os 18 tamanhos atualmente exigidos para aplicativos universais.

Parece uma lista enorme e complexa, mas existem apenas cinco tamanhos que você precisa criar:

• 29pt
• 49pt
• 60pt
• 76pt
• 1024px

Os quatro primeiros tamanhos (listados nos pontos) precisam das versões 1 ×, 2 × e 3 × (se você estiver preparado para o futuro, além de cobrir o iPhone 6 Plus).

Alguns dos tamanhos que você verá listados na rede e no site da Apple são para iOS 6 e abaixo (57 × 57, etc.). Eles não são necessários se você estiver segmentando o iOS 7 e superior.

Aqui está o modelo do Photoshop que eu criei:

Eu tenho fatias configuradas para exportar cada ícone e uma ação para redimensionar e reexportar, então, acabo com:

• icon-29.png
• icon-29@2x.png
• icon-29@3x.png
• icon-40.png
• icon-40@2x.png
• icon-40@3x.png
• icon-60.png
• icon-60@2x.png
• icon-60@3x.png
• icon-76.png
• icon-76@2x.png
• icon-76@3x.png

Nem todos esses tamanhos ainda são necessários, mas provavelmente serão no futuro. Começar com 4 tamanhos de base facilita a criação dos ícones.

Estou usando o Slices no Photoshop para exportar as diferentes regiões necessárias para cada ícone. Observe que os ícones fornecidos não devem ter áreas transparentes - a cor deve se estender até os cantos. O iOS mascara o ícone, para que você não precise se preocupar com isso.

Você poderia fazer o mesmo, usando o recurso de fatia do Affinity?

Atualização: criei alguns modelos de ícones de aplicativos de código aberto para Affinity Designer, Sketch, Photoshop e Illustrator . Eles podem valer a pena considerar.

Você pode fazer isso no Affinity Designer, as fatias podem escalar sua saída usando sufixos. Aqui está a exportação de ícones do iOS usando o sufixo 'w':

Acabei de encontrar uma boa maneira de fazer isso no Affinity Designer. Não é totalmente automatizado. Explicarei como obter os três tamanhos de ícones atualmente necessários para o iPhone (29pt, 40pt, 60pt), cada um com resolução 2x e 3x:

1. Crie um novo documento, defina a unidade como "Pontos", tamanho da página para 29x29 e marque "Criar prancheta" na caixa de diálogo
2. Cole e posicione seu trabalho artístico na prancheta
3. Renomeie a prancheta para "29pt" no painel Camadas (opcional)
4. Clique com o botão direito do mouse na prancheta e selecione "Duplicar"
5. Arraste a nova prancheta (para poder ver as duas lado a lado) e renomeie-a para "40pt" (novamente, esta etapa é opcional)
6. Redimensione a nova camada para 40x40pt usando o painel Transformar - seu trabalho artístico será ampliado automaticamente
7. Repita as etapas de 4 a 6 para criar também uma prancheta de 60 pontos (mais 76 pontos e 83,5 pontos para o iPad, se necessário)
8. Vá para Exportar Persona, alterne para o painel Fatias e selecione as resoluções 2x e 3x (mais 1x para iPad)
9. Selecione todas as camadas da prancheta na lista ("29pt", "40pt" etc.) e clique em "Exportar selecionado" na parte inferior do painel.

O Affinity criará todos os tamanhos de ícone em todas as resoluções selecionadas, para que você possa obter mais ícones do que realmente precisa. Mas eles são chamados de "29pt@2x.png", etc., portanto é muito fácil atribuí-los ao seu Catálogo de ativos do Xcode.

Uma ressalva: quando você vai para a Export Persona, o Affinity cria automaticamente uma fatia de exportação para cada prancheta (esse é o quadro azul com a etiqueta de tamanho). Descobri que algumas vezes o tamanho dessas fatias é reduzido em alguns pixels. Parece um bug no AD. Você pode corrigi-lo facilmente arrastando os cantos das fatias.

Marc Edwards teve uma ótima resposta em termos de quais tamanhos de ícones precisam ser criados, o uso de fatias para isso e bons links para os recursos do Photoshop para fazer isso. No entanto, ainda estou procurando uma solução para exportar em vários tamanhos no Affinity Designer especificamente.

Percebi, eventualmente, que isso seria possível usando a ferramenta Place Image. Crie seu ícone em um arquivo e, em outro arquivo "modelo", você pode usar a ferramenta Colocar imagem para criar várias camadas que puxam seu arquivo de ícone. Cada uma dessas camadas pode ser transformada em uma fatia nomeada.

A desvantagem aqui é que cada camada precisa ser criada e apontada para o seu arquivo de ícone, para que pareça tedioso. Uma vez instalado, no entanto, após qualquer edição no arquivo base, você poderia facilmente reexportar tudo.