Adelyn Tam é uma designer de produtos e ilustradora que mora em Kuala Lumpur, na Malásia. Ela conseguiu carregar seus adesivos de desenho animado com o tema dim sum no Apple iMessage em pouco mais de uma semana. Neste tutorial, ela mostra como você pode criar seus próprios adesivos para o iMessage. Tudo o que você precisa é de um conjunto de designs de adesivos e seu computador.
Quando a Apple anunciou o iOS 10, fiquei empolgado com os adesivos no iMessage. Como sou um grande usuário do iMessage, quando os emojis não eram suficientes para transmitir meus pensamentos, eu fazia um rabisco, tirava uma foto e a enviava para a outra pessoa (afinal, o que é uma ligação telefônica?).
Adorei a ideia de ver alguns dos meus trabalhos artísticos sendo usados em conversas diárias de bate-papo e decidi tentar. Aqui, vou compartilhar meu processo, desde os esboços no papel até a obtenção do Adesivos Dim e Sum publicado na App Store do iMessage. Esta é a minha primeira tentativa de autopublicar um adesivo ou aplicativo para iOS (é o mesmo processo), e estou compartilhando isso da perspectiva de um designer.
Meu processo para os oito dias em poucas palavras:
Dia 1-3:
Criei um conceito e o esbocei em um papel. Usei o Illustrator para criar versões digitais de meus esboços. Terminei 24 adesivos.
Dia 4:
Fiz download e aprendi a usar o Xcode para criar adesivos. Registrei-me em uma conta de desenvolvedor da Apple e realizei o que me pareceu ser cerca de mil etapas para fazer o upload dos meus adesivos.
Dia 5:
Finalmente, carreguei minha versão para aprovação na App Store do iMessage.
Dia 6:
O status do aplicativo foi alterado para "Aguardando revisão".
Dia 7:
O status do aplicativo foi alterado para "Em revisão".
Dia 8:
Os adesivos foram aprovados e estão prontos para venda!
Veja como preparei meu trabalho artístico para o iMessage.
1. Prepare seus adesivos no Adobe Illustrator
Normalmente, trabalho com o Illustrator ao criar vetores. Abordarei alguns aspectos básicos que você deve observar ao preparar seus documentos do Illustrator para adesivos:
Você deve saber o tamanho do adesivo. Você deve escolher um dos três tamanhos posteriormente no Xcode. Portanto, sua prancheta no Illustrator deve ter o tamanho adequado. Em geral, quanto mais detalhada for a arte, maior deverá ser o tamanho do adesivo. Eu usei o tamanho normal (408px x 408px) para o meu.
Escolha o tamanho que você deseja. Esta imagem foi extraída das Diretrizes de interface humana do iOS.
Crie pranchetas separadas para cada adesivo. Não há um número definido de adesivos (que eu tenha encontrado) para a loja do iMessage. Portanto, acho que você deve escolher um número que ache interessante para os usuários, especialmente se estiver vendendo-os.
Lembre-se de que se trata de um conjunto de adesivos, portanto, tente manter algum nível de coesão visual entre os diferentes adesivos.
Use o recurso "Exportar para telas". Exporte como PNG, verifique se o plano de fundo está definido como transparente e se @1x é suficiente.
2. Crie os ícones do aplicativo
Para os ícones de aplicativos, optei por usar o Sketch. Aqui está um ícone útil para você modelo que encontrei por michaellee no Github para gerar os ícones do aplicativo no Sketch. No total, há 12 imagens de ícones de que você precisará para o Xcode e uma para o iTunes Connect. Aqui está o que você vê:
Algumas dicas profissionais para você criar ícones de aplicativos no Sketch:
Se você estiver copiando os vetores diretamente do Illustrator, certifique-se de ter convertido os traços em contornos com antecedência. Isso porque você não quer que alguns traços fiquem muito grossos ou muito finos quando você os dimensionar para os vários tamanhos necessários.
Defina seus ícones como símbolos. Dessa forma, quando você estiver criando seu segundo conjunto de adesivos, só precisará substituir uma imagem.
Exporte-os @1x e coloque todos em uma pasta.
3. Transfira seus ativos para o Xcode
Agora que você já tem seus ativos prontos, é hora de configurá-los no Xcode , uma ferramenta da Apple para desenvolvimento de software. Você pode download você pode obtê-lo gratuitamente na Mac App Store.
O processo de colocar seus ativos no Xcode é bastante simples. Você pode assisti-lo neste vídeo. Basicamente, há duas partes: uma é a transferência da arte do adesivo e a outra são os ícones do aplicativo.
A maior parte do trabalho de publicação do aplicativo vem depois disso, especialmente se você estiver fazendo isso pela primeira vez, como eu. Falarei sobre como configurar o Xcode para seus adesivos, testar e fazer o upload para o iTunes Connect e outras coisas importantes no restante deste post.
4. Participe do Programa para Desenvolvedores da Apple
Supondo que você ainda não faça parte do programa, terá que se registrar para poder distribuir aplicativos na App Store. O custo é de $99 por ano. O processo é simples e a aceitação é imediata. O único contratempo para mim foi ter que entrar em contato com o suporte da Apple para alterar meu nome completo (obrigatório), e isso levou cerca de um dia.
Essa parte pode ser um obstáculo para algumas pessoas, pois envolve algum investimento inicial, mas, como eu sempre digo a todos os produtos da Apple, "Take my moneyyy!".
5. Configure seus certificados iOS
Você precisa de certificados iOS para desenvolver e distribuir seus adesivos e aplicativos. Você precisará de dois certificados: desenvolvimento e distribuição. Você precisará de dois certificados: desenvolvimento e distribuição. Os certificados terão duração de um ano.
Clique no botão + na parte superior para criar um novo certificado.
Quando sua conta de desenvolvedor estiver pronta, vá para Account > Certificates (Conta > Certificados) e você verá a imagem abaixo. Eu optei por adicionar meus certificados iOS manualmente. Assista a este excelente vídeo guia de vídeo para você ver como tudo é feito.
Você precisará clicar um pouco no processo, mas, fora isso, ele é bastante claro. Farei um breve resumo do processo no vídeo aqui:
Criar um novo certificado para produção
- Clique no botão + > Escolha o desenvolvimento de aplicativos iOS
- Crie uma solicitação de assinatura de certificado (CSR) por meio do acesso ao Keychain.
- Carregue o CSR recém-criado.
- Gere o certificado de produção, faça o download e instale. Agora ele será exibido em seu Keychain Access.
Criar outro certificado para distribuição
- Clique no botão + > Escolha App Store e Ad Hoc.
- Você pode usar o mesmo CSR acima.
- Gerar o novo certificado de distribuição, fazer download e instalar.
- Você está pronto!
6. Registre um ID de aplicativo para os adesivos
Você precisará registrar um ID de aplicativo para seus adesivos. O mesmo ID será usado posteriormente na configuração do Xcode. Aqui está um breve passo a passo:
- Vá para Account > Identifiers > App ID > Clique em +
Aqui está a aparência da minha:
Um exemplo de como um ID de pacote é escrito. Pode ser qualquer coisa, desde que nunca tenha sido usado antes, mas mantenha-o de forma que faça sentido para você mesmo quando o ler.
Confirme seus dados e registre-se. Você está pronto!
7. Crie seus perfis de provisionamento
Não vou explicar o que você quer dizer com finalidade dos perfis de provisionamentoexceto que você precisa de um para poder instalar seus adesivos ou aplicativos nos dispositivos de teste e enviá-los para a Apple App Store.
Há dois perfis de provisionamento que você precisará para seus adesivos, destacados abaixo:
O processo de criação dos perfis é simples depois que você tiver os certificados e o App ID configurados. Basta escolher o que você criou anteriormente nos menus suspensos quando solicitado, fazer o download, instalar e pronto!
8. Criar um novo aplicativo no iTunes Connect
Se você chegou até aqui, estamos quase lá!
O iTunes Connect é o que você usará para publicar, testar e visualizar as análises do seu aplicativo. Você pode encontrá-lo em sua conta. Pessoalmente, achei que ele estava um pouco escondido, então aqui está uma imagem:
Quando você clica em iTunes Connect, de repente, aparece um mundo totalmente diferente.
Para criar um novo aplicativo, vá para My Apps > Clique em + > Preencha o formulário. Supondo que você já tenha realizado as etapas anteriores, não deverá ter problemas para preencher o formulário. Agora você deve ter criado seu primeiro aplicativo (adesivos).
Reserve um tempo para você se familiarizar com o iTunes Connect. Há duas coisas com as quais você deve se preocupar aqui:
Guia 1: App Store
O que você precisa fazer aqui:
Preencha todas as informações necessárias sobre seus adesivos (preço, descrição, categorias etc.) Carregue capturas de tela/arte-final de seus adesivos para a App Store e a loja do aplicativo iMessage.
Os dimensões que você precisa: tela de 5,5 polegadas do iPhone (1242 x 2208 px), iPad (2048 x 2732 px).
Carregue o ícone do seu aplicativo (1024 x 1024 px)
Você também verá o status (preparando para envio, aguardando revisão, etc.) do seu aplicativo aqui.
Guia 3: Voo de teste
O Testflight é o que você usará se quiser testar seus adesivos com outros usuários. Ele oferece opções de testes internos e externos. Teste interno significa testá-lo dentro da sua própria equipe com usuários registrados (somente funções específicas) de até 100 pessoas. O teste externo permite que você tenha até 2.000 testadores, mas você terá que enviar sua versão beta para análise da Apple antes de disponibilizá-la para os testadores.
9. Configure seu arquivo de adesivo no Xcode
Agora que você já fez a configuração no iTunes Connect, precisará configurar o arquivo de adesivo no Xcode.
Se você ainda não estiver conectado ao Xcode com seu ID Apple, vá para Preference > Account > Clique em + > Sign in.
Vá para Project Navigator > Seu arquivo de adesivo. Você verá todos os campos que precisa preencher.
Preencha o campo Bundle Identifier (Identificador do pacote) com o mesmo Bundle ID que você criou anteriormente.
Desmarque a opção "Gerenciar assinatura automaticamente" e escolha o perfil de provisionamento que você criou anteriormente.
O meu é assim:
Agora que você configurou isso, terá que editar as informações da extensão também, da seguinte forma:
Se você ainda não o fez, defina o tamanho dos adesivos. Você pode fazer isso a qualquer momento no projeto. Aqui está o resultado (no painel direito):
10. Exportar sua compilação com o Xcode
Agora, vamos finalmente carregar a compilação no iTunes Connect!
Certifique-se de selecionar "dispositivo iOS genérico" em Definir o esquema ativo e, em seguida, selecione a pasta .xcstickers > vá para Product > Archive.
Vá para Window > Organizer (Janela > Organizador). Uma nova janela deverá ser exibida e você deverá ver seus adesivos no painel esquerdo.
Clique em Validate para ver se tudo está certo com seus adesivos. Se houver problemas, o Xcode notificará você.
Agora, supondo que tudo esteja bem com sua compilação, é hora de carregá-la no iTunes Connect! Clique em Upload to App Store... Mas não se preocupe, o que isso realmente significa é que você fará o upload dos adesivos primeiro no iTunes Connect, onde haverá um processo de revisão.
Quando o upload for concluído, aguarde um pouco e ele deverá aparecer na sua conta do iTunes Connect.
11. Enviar seus adesivos para a App Store
No iTunes Connect, você poderá selecionar a compilação que acabou de carregar para envio.
Se você decidir testá-lo antes de enviar o aplicativo, é aqui que o Testflight entrará em ação. Examine todos os seus detalhes e verifique se estão corretos, pois você não poderá alterá-los quando os adesivos estiverem sendo analisados.
Quando estiver pronto, você pode clicar no botão enviar.
E é isso! Tudo o que você precisa fazer agora é aguardar o processo de revisão. No meu caso, foi bem rápido, cerca de três dias. Nesse meio tempo, é uma boa ideia usar esse tempo de espera para configurar seus contratos, impostos e detalhes bancários com a Apple. Haverá mais alguns formulários a serem preenchidos (eba!), mas esse será o último!
Se você chegou até aqui, agradeço e desejo uma ótima jornada com seus adesivos do iMessage! Espero que outros artistas, designers e ilustradores possam divulgar seu trabalho em diferentes mídias e ter controle sobre ele.
Este artigo foi publicado originalmente no Medium. Republicado com permissão.
PT 
EN 
FR 
ES 
