Advertisement
  1. Design & Illustration
  2. Illustration

Como Criar Um Plano de Fundo de Rolagem Longa Para um Website

Scroll to top
Read Time: 16 min

Portuguese (Português) translation by Felipe Code (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Neste tutorial você aprenderá como criar um fundo flat de longa rolagem para um website! Além do mais, em um tutorial futuro, você terá a oportunidade de vê-lo em ação e descobrir como fazê-lo funcionar! Para esta parte do tutorial, usaremos o Adobe Illustrator, suas formas básicas e funções para criar uma fantástica composição com vários elementos, conectados com o mesmo tópico.

Ao final desta lição, você será capaz de usar suas novas técnicas, não apenas para criar um fundo para um website, mas também qualquer tipo de composições flat ou ilustrações, tais como fundos sem emenda para games, paisagens urbanas ao estilo flat e muito mais. Navegue no Envato Market para incansável inspiração e se prepare para seguir o excitante processo.

1. Crie Objetos Espaciais e Planetas

Passo 1

Vamos começar fazendo nosso primeiro planeta. Pegue a Ellipse Tool (L) e segure shift para fazer um círculo magenta-escuro de 365 x 365 px.

Troque para a Rectangle Tool (M) e faça uma listra cor-de-rosa de 450 x 30 px.

make a planet from circlemake a planet from circlemake a planet from circle

Passo 2

Mantenha a listra selecionada, pressione Enter para abrir a janela de opções Move. Defina o valor de horizontal para 0 px e vertical para 30 px.

Pressione Control-D várias vezes para repetir nossa última ação e cobrir todo o círculo com as listras.

Agora selecione listras alternadas (eu as marquei com uma cor escura na captura de tela abaixo para tornar isso claro) e torne-as mais curtas.

add more stripes with the move functionadd more stripes with the move functionadd more stripes with the move function

Passo 3

Agora selecione todas as listras e use a opção Unite no painel Pathfinder para mesclá-las em uma forma única. Depois de fazer isso, você pode variar o tamanho de algumas listras tornando-as mais curtas ou mais longas. No entanto, você também pode fazer isso antes de usar a opção Unite, mas em alguns casos você precisará usar a Direct Selection Tool (A), selecione os pares de ponto de âncoras e mova-os para a esquerda ou para a direita.

Quando estiver satisfeito com a posição das listras, selecione tudo com a Direct Selection Tool (A) e use o recurso Live Corners para tornar os cantos totalmente arredondados ao arrastar os pequenos círculos que estão localizados próximos de cada canto.

Este recurso só está disponível no Adobe Illustrator CC, mas se você está usando uma versão anterior do programa, tente ir em Effect > Stylize > Round Corners para obter um efeito similar.

Unite the stripes and use Live CornersUnite the stripes and use Live CornersUnite the stripes and use Live Corners

Passo 4

Copie a forma e cole atrás (Control-C > Control-B). Mova a nova forma para a esquerda um pouco pressionando shift e a seta esquerda no teclado algumas vezes. Mude o comprimento de algumas faixas com a ajuda da Direct Selection Tool (A) para fazer a cópia se parecer um pouco diferente. Torne a nova forma um pouco mais escura que a original.

Agora vamos ver como podemos fazer com que as formas se ajustem umas às outras. Copie (Control-C > Control-F) o círculo de trás e traga-o para a frente (Shift-Control-]). Selecione tudo, clique com o botão direito do mouse e faça uma Clipping Mask (Make Clipping Mask).

Ótimo! Agora temos tudo escondido no círculo! E ainda podemos editar o conteúdo da Clipping Mask ao clicar duas vezes no objeto e entrar no modo de isolamento. Por exemplo, você pode adicionar outra forma dentro do planeta, tornando-o um pouco mais escuro.

make a clipping maskmake a clipping maskmake a clipping mask

Passo 5

