Este tutorial mostra como misturar ambientes imersivos com elementos simples e elegantes de interface.
Por Chris Mccall
Publicado originalmente na edição número 38 da revista Photoshop Creative.
Os dias do microssite em Flash estão contados, e assistimos à ascensão de aplicativos mais funcionais para dispositivos móveis e tablets. Como muitos designers, artistas e clientes vêm usando seus gadgets portáteis para visualizar e acessar web sites, portfólios e muito mais, vale a pena garantir que seu conteúdo chegue até eles da maneira mais eficaz possível. Entretanto, não precisamos abandonar inteiramente o esplendor visual para tornar os apps mais “utilizáveis”. Este tutorial mostrará como utilizar o melhor dos dois mundos para desenhar uma experiência para tablet passível de maravilhar e satisfazer os usuários.
Os aplicativos Web e para celular/tablet concentram a maioria de nossas atuais formas de comunicação para atingir o cliente. Se você deseja se destacar, precisa tirar vantagem dos novos estilos, métodos e tecnologias, além de respeitar as regras tradicionais e fundamentais do design e da comunicação.
Para este workshop, é preciso entender como funcionam as camadas no Photoshop, particularmente as camadas de ajuste, além de ter um olho aguçado para a luz e os detalhes. Além disso, vamos trabalhar em um projeto que reflete nosso próprio estilo, por isso, não tenha medo de se afastar e experimentar o novo.
Trabalharemos com uma seleção de imagens de catálogo para construir a cena. Incluímos os links do Shutterstock e iStockphoto para as fotografias usadas em nosso site, mas encorajamos você a escolher suas próprias imagens para construir uma interface única de acordo com suas preferências.
ESPECIALISTA
Arquivos iniciais
Em nosso site, você encontrará links para todas as imagens de catálogo usadas neste tutorial. Você pode usar seus próprios recursos, se preferir.
ELEMENTOS INTEGRADOS
Defina a perspectiva da cena para criar a profundidade de campo
01 Dinensões do iPad
O iPad possui uma tela de 1024×768 px a 132 ppi. Não se deixe abater por essa proporção de pixels mais densa; isso significa simplesmente que o trabalho ficará mais nítido que em seu PC. Nossas dimensões ainda são as mesmas, por isso, crie um documento com essa resolução. Se preferir ver sua imagem no contexto, use uma imagem de iPad como modelo, deixando seu espaço de trabalho com as dimensões e tamanhos já discutidos.
02 Prepare o palco
Para o fundo, precisamos de imagens que criem profundidade, com uma superfície limpa no primeiro plano. Não é muito fácil achar a imagem perfeita, por isso, divida a cena em seções como céu, horizonte e “chão”. Desse modo, você tem mais opções e controle sobre os efeitos finais. Cuidadosamente, mescle a cena usando máscaras de camada e camadas de ajuste de cor para unificar os matizes e tons da imagem. Aqui, diminuímos a saturação dos azuis profundos, que são equilibrados pela roda-gigante vermelha.
03 Elementos em primeiro plano
A primeira interação do usuário será por meio de uma cena surreal no primeiro plano. Primeiro, cole o sofá, maleta, jornal e café. Dê a eles uma cara de ilustração adicionando uma camada de Levels a cada uma, pintando o efeito com máscaras de camada e aumentando o contraste. Adicionaremos um efeito de holofote com sombreamento manual e sombras projetadas em novas camadas.
Dica Rápida
Para criar efeitos dramáticos de holofote em objetos ou elementos da interface, adicione camadas vazias sobre eles e pinte sombras personalizadas com um pincel branco suave em opacidade bem baixa próximo às bordas.
www.asgoodasadvertised.com.jpg)
Comentar
Enviar
Compartilhar
Imprimir
