Crie uma tela inicial simples para iPad com o Photoshop CS6

Com a introdução do painel Timeline no Photoshop CS6, a Adobe fez muito de seus novos recursos de edição de vídeo que permitem editar, aprimorar e renderizar vídeos diretamente no Photoshop. Embora a Adobe esteja promovendo isso principalmente como uma ferramenta de edição de vídeo, o que é realmente interessante para mim é a capacidade de criar picadas animadas rápidas diretamente do Photoshop sem a necessidade de trocar pacotes de software.

Aqui, vou mostrar como criar rapidamente uma tela inicial curta e animada para o iPad. Para designers que estão acostumados a trabalhar com Flash ou After Effects, essas ferramentas podem parecer bastante básicas, mas para qualquer designer que deseja se envolver com gráficos em movimento, elas fornecem uma introdução rápida e fácil à noção de uma linha do tempo e quadros-chave. Claro, a saída final não precisa ser para uma tela inicial do iPad, então você está limitado apenas pela sua imaginação no que a sua saída final é usada.

01 Comece configurando um novo documento na resolução desejada do iPad no menu suspenso Celular e dispositivos. Preencha o fundo com uma cor de sua escolha (cinza neste caso), crie um quadrado branco no centro em uma nova camada, crie dois pontos pretos e encaixe-os em dois cantos opostos, novamente em camadas separadas. Rotule tudo apropriadamente para tornar a vida mais fácil mais tarde.

02 No painel Linha de tempo, clique em Criar linha de tempo de vídeo e todas as suas camadas aparecerão na linha de tempo. Defina-o como 00:00, selecione Spot 01 e expanda a camada usando o ícone de triângulo. Agora clique na guia Posição para criar um quadro-chave. Mova a linha do tempo para 01:00 e crie outro quadro-chave de posição. Agora mova o local para o canto inferior esquerdo do quadrado e repita o processo para o segundo local usando exatamente os mesmos tempos. Repita o processo com os pontos em intervalos de um segundo até a marca de três segundos, criando quadros-chave conforme você avança.

03 Volte para 00:00 e, em uma nova camada logo acima do fundo, crie uma seleção diagonal e preencha com uma cor. Queremos que essa forma entre e saia. Crie um quadro-chave de posição às 00:00 e, segurando Shift, mova a forma para fora da tela. Às 01:00 crie outro quadro-chave e mova a forma de volta à sua posição original. Reproduza-o e ele parece deslizar para dentro. Você pode ver como os quadros-chave correspondem aos dos pontos.

04 Agora mova a linha do tempo ao longo de outros 10 quadros até 01:10 e mova a forma de volta para uma posição dentro dos limites do documento. Retorne a linha do tempo para 01:00 onde a forma está em visualização completa, selecione tudo e copie a camada. Na camada quadrada, pressione Cmd / Ctrl + A para fazer uma seleção e, em seguida, vá em Editar> Colar em para colar a forma dentro do quadrado em uma nova camada. Preencha-o com preto, etiquete-o apropriadamente e mova-o acima da camada quadrada original.

05 Agora queremos que a forma interna preta deslize com a forma amarela. Mova a camada de volta na linha do tempo para 00:00 e repita o processo da forma amarela anterior, configurando o primeiro quadro-chave às 00:00 com a forma completamente fora da tela e às 01:00 com ela completamente à vista, mas então não adicione mais quadros-chave para que pareça deslizar com a camada amarela, mas permaneça na posição.