Vamos criar outro planeta de tamanho menor. Faça um círculo azul de 130 x 130 px. Pegue a Line Segment Tool (\) e segure Shift para fazer uma curta faixa horizontal. Você pode editar as configurações de Stroke pelo painel de controle no topo da tela ou pelo painel Stroke (Window > Stroke). Torne a cor do contorno (Stroke) um pouco mais clara que a cor do planeta. Defina Weight para 2 pt e Profile para Width Profile 1, tornando as extremidades da linha pontiagudas.

make another planet from a circlemake another planet from a circlemake another planet from a circle

Passo 6

Adicione mais listras, variando o comprimento. Duplique o círculo e traga-o para a frente (Shift-Control-]). Selecione tudo e faça uma Clipping Mask para esconder as faixas dentro do círculo.

Make Clipping Mask to hide the strokes insideMake Clipping Mask to hide the strokes insideMake Clipping Mask to hide the strokes inside

Passo 7

Crie uma lua simples fazendo um círculo de 80 x 80 e continue usando a Ellipse Tool (L) para cobrir a lua com ovais rosa-escuras, retratando crateras.

Create a simple moonCreate a simple moonCreate a simple moon

  Passo 8

Vamos criar nosso último planeta, fazendo-o um pouco mais detalhado. Comece criando um círculo laranja de 220 x 220 px.

Use a Rectangle Tool (M) para fazer linhas laranja-claras ao longo do círculo. Segure Alt-Shift e arraste-o para baixo, fazendo uma cópia e anexando-a à primeira faixa. Torne a nova faixa um pouco mais clara.

Continue adicionando faixas da mesma forma e varie as cores. Você pode deixar alguns intervalos para deixar a cor do planeta visível também. Você também pode tentar usar a Eyedropper Tool (I), segurando Shift e pegar as cores direto da minha captura de tela. Adobe Illustrator permite você pegar cores de qualquer parte da sua tela, mesmo fora da janela do programa.

Use a Clipping Mask para esconder as faixas dentro do círculo.

make a striped planetmake a striped planetmake a striped planet

Passo 9

Agora vamos adicionar um anel para o nosso planeta listrado, similar ao anel de Saturno. Use a Ellipse Tool (L) para fazer duas elipses achatadas em cima do planeta. Eu fiz a oval menor preta para torná-la visível.

Selecione as ovais juntamente com o planeta e clique no planeta mais uma vez para torna-lo um objeto-chave (você notará uma seleção mais espessa ao redor do objeto). Vá até o painel Align e clique em Horizontal Align Center para deixar os objetos completamente centralizados.

add a ring to our striped planet and align themadd a ring to our striped planet and align themadd a ring to our striped planet and align them

Selecione ambas as formas e use a função Minus Front do painel Pathfinder para cortar a oval da frente, deixando um furo.

use the Minus Front function of the Pathfinder use the Minus Front function of the Pathfinder use the Minus Front function of the Pathfinder

Passo 10

Agora duplique o planeta base e traga-o para a frente (Shift-Control-]) e então recue (Send Backward, Control-[) uma posição, posicionando o círculo logo abaixo do anel do nosso planeta.

Selecione ambos, o círculo e o anel e pegue a Shape Buider Tool (Shift-M). Segure Alt e clique na parte do anel que está sobrepondo o círculo a fim de deletá-lo. Como você pode ver, agora temos uma abertura e duas partes do círculo que não precisamos mais.

Delete as partes desnecessárias. Nosso planeta parecido com Saturno está pronto!

use the Shape Builder Tool to edit the ringuse the Shape Builder Tool to edit the ringuse the Shape Builder Tool to edit the ring

2. Crie as Nuvens

Passo 1

Vamos fazer diferentes tipos de nuvens para diferentes camadas de atmosfera.

Use a Ellipse Tool (L) para fazer um círculo azul-claro de 100 x 100 px. Adicione um segundo círculo de 55 x 55 px à direita. Finalmente, anexe mais um par de círculos à esquerda, variando os tamanhos e tornando a nuvem "macia".

make a cloud from circlesmake a cloud from circlesmake a cloud from circles

Passo 2

Selecione todos os círculos e pegue a Eraser Tool (Shift-E). Segure Alt e arraste a seleção no rodapé da nuvem para apaga-lo.

Finalmente use a função Unite no painel Pathfinder e defina a opacidade (Opacity) da forma para 50% no painel Transparency

use the eraser tool and lower the opacityuse the eraser tool and lower the opacityuse the eraser tool and lower the opacity

Passo 3

Agora vamos criar um simples elemento ambiental que irá retratar uma montanha estilizada ou um pico. Use a Rectangle Tool (M) para fazer uma faixa vertical de 95 x 410 px.

Vamos preenchê-la com um gradiente linear de azul-escuro para azul e então para azul-claro. Defina Opacity do slider azul-claro para 0% no painel Gradient, tornando-o transparente. Use a Gradient Tool (G) para posicionar o gradiente verticalmente.

Selecione o topo do retângulo com a Direct Selection Tool (A) e use o recurso Live Corners para deixa-lo arredondado.

make a vertical peakmake a vertical peakmake a vertical peak

Passo 4

Agora vamos fazer outro tipo de nuvem.

Faça um retângulo turquesa de 220 x 25 px. Adicione um retângulo menor acima, anexando-o ao primeiro. Então adicione um terceiro retângulo acima do segundo, deixando-o mais largo. Use a função Unite para unir todas as partes no painel Pathfinder.

Torne todos os cantos arredondados, usando o recurso Live Corners.

make a cloud from rectanglesmake a cloud from rectanglesmake a cloud from rectangles

Passo 5

Adicione mais nuvens, variando suas formas. Vá até o painel Transparency e defina Opacity das suas nuvens em 50%.

set the Opacity of your clouds to 50set the Opacity of your clouds to 50set the Opacity of your clouds to 50

3. Faça o Fundo e Organize os Elementos

Passo 1

Primeiro de tudo, vamos definir o tamanho da nossa Artboard para 800 x 4400 px, usando a Artboard Tool (Shif-O). Você pode selecionar este instrumento e definir o tamanho no painel de controle no topo.

Use a Rectangle Tool (M) para fazer uma forma do mesmo tamanho (800 x 4400 px) e alinhe-a à prancheta (Align it to the Artboard).

Vamos preencher o retângulo com um gradiente linear vertical, organizando as cores como mostrado na captura de tela abaixo: partindo de um violeta escuro para um azul e lilás na parte de baixo.

make a long background with linear gradientmake a long background with linear gradientmake a long background with linear gradient

Passo 2

Vamos começar adicionando nossos objetos no topo. Posicione os planetas em cima da parte escura na tela, combinando os elementos uns com os outros. Então comece adicionar as nuvens, variando seus tamanhos e posições.

start adding our objects from the topstart adding our objects from the topstart adding our objects from the top

Passo 3

Mova para baixo na sua tela e use o pico estilizado que criamos para formar um grupo de picos. Faça múltiplas cópias e posicione-as umas na frente das outras, deixando umas maiores e outras menores.  As partes inferiores dos picos mesclam perfeitamente com o fundo, já que os fizemos semitransparentes.

form a group of peaksform a group of peaksform a group of peaks

Passo 4

Vamos adicionar mais algumas formas para a atmosfera. Crie duas ovais largas, usando a Ellipse Tool (L) e faça-as sobrepor umas às outras, como mostrado na captura de tela abaixo. Selecione ambas as formas e use a função Minus Front do painel Pathfinder para cortar as formas, assim teremos apenas uma forma crescente resultante.

Defina Opacity da forma em 50% e torne a cor um pouco mais clara, se necessário, para deixar a forma semitransparente. Adicione uma segunda meia-lua no topo, mudando um pouco a cor.

add semi-transparent shapesadd semi-transparent shapesadd semi-transparent shapes

Passo 5

A parte inferior do nosso fundo permanece em branca, então vamos preenche-la com novos elementos, criando uma pequena floresta e solo.

Use a Ellipse Tool (L) para fazer um grupo de círculos, variando os tamanhos e fazendo-os se sobreporem. Use a função Unite no painel Pathfinder para mesclar todos os círculos e preencha a forma resultante com um gradiente linear vertical do lilás, na parte inferior, para o azul, na parte superior.

make tree crowns from circlesmake tree crowns from circlesmake tree crowns from circles

Passo 6

Agora vamos formar o tronco da árvore. Use a Rectangle Tool (M) para fazer uma forma estreita vertical de 75 x 1180 px para o tronco. Preencha a forma com um violeta-escuro para criar um contraste sobre o fundo claro. Pegue a Direct Selection Tool (A) e selecione o ponto de âncora esquerdo. Pressione Enter para abrir a janela de opções Move e defina o valor de Horizontal para 20 px e Vertical para 0 px. Clique OK, assim movendo o ponto em 20 px para a direita. Repita a operação para o ponto de âncora direito, movendo na direção oposta.

Vamos também adicionar alguns galhos para a nossa árvore. Pegue a Arc Tool (você pode encontrá-la no mesmo menu suspenso que a Line Segment Tool (\)). Faça uma linha curva e defina a cor de Stroke (contorno) para o mesmo violeta escuro que colocamos no tronco (use a Eyedropper Tool (I) e segure Shift para copiar a cor.  Vá até o painel Stroke e defina o valor de Weight para 20 pt e Cap e Corner para as posições do meio, tornando as pontas dos galhos arredondadas.

make a tree trunk from rectanglemake a tree trunk from rectanglemake a tree trunk from rectangle

Passo 7

Duplique nosso tronco da árvore e mude a posição dos galhos para tornar a composição versátil. Posicione os troncos abaixo da coroa da árvore pressionando Control-[.

Vamos adicionar alguma dimensão para as nossas árvores. Crie outro grupo de círculos, preenchendo-os com uma cor violeta (um pouco mais clara que os troncos). Use a opção Unite do painel Pathfinder e pressione Control-[ algumas vezes para recuar a forma para trás dos troncos.

attach the trunks to the tree crownattach the trunks to the tree crownattach the trunks to the tree crown

Passo 8

Crie mais cópias das árvores e torne-as mais claras. Posicione as cópias dos troncos escuros, criando um efeito aéreo e adicionando profundidade para a nossa floresta.

Adicione arbustos púrpura no rodapé dos troncos, formando-os a partir de círculos da mesma forma que fizemos com as coroas das árvores.

add more tree trunksadd more tree trunksadd more tree trunks

Passo 9

Agora vamos adicionar o solo para formar a parte inferior da nossa composição. Use a Rectangle Tool (M) para criar uma forma de 800 px de largura (o mesmo tamanho que definimos para nossa artboard). Você também pode duplicar o retângulo do fundo, mova-o para o topo e diminua a altura. Preencha-o com a mesma cor lilás que os troncos de trás, para mesclar as formas visualmente umas com as outras.

Agora pegue a Curvature Tool (Shift-‘) e vamos dobrar o lado superior do solo um pouco arrastando sua metade esquerda para baixo. Adicione uma onda suave puxando a metade oposta da aresta superior para cima.

shape the ground and use the curvature toolshape the ground and use the curvature toolshape the ground and use the curvature tool

Passo 10

Adicione outra camada de solo, preenchendo-o com o mesmo tom de violeta que colocamos nos troncos do meio, fazendo as formas se misturarem. Dobre a forma, usando a Curvature Tool (Shift-‘).

Finalize o solo adicionando a layer mais escura no topo, dobrando-as e usando a Ellipse Tool (L) para salpicar pequenas ovais pelo chão, tornando-o um pouco mais texturizado.

add layers of the ground and speckle the oval stonesadd layers of the ground and speckle the oval stonesadd layers of the ground and speckle the oval stones

Passo 11

Agora que temos todos os objetos posicionados e organizados, vamos ver como podemos ocultar as partes que estão se sobressaindo da prancheta.

Duplique (Control-C > Control-F) o retângulo longo que forma o fundo e traga-o para a frente (Shift-Control-]). Agora selecione tudo, clique com o botão direito do mouse e escolha a opção Make Clipping Mask. Voilà! Agora todos os objetos estão ocultos dentro da grande Clipping Mask.

O que você também pode fazer para acelerar o seu fluxo de trabalho é manter os objetos agrupados (um grupo de planetas, um grupo de nuvens, picos, árvores, etc) e usar uma Clipping Mask separada para cada grupo.

use Clipping Masksuse Clipping Masksuse Clipping Masks

Passo 12

Você pode continuar adicionando elementos dentro da máscara, a fim de tornar o fundo mais detalhado e intrincado. Por exemplo, eu inseri algumas estrelas, adicionando profundidade para o topo do fundo. 

 continue adding the elements inside the mask continue adding the elements inside the mask continue adding the elements inside the mask

4. Desenhe Personagens ou Elementos de Movimento ao Plano de Fundo.

Passo 1

Agora que temos o plano de fundo pronto, vamos criar vários objetos que estarão por toda a imagem, à medida que o rolamos. Estes serão os elementos chave que se moverão do topo para o rodapé do fundo, um por um.

Começaremos a criar um disco voador. Use a Ellipse Tool (L) para fazer um círculo turquesa de 200 x 200 px. Faça uma oval magenta e envie-a para trás pressionando control-[.

Use a Line Segment Tool (\) e pressione Shift para fazer uma faixa horizontal ao redor do círculo. Selecione ambos os círculos e a linha, use a função Divide do painel Pathfinder para dividir a forma. Selecione a metade inferior e envie-a para trás (Shift-Control-[), do disco.

make a flying saucer from ellipsesmake a flying saucer from ellipsesmake a flying saucer from ellipses

Passo 2

Use a Curvature (Shift-‘) para dobrar o canto do círculo de cima, tornando-o um pouco curvado.

Agora vamos adicionar alguma dimensão para nosso OVNI e decorá-lo com detalhes adicionais. Copie a oval magenta e envie-a para trás (Control-C > Control-B). Torne a cópia de trás um pouco escura e arraste o lado inferior usando a Selection Tool (V), tornando a forma um pouco mais larga.

Duplique (Control-C > Control-B) a metade inferior do círculo turquesa e diminua a cópia da frente um pouco, arrastando seu canto inferior para cima. Preencha a cópia inferior de amarelo, criando um tom suave.

Use a Ellipse Tool (L) para criar um grupo de círculos amarelos ao redor do anel do disco.

add details to the sauceradd details to the sauceradd details to the saucer

Passo 3

Vamos finalizar nosso OVNI adicionando um reflexo à superfície do vidro. Copie a metade superior do círculo turquesa e posicione na frente duas vezes (Control-C > Control-F > Control > F). Mova a cópia da frente para a direita um pouco, usando a seta direita no teclado.

Selecione a cópia superior e a de trás e clique na opção Minus Front no painel Pathfinder para cortar as formas, deixando apenas uma estreita faixa crescente no canto esquerdo do OVNI. Preencha a forma criada com um azul-claro, formando um brilho. Você pode adicionar um círculo menor da mesma cor no topo, tornando o OVNI um pouco mais completo.

add a reflection to the UFOadd a reflection to the UFOadd a reflection to the UFO

Passo 4

Agora vamos criar um personagem escondido dentro do OVNI. Um alien. Primeiro de tudo faremos com que pareça que ele está descendo da nave através da atmosfera.

Pegue a Ellipse Tool (L) e faça um círculo azul claro de 50 x 50. Faça uma oval azul escura para o olho. Mantenha o olho selecionado, clique duas vezes na Reflect Tool (O) e vire a forma sobre o Vertical Axis. Clique em Copy para adicionar o segundo olho.

Faça um círculo magenta de 75 x 75 e posicione-o logo atrás da cabeça do alien.

make aliens head from circlemake aliens head from circlemake aliens head from circle

Passo 5

Use a Rectangle Tool (M) para criar uma forma turquesa de 100 x 330, posicione-a atrás da cabeça do alien. Selecione os pontos de âncora inferiores da forma com a Direct Selection Tool (A) e use o recurso Live Corners para tornar a parte inferior totalmente arredondada.

Adicione duas faixas verticais na frente da forma turquesa e use a função Minus Front do painel Pathfinder para cortar as formas.

add a rectangle and use minus front functionadd a rectangle and use minus front functionadd a rectangle and use minus front function

Passo 6

Use a Direct Selection Tool (A) para selecionar os pontos de âncora superiores das faixas e arraste-os para cima ou para baixo, variando o tamanho das formas. Use o recurso Live Corners para tornar os cantos arredondados. Agora as formas se parecem com um cometa ou um meteoro caindo.

Mantenha as formas selecionadas, vá em Object > Path > Offset Path e defina o valor de Offset para 5 px, assim criando uma forma mais larga. 

Torne a cor da forma de dentro um pouco mais clara, adicionando um pouco de dimensão.

shape the tips of the cometshape the tips of the cometshape the tips of the comet

Passo 7

Use a Direct Selection Tool (A) para variar a altura das faixas claras e escuras.

finish up with the cometfinish up with the cometfinish up with the comet

Passo 8

Agora vamos criar o corpo do nosso alien antes que ele caia no chão. Usaremos a cabeça e adicionaremos elementos a ela. Use a Rectangle Tool (M) para criar uma forma azul clara de 6,5 x 85 px através da cabeça. Adicione um círculo menor de 15 x 15 px no topo.

add a neck from rectangleadd a neck from rectangleadd a neck from rectangle

Passo 6

Agora vamos formar o corpo a partir de um retângulo azul-claro de 70 x 140 px. Adicione duas faixas verticais acima do retângulo e use a função Minus Front do painel Pathfinder para cortá-lo, formando dois longos e finos braços.

Use a Direct Selection Tool (A) e mova os pontos de âncora inferiores dos braços para cima, tornando-os mais curtos que o corpo.

shape the body and arms from rectanglesshape the body and arms from rectanglesshape the body and arms from rectangles

Passo 10

Adicione outro retângulo no topo do corpo e corte-o usando Minus Front para formar as pernas da nossa criatura.

Use a Direct Selection Tool (A) e o recurso Live Corners para tornar todos os cantos totalmente ou parcialmente arredondados.

shape the legs and make the body roundedshape the legs and make the body roundedshape the legs and make the body rounded

Passo 11

Vamos finalizar nosso alien selecionando seu corpo e indo em Object > Offset Path com valor de Offset de 5 px para criar uma forma mais larga ao redor do corpo. Preencha a forma resultante com o mesmo magenta que o círculo ao redor da cabeça.

make offset path around the alienmake offset path around the alienmake offset path around the alien

Passo 12

Finalize o plano de fundo posicionando os elementos principais no cento do fundo, começando pelo OVNI no topo e finalizando com o alien no solo. E isso é tudo!

place the elements on the backgroundplace the elements on the backgroundplace the elements on the background

Fantástico! Nosso plano de fundo de rolagem longa está terminado!

Ótimo trabalho! Chegamos ao fim do nosso tutorial e terminamos o excitante processo de criar elementos e combiná-los uns com os outros, construindo uma composição balanceada. Aprendemos como transformar formas geométricas básicas e como usar várias funções do Adobe Illustrator para tornar nosso fluxo de trabalho mais rápido e eficiente.

Podemos usar essas técnicas fantásticas para projetos futuros, criando planos de fundos sem emendas, composições detalhadas e cenários planos, paisagens, prédios e muito, muito mais.

Agora que temos uma versão estática do nosso plano de fundo, vamos aprender como fazê-lo funcionar e se mover. Fique ligado e não perca!

Long Scrolling Flat Background is FinishedLong Scrolling Flat Background is FinishedLong Scrolling Flat Background is Finished
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Advertisement
One subscription. Unlimited Downloads.
Get unlimited downloads