Tudo o que você sempre quis saber para começar a criar sua skin.

Esse post é para você designer, que atualmente está sonhando em criar uma skin para app de Iphone ou Ipad e simplesmente não sabe como fazê-lo, ou porque não sabe inglês, ou porque não encontrou material a respeito.

Lá fora (na gringa) há muito material a respeito, mas infelizmente nem todos são objetivos e respondem as perguntas mais básicas.

Vamos supor que você já sabe alguma coisa sobre Iphone, afinal deve possuir um, sabe como desenhar uma skin, afinal entende de Fireworks, Photoshop, Ilustrator ou outro software gráfico (sem ser Adobe não recomendo…).

Então você chegou nas seguintes dúvidas:

Qual o tamanho da tela? Iphone 3G ou 4G tela de retina? Qual o procedimento certo para criar o design, já para Iphone 4 ou para 3? Entre outras muito comuns.
Em pesquisa para criar interfaces para esses gadgets aqui na redspark me deparei com essas questões, e como já as solucionei estou aqui para contribuir com esse material muito valioso.
Esse é o primeiro de muitos posts do mesmo tema. Em breve estarei ensinando também aos novatos na área de Design de Interface como criar uma bela skin para esses portáteis, e vou indicar material sobre o assunto.

Bem, chega de blá blá blá e vamos ao post.

Tamanho padronizado da tela e dos ícones

.

É possível que você já tenha lido a documentação da Apple sobre Iphone e Ipad Guidelines, são os padrões para a criação das skins. Caso não tenho lido aconselho a faze-lo, é o primeiro passo para entender como funciona esse mundo, no entanto, o conteúdo está em inglês,  se tiver dificuldades peça ajuda ao concorrente da Apple e utilize nosso amigo Google Translator, não será a melhor tradução do mundo mas com esforço você chega lá.

Iphone Guidelines

Ipad Guidelines

É possível ler este artigo sem ter o conhecimento acima?  Sim é, mas será melhor com a leitura dos padrões da Apple.

Quando comprei meu Iphone 4 no dia do seu lançamento (não peguei fila acredite) eu fiquei surpreso com a resolução da sua tela, mas logo veio algo a mente… como isso afetaria os aplicativos,  e não demorou até eu ver aplicativos com a resolução perfeita, e aplicativos com os famosos pixelados, sim, com um visual podre, literalmente falando. São os aplicativos que foram criados para a resolução 320 x 480px, todos os modelos anteriores a quarta geração de Iphone.  Claro que não eram totalmente ruins, porém muito da qualidade se perdia, e logo não demorou para  que a maioria deles fossem atualizados para a nova resolução de 640 x 960px.

Essa é a vantagem de quem desenvolveu em vetor, bastaram redimensionar suas skins para o novo tamanho e aplicá-las na app e então enviar o pedido de atualização ao usuário.

Quando você exporta os arquivos para Iphone ou Ipad geralmente é PNG. O Xcode (leia tópico a respeito), não considera o valor PPI (não confunda com DPI) quando você salva a imagem, portanto, para matar a charada siga as configurações abaixo:

Agora, um comentário importante sobre isso,  qual software utilizar? Eu particularmente gosto do Fireworks para a criação de Interfaces, esse software é fantástico e prático, mas se realmente quer ter facilidade com skins para Iphone e Ipad volte ao Photoshop, caso não seja usuário do mesmo, crie suas skins bases no Fireworks e salve com PSD, e depois aplique os efeitos e detalhes no Photoshop, ele é realmente uma máquina de guerra para esse assunto.
Nos futuros posts estarei falando melhor disso.

Supondo portanto que estamos falando do Photoshop, vejamos então algumas padronizações de configurações:

.

.

E quanto ao Itunes Store segue:
Ícone: 512 x 512 px (tif, jpg ou png, 72 dpi, RGB…)
Imagens iPhone: 320 x 480 px ou 640 x 860 px (tif, jpg ou png, 72 dpi, RGB…)
Imagens IPAD: 1024 x 768 px (tif, jpg ou png, 72 dpi, RGB…)

Agora a grande questão, criar uma Interface pensando na resolução do 3G (terceira geração) ou 4G (quarta geração)?

Apesar da sua resposta parecer óbvia, e ela até é, você certamente disse a si mesmo “criar skin para a quarta geração, evidente… não precisa ser guru para saber isso.” Ela não é a resposta correta acredite.

Antes de mais nada a pergunta, você já possui um Iphone4? Se sua resposta é não, relaxe, mas será necessário você entender através desse link as nossas preocupações:

