Como fazer uma ilustração com efeito Parallax

Descubra, passo a passo, como dar profundidade e dinamismo a uma ilustração usando esta técnica

É provável que você já conheça esse efeito, talvez já tenha até visto em um site: ao entrar na página e fazer scroll, o fundo parece se mover de forma diferente do conteúdo, criando um efeito de profundidade. Isso é conhecido como Parallax, uma tendência que começou no web design, mas se espalhou para a ilustração e a realidade aumentada.

Este recurso oferece dinamismo a qualquer peça 2D, simula o deslocamento de elementos de um fundo para que pareçam dar uma perspectiva diferente. Um efeito visual que diminui a aparência plana para mergulhar o espectador ou usuário em uma experiência mais profunda e chamativa.

Para conhecer o efeito em detalhes, conversamos com o ilustrador Jarom Vogel, um dos primeiros ilustradores que se arriscaram a utilizá-lo em seus desenhos.

Jarom Vogel trabalhou como designer e desenvolvedor web, mas decidiu focar na criação e ilustração independente há um ano. Vogel encontrou um estilo que se destaca por ser plano, colorido e cheio de texturas, uma herança clara do gosto pela tinta acrílica, bordas e formas definidas que desenvolveu durante os anos de universidade.

Em cada peça busca transmitir o sentido de natureza e aventura, com temáticas sempre adequadas para crianças, razão pela qual teve a necessidade de procurar novos elementos para tornar o seu trabalho mais atrativo, como, por exemplo, o efeito Parallax. Essa busca o levou a colaborar com Apple, Disney, Procreate e Adobe.

Agora, Jarom Vogel compartilha com a comunidade o processo criativo por trás de uma peça incorporando o Parallax.

Como fazer uma ilustração com efeito Parallax?

1. O esboço

Sempre começo com um esboço. Para esta peça fiz uma pequena e animada, mas normalmente só faço a lápis. Desta vez, eu queria que esta peça parecesse um círculo de luz na floresta, com a escuridão ao redor.

2. A importância do detalhe

Passei muito tempo corrigindo o desenho. Não estava satisfeito com as cores do original, então comecei a fazer de novo: corrigi sombras, adicionei luz, texturas e usei tons mais frios. Também fiz a tela um pouco maior, passei de um quadrado de 512 px para 2048 px.

3. A melhora da animação

Uma vez satisfeito com a parte estética, melhorei a animação. Tenho feito essa etapa no Procreate. Sou muito lento, então trabalho com cinco camadas diferentes, mas apenas três quadros de movimento. Muito simples.

4. Preparando a interação

Terminada a animação, decido como quero agrupar minhas camadas para levá-las a uma versão interativa. Exporto todas essas camadas e as nomeio de uma forma que faça sentido para a codificação (todos os círculos azuis são as sombras, que exportei no modo fusão de cor na peça finalizada).

5. O código

Faço upload de todos os arquivos em uma pasta especial em meu site e converto para HTML. Nesta peça decidi usar transformações 3D em CSS. Em outros projetos, usei um efeito Parallax mais simples, em que cada camada é deslocada de maneira diferente quando se move, o que dá uma sensação básica de profundidade.

Neste ponto também escolho se integro a realidade aumentada, embora isso ainda não funcione muito bem na web, então preciso mudar para o Xcode. De qualquer forma, as configurações são as mesmas até este ponto, só é preciso decidir como manipular os elementos. É importante ter uma grande máscara branca na frente, caso contrário, todas as bordas das camadas apareceriam e estragariam o efeito.

6. A interação

Finalmente, é preciso adicionar o uso do giroscópio e acelerômetro do dispositivo. São necessários muitos testes e muito tempo para ajustar muitos números e tornar as coisas mais naturais. Depois disso, está tudo pronto. Em suma, esta peça foi desenhada e animada em Procreate com código HTML, CSS e Javascript.

Gravar um vídeo com uma das mãos enquanto movo o dispositivo com a outra é, na verdade, uma das partes mais difíceis para mim.

Confira mais do trabalho de Jarom Vogel.

Você também pode se interessar por:

- Como começar um rascunho de ilustração vetorial
- 5 timelapses de Photoshop para descobrir as possibilidades do software
- A importância das influências, por Willian Santiago