Está se tornando cada vez mais comum que os profissionais gráficos não só tenham seu trabalho impresso, mas também na Web e em dispositivos como iPhones, iPads, dispositivos Android e tablets Android. Na superfície, isso pode ser visto como uma "coisa boa", já que a mídia em que nosso trabalho aparece se expande para as telas digitais. A desvantagem é o grande número de telas e o número confuso de resoluções de tela. Não é incomum ouvir profissionais experientes imaginando o que aconteceu com os dias em que uma imagem TIFF de 300 dpi de resolução no formato CMYK era a norma. Oh pelos bons velhos tempos!
Esses dias acabaram. Agora temos que lidar com o fato de que uma imagem de 200 por 200 pode parecer boa em um dispositivo e ainda assim parecer tamanho de um quarto em outro e tamanho de três quartos em outro. Tudo se resume à "Corrida armamentista de resolução" que está sendo realizada pelos fabricantes de dispositivos enquanto eles tentam compactar mais pixels em uma tela do que seus concorrentes.
Isso nos leva ao que chamaremos de "A ascensão dos sufixos". Os sufixos são essas coisas - @ 2x, @ 3x - colocadas no nome de uma imagem. Eles essencialmente, por exemplo, colocam a imagem certa no lugar certo no dispositivo certo. Então fica ainda melhor.
Muito do nosso trabalho envolve trabalhar com ícones e, com a ascensão do movimento de design plano, essas coisas são criadas em aplicativos de desenho vetorial como Illustrator e Sketch. O problema é que os dispositivos simplesmente não podem renderizar arquivos .ai ou .eps. Eles precisam ser convertidos em Scalable Vector Graphics e, dependendo do aplicativo usado para criar os ícones, pode não haver nem mesmo uma opção SVG.
Então fica ainda melhor.
Há uma nova classe de software - aplicativos de prototipagem - que estão se tornando o ponto de montagem antes que suas imagens e ícones sejam empurrados para os dispositivos e também tenham suas peculiaridades.
Este tutorial se move entre o Photoshop e o Sketch para os gráficos e usa o Adobe Experience Design para demonstrar alguns dos pontos problemáticos entre sua ideia e a eventual implantação. Vamos começar.
01 de 05Como preparar imagens para dispositivos móveis no Adobe Photoshop
A primeira etapa desse processo é conhecer seu dispositivo ou dispositivos de destino. Nesse caso, você estará segmentando o iPhone 6, que tem uma área de tela de 375 pixels de largura por 667 pixels de altura. O design exige que a imagem seja a largura da tela.
A imagem a ser usada foi filmada dentro da Catedral de Berna em Berna, na Suíça. Quando a imagem abrir no Photoshop, selecione Imagem> Tamanho da Imagem para verificar as dimensões da imagem e sua resolução. Obviamente, uma imagem de 3156 x 2592 com resolução de 300 ppi e um tamanho de arquivo de 23,4 MB simplesmente não funcionará.
Dentro da caixa de diálogo Tamanho da imagem, reduza a resolução para 100 ppi. Faça isso primeiro porque as dimensões da imagem também serão alteradas. Com o conjunto de resolução, altere a largura para 375 pixels. Se você verificar os dados do tamanho da imagem, perceberá que a imagem encolheu de 23,4 Mb para um 338k mais compatível com dispositivos móveis. Clique OK para aceitar a alteração e fechar a caixa de diálogo Tamanho da imagem.
Continue lendo abaixo
02 de 05Como usar a caixa de diálogo "Exportar como…" no Adobe Photoshop
Quando a imagem estiver pronta para exportação, selecione "Exportar> Exportar como …" para abrir a caixa de diálogo Exportar como.
Esta caixa de diálogo é uma adição recente ao Photoshop e substitui a caixa de diálogo "Salvar para a Web" usada por anos. Se você ainda precisar, poderá encontrá-lo no pop-up Exportar. É, por razões óbvias, agora conhecido como "Exportar para Web (legado)". Se esta é sua primeira visita a esta caixa de diálogo, veja um breve tour:
- Tamanho: Esta coluna define o tamanho de saída da imagem. O aspecto interessante desta área é ampliar a imagem, mas a imagem não aparecerá como "difusa" no dispositivo devido ao grande número de pixels na tela do dispositivo.
- 1X: Clique em segurar isso e você será presenteado com vários tamanhos. As categorias 1x, 2x e 3x são tradicionalmente associadas aos dispositivos Hi Dpi da Apple e, juntamente com algumas outras, preparam imagens para dispositivos Android.
- Sufixo: Essa escolha mostrará seu tamanho, mas será exibida como @ 2x ou o tamanho será escolhido. Este sufixo será adicionado ao nome da imagem.
- O sinal de +: Clique aqui para adicionar vários tamanhos para saída. Nesse caso, clique duas vezes e escolha 2x e 3x no pop-up. Isso cobrirá praticamente qualquer dispositivo iOS.
- A lata de lixo: Clique aqui e a escolha é removida da lista.
- Configurações de arquivo: Escolha o formato - jpg, png, gif ou svg - mais adequado à imagem. Se o tamanho do arquivo for uma preocupação, você também poderá reduzir as configurações de Qualidade.
- Tamanho da imagem: você pode alterar as dimensões físicas da imagem.
- Tamanho da tela: Você pode alterar as dimensões físicas da tela da imagem.
- Metadados: Você pode adicionar direitos autorais e suas informações de contato aos metadados da imagem.
Quando terminar, clique no botão Exportar tudo. Você será perguntado onde deseja colocar as imagens. Um bom hábito para desenvolver é clicar no botão Nova pasta e criar uma pasta para armazenar as imagens exportadas. Ao clicar em Exportar, você verá as imagens na pasta.
Continue lendo abaixo
03 de 05Como preparar imagens para dispositivos móveis no Sketch 3 de codificação Bohemian
O Sketch 3, um aplicativo somente para Macintosh da Bohemian Coding, está ganhando proeminência rapidamente entre os designers de UX e UI, devido ao seu intenso foco no design da Web e de aplicativos.Na verdade, o Photoshop, em muitos aspectos, está na posição ímpar de ter que jogar “catch up” com o Sketch.
Para preparar uma imagem para celular no Sketch, selecione a imagem na prancheta e clique no botão Tornar exportável na parte inferior do painel "Propriedades". Isso abrirá a caixa de diálogo Exportar. Clique no sinal + para adicionar as versões 2x e 3x e também adicione os sufixos. Os formatos disponíveis são PNG, JPG, TIF, PDF, EPS e SVG. Neste caso, escolha JPG. Clique no botão Exportar e segmentar ou criar uma pasta para armazenar as várias imagens exportadas.
04 de 05Por que você precisa criar três (ou mais) versões da imagem
Em muitos aspectos, o mercado móvel é o "Oeste Selvagem" das resoluções e um tamanho definitivamente não serve para todos. No exemplo acima do Adobe Experience Design, a imagem é colocada em duas pranchetas do iPhone 6 e uma prancheta do dispositivo Android. Observe como a versão 1x à esquerda parece ser metade do tamanho. É exatamente assim que a imagem apareceria em um iPhone 6 com a tela de retina. A versão 2x se encaixa perfeitamente e a versão Android sai da tela. Sua escolha é dimensionar a imagem ou exportar a imagem do Photoshop em um tamanho diferente.
Continue lendo abaixo
05 de 05Teste cedo, teste frequentemente, não confie em nada, não confie em ninguém e especialmente em você mesmo
O que você precisa entender é que este é apenas o começo do processo. Visualizar seu trabalho no maior número possível de dispositivos deve ser considerado uma parte vital do fluxo de trabalho. Você também precisa estar ciente de que esta é apenas a primeira etapa no processo de criação de recursos gráficos para um aplicativo ou projetos da Web para dispositivos móveis.
Usar aplicativos de prototipagem é uma ótima maneira de descobrir os pontos problemáticos, mas esses mesmos recursos precisarão ser enviados para uso pelo desenvolvedor. Em muitos casos, as dimensões físicas dos ativos, incluindo ícones, serão fisicamente enormes e não no formato svg, mas png. À primeira vista, isso pode parecer um pouco exagerado, mas lembre-se da regra de ouro das imagens em escala: é melhor reduzir a escala do que aumentar a escala.
O importante é trabalhar de perto com seu desenvolvedor e usar o software de prototipagem como forma de mostrar sua intenção de projeto. Eventualmente, no entanto, esses mesmos recursos precisarão estar prontos para o produto final e seu desenvolvedor terá um melhor controle sobre o que ele precisa do que você.