Comparações entre tela 3G e 4G (Retina)

Como pode ver, as resoluções são drasticamente diferentes, o Iphone 4 tem uma resolução superior ao olho humano (segundo a própria Apple) e de fato é uma resolução impecável, a tela de retina .Utilize o mouse e percorra a rosa mostrada no Iphone nesse link que te apresentei…

Assim você vai pensar, “Então como não fazer para a melhor resolução?”

Simples, muito simples, porque quando você cria interfaces com resoluções maiores você tende a ser mais detalhista, e interfaces detalhadas quando forem redimensionadas a tamanhos menores vão dar problema, não será uma boa interface, não ficará com um belo padrão de visualização. Os pixels podem se confundir, criando até mesmo embaçamentos.

Portanto a melhor técnica é criar, obviamente tudo em vetor, na resolução de 320 x 480px, ver se está tudo harmonico, e então só depois redimensionar para o dobro, 640 x 960px. Confie, ficará muito melhor que desenhar diretamente para 640 x 960px, já tive algumas experiências ruins criando diretamente nessa resolução. Deixe para aplicar texturas caso queira faze-lo na resolução de 640, já as bases tem que ser vetorial.

E claro, agora sim não precisa ser guru para saber que se fizer em 320 x 480px sem ser vetor e redimensionar (que é o acontece com as aplicações sem suas interfaces atualizadas) ficará pixelado e granulado, tal com vemos nos exemplos abaixo.
.

.

Padrão de imagem na exportação

.

Como bom brasileiro sei que para tudo há um jeitinho, mas no caso de interfaces para iOS o jeitinho pode ser uma não aprovação na Apple Store, ou mesmo uma interface ruim.

Portanto não custa nada enfatizar, o padrão que você deve usar na exportação das imagens dos seus elementos é o PNG, na teoria o iOS pode exibir outros formatos, mas… na prática não ficará bom, o motivo é que o PNG é otimizado automaticamente no pelo SDK do iOS. Assim sendo, como estamos nosso software gráfico utilizado é o Photoshop vamos exportar em PNG 24 e com transparência.

.

Padrão de botões

.

Você já se deparou com aplicações cujos botões eram pequenos demais? Aquelas aplicações que para poder inserir um determinado evento o designer implementou um botão pequenininho que coubesse na interface a fim de executar a função desejada mas… que por vezes não era sensível ao toque?

Pois bem, seja bem vindo ao maravilhoso mundo daqueles que acreditam que pesquisa não serve para nada, a Apple padronizou os botões em 44 x 44px, apesar do rigor que a mesma tem na aprovação dos aplicativos muitos dos mesmos passam com botões inferiores a isso, e espero que você não seja um destes, afinal, você estará estragando toda a UX (leia artigo) da sua aplicação caso se meta a achar que um botão menor é melhor para o seu usuário, sendo que a Apple fez inúmeras pesquisas para definir o melhor tamanho, sendo esse, 44 x 44px o tamanho MÍNIMO recomendado.

.

O Mistério, como preparar os arquivos para o seu desenvolvedor

.

Sim, sua obrigação, e talvez a leitura desse texto inteiro seja por conta dessa preciosa informação, afinal você pensa “Fazer interface eu sei, design eu sei, conceito eu sei, mas como afinal eu devo exportar tudo isso para o desenvolvedor?”.

Eis a fórmula mágica, volte a ler os Padrões de imagem para a exportação. Sim isso mesmo, você apenas tem que fatiar os arquivos e enviá-los de forma organizada ao seu desenvolvedor, ele tratará de incluir isso através do XCode, caso você tenha interesse em agilizar esse processo e trabalhar em parceria com seu desenvolvedor de forma mais dinâmica, então terá que estudar o XCode, um bom primeiro passo para isso é o post que indiquei no começo do artigo do nosso colaborador Artur Fabri (@arturfabri), que explica como implementar uma skin em uma tabbar, incluindo formas de testar nas versões 3G, 4G e Ipad, é imperdível o Screencast dele, se você assim como eu é um pouco mais que um designer e gosta de fuçar em como as aplicações se comportam vai gostar muito da explicação dele.

Espero com esse artigo ter elucidado os primeiros passos para que você venha a criar interfaces para Iphone, Ipad , futuramente estarei falando aqui no Blog de Android também, bem como compartilhando métodos de criação de skins e as próprias skins (Guidelines) para download.

Espero que tenham gostado do artigo.

_________________________________________

Eduardo Horvath é UX Specialist e Designer na redspark.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath