Contente
- Faça seu protótipo
- 01. Ferramentas e visualizações
- 02. Torne-o móvel
- 03. É feito de patches
- 04. Grupo de camadas
- 05. Fazendo conexões
- 06. Construa sua família
- 07. Renomeie sua camada
- 08. Mudança de opacidade
O Quartz Composer é uma ferramenta poderosa de gráficos em movimento da Apple, originalmente usada para tudo, desde gráficos de transmissão a protetores de tela. É uma ferramenta visual não linear - funciona conectando pontos e ideias, em vez de escrever código ou definir quadros-chave fixos.
Embora não tenha sido originalmente criado para o trabalho de design de interação, sua flexibilidade e velocidade o tornam um ambiente ideal para designers.
Construa seu próprio site com esses 60 tutoriais de WordPress brilhantes
Origami é um kit de ferramentas para QC, desenvolvido pelo Facebook, que torna a prototipagem mais fácil ao encapsular padrões e conceitos comuns usados por designers de interação.
A prototipagem com QC é rápida: você pode alterar uma composição (editar valores, fazer novas conexões entre patches, trocar uma nova imagem) na hora, sem ter que recompilar ou esperar que o resultado tenha efeito em seu protótipo.
Faça seu protótipo
Isso torna o CQ muito mais rápido do que um ambiente de código que depende de recarregamento ou uma ferramenta baseada em vídeo que requer uma nova renderização.
Embora este tutorial o conduza até um protótipo final de uma maneira direta, é muito mais comum os designers brincarem no CQ, fazendo a transição de portas diferentes com valores diferentes. Construir habilidades em QC leva tempo.
Este tutorial tem como objetivo apresentar esta ferramenta poderosa, fornecer um ponto de partida para exploração futura e estabelecer uma base para construir e praticar.
Cobriremos a base da criação de composições: trabalhar com imagens, transições, animações, interruptores e a mais simples das interações. Para começar, você precisará obter o QC e o Origami seguindo as instruções em origami.facebook.com.
01. Ferramentas e visualizações
Ao criar uma nova composição do Quartz Composer (QC), você verá um Editor e uma janela do Visualizador. O Editor é uma visualização em grade que contém patches - por enquanto, apenas um Clear.
O Visualizador ficará em branco, pois tudo o que está em nosso documento é um campo claro preto. Conforme você insere mais patches no Editor, você verá a atualização do Visualizador em tempo real.
02. Torne-o móvel
A inserção do patch do Origami para o telefone é a primeira etapa em qualquer composição de controle de qualidade móvel. Para inserir um patch, pressione cmd + Enter para abrir a janela Biblioteca. Digite ‘Phone’ no início de digitação e pressione a tecla Enter para inserir o patch no Editor. Você verá um iPhone branco aparecer no Visualizador. Siga as mesmas etapas para inserir os patches Layer Group e Phone Dimensions.
03. É feito de patches
Patches são representações de funcionalidade, dados ou imagens. Eles recebem entrada e fornecem saída por meio de 'macarrão' conectado a 'portas' rotuladas. Os dados fluem por essas portas da esquerda para a direita.
Conecte a porta Pixels Wide em Phone Dimensions à porta correspondente no Layer Group clicando no ponto no primeiro patch e, em seguida, clicando no ponto no segundo (você também pode arrastar entre as portas para conectá-las). Em seguida, você pode conectar a porta de imagem do Layer Group à porta de imagem da tela do telefone.
04. Grupo de camadas
Grupo de camadas é um patch de macro que nivela as camadas e o conteúdo dentro dele em uma única imagem - pense nisso como um objeto inteligente no Photoshop. Todo o nosso trabalho subsequente acontecerá dentro deste patch. Clique duas vezes no patch para abri-lo. Você pode voltar à sua hierarquia a qualquer momento, pressionando o botão Editar Pai na barra de ferramentas.
05. Fazendo conexões
Agora que estamos em nosso grupo de camadas, arraste o arquivo PhotoGrid.png para a janela do Editor. Você verá um patch de imagem e camada aparecer no Editor e verá a própria imagem aparecer dentro do Visualizador. Você notará que os patches de imagem e camada são conectados por meio de suas portas de imagem.
Pode parecer complicado, mas na verdade faz muito sentido. Imagens individuais no QC podem ser conectadas a várias camadas, ou você pode decidir executá-las por meio de filtros ou outros patches antes de conectá-las a uma camada.
06. Construa sua família
Para se familiarizar com a forma como as camadas funcionam no Quartz Composer, selecione o patch de camada da etapa anterior e pressione cmd + T para visualizar os parâmetros do patch. Brinque um pouco com as portas X Position, Y Position e Opacity para ter uma ideia de como as camadas na tela se movem e se comportam.
Você notará que o QC funciona em um sistema de plano de coordenadas com 0 no centro da tela, e que Opacity funciona em um sistema decimal, indo de 0 a 1,0. Quando terminar de jogar, defina as posições de volta para 0 e a opacidade de volta para 1.
07. Renomeie sua camada
Renomeie sua camada clicando duas vezes no título. Renomeie-o como 'Photo Grid'.
08. Mudança de opacidade
Insira dois patches de transição e conecte suas portas de progresso de saída às portas Opacity e Alpha da camada do Photo Grid, respectivamente. Usaremos patches de transição para mudar os valores de opacidade e alfa da grade de fotos, como visto na saída final.
Próxima página: mais sobre como construir um protótipo com Quartz Composer
