Quanto tempo você gasta criando ilustrações exclusivas e criativas para seus projetos? Provavelmente muito mais do que você gostaria.

Looper permite que você reduza o tempo de ilustração criando ilustrações totalmente originais. É um novo plugin do Sketch que permite criar formas e padrões únicos, duplicando, movendo e girando objetos várias vezes, resultando em ilustrações incríveis.

Hoje vou mostrar como - sem nenhuma habilidade de desenho - você pode criar ilustrações incríveis para seus designs de aplicativos, banners e fundos em 20 segundos ou menos.

Sinta-se à vontade para baixar o arquivo Sketch original que usaremos ao longo do tutorial.

Por que Looper?

Tenho pesquisado diferentes plug-ins e aplicativos para me ajudar a criar obras de arte originais e descobri que o Looper funciona melhor, pois me permite criar obras de arte complexas em segundos que eu costumava sonhar em criar por conta própria. Você pode criar vários tipos de arte, como padrões regulares ou aleatórios, fundos e até formas de logotipo.

O tutorial

Fluxo geral do looper e dicas

Ao trabalhar com o Looper, você sempre deve começar com uma forma simples. Para rodar seu 'loop', você pode usar CMD + L ou pode ir até o menu de plugins clicando em: PLUGIN> LOOPER> LOOP. Você pode usar o Looper em uma única camada ou em um grupo de camadas.

Lembre-se de que, se você estiver criando padrões grandes e complexos, pode levar muito tempo para o computador renderizar o resultado. Também notei que o Looper funciona melhor se você definir seus valores com as setas para cima e para baixo do teclado. Se você mantiver pressionada a tecla SHIFT enquanto usa a seta para cima ou para baixo, os valores aumentarão em dez em vez de um.

Formas Abstratas

A melhor maneira de entender como o Looper funciona é criar algo totalmente abstrato. Comece com uma ferramenta vetorial e desenhe a forma que desejar. Em seguida, execute seu loop (CMD + L) e brinque com as configurações da maneira que desejar.

Da mesma forma, você também pode criar fundos completos. Adicionar alguns gradientes à camada proporciona efeitos realmente interessantes:

Padrões Simples

Looper não é ótimo apenas para gerar formas abstratas, mas também para criar padrões simples, criativos ou aleatórios. No exemplo acima, usei um único retângulo para formar o padrão inteiro. Para criar padrões uniformemente distribuídos, use a seção 'Form a Grid' no Looper. Fiz isso aleatoriamente por rotação e opacidade, o que me deu um efeito fantástico em menos de 10 segundos:

Enfeites

Você também pode criar ótimos enfeites matematicamente perfeitos com o Looper. Desenhe uma linha vertical ou horizontal e adicione alguns elementos ao lado dela, por exemplo, criei um exemplo simples com uma linha e um círculo. Veja abaixo quantos ornamentos diferentes consegui criar simplesmente mudando o número de cópias. É um bom hábito começar com o menor número possível de cópias de forma e construir uma a uma. Dessa forma, você verá como seu padrão muda com o tempo.

Observe como estou usando apenas a função de rotação padrão e começo com duas cópias:

Efeito 3D

Descobri que, ao brincar com camadas no Sketch, você pode criar efeitos 3D impressionantes. A chave para fazer uma imagem 3D é adicionar alguns gradientes e sombras à sua forma inicial e duplicar essa forma na seção 'Mover'. A rotação e o tamanho também ajudam aqui:

Partícula esférica

O que você pode construir dobrando um único ponto? Bem, por um lado, você pode criar uma esfera feita de partículas. Depois de gerar um monte de pontos com tamanho e opacidade aleatórios, apenas mascare-os com a forma oval no Sketch:

Efeito Onda

O que poderíamos fazer com uma linha reta? Ao mover a linha alguns pixels ao longo de um eixo e girar suavemente, você pode criar uma onda muito estilosa, como no exemplo abaixo:

Tron 1982 - Grades de construção

Por último, mas não menos importante, vamos recriar a ilustração de Tron. Ao duplicar duas formas simples - uma linha e um retângulo - uma grade pode ser construída em perspectiva:

Tudo o que você precisa fazer é usar o Looper nessas formas duas vezes. Primeiro, duplique o retângulo com o tamanho aumentado em porcentagens. Você pode aumentar a opacidade de todas as instâncias na seção Opacidade. Na segunda etapa, duplique a linha com Rotação na configuração padrão.

Et voilà! Uma grade feita em perspectiva semelhante ao Tron feita em 20 segundos!

Você pode usar a grade de perspectiva para criar outras ilustrações 3D, como no exemplo a seguir:

Outros exemplos - Sydney

Neste ponto, você provavelmente notou que o Looper oferece possibilidades ilimitadas para criar ilustrações realmente complexas. Abaixo, fiz mais três exemplos inspiradores, cada um com uma forma inicial e as configurações necessárias para criá-los, de forma que você possa reproduzi-los ou usá-los como base para criar suas próprias ilustrações.

Quase a estrela da morte

Mar profundo