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

Looper permite reduzir o tempo de ilustração enquanto cria ilustrações completamente 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 alucinantes.

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

Sinta-se à vontade para baixar o original Arquivo de esboço Criei para acompanhar durante o tutorial.

Por que Looper?

Tenho feito pesquisas sobre diferentes plug-ins e aplicativos para me ajudar a criar ilustrações originais e descobri que o Looper funciona melhor, pois me permite criar ilustrações complexas em segundos que eu costumava sonhar em criar sozinho. Você pode criar vários tipos de ilustrações, como padrões regulares ou aleatórios, fundos e até formas de logotipo.

O tutorial

Fluxo e dicas gerais do looper

Ao trabalhar com o Looper, você sempre deve começar com uma forma simples. Para executar o seu “loop”, você pode usar CMD + L ou acessar o menu de plug-ins 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 complexos e grandes, pode levar muito tempo para o computador renderizar o resultado. Além disso, percebi que o Looper funciona melhor se você definir seus valores com as setas para cima e para baixo no teclado. Se você segurar 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 como quiser.

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

Padrões Simples

Looper não é apenas ideal 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 todo o padrão. Para construir padrões igualmente distribuídos, use a seção “Form a Grid” no Looper. Eu randomizei meu padrão 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 próximos a ela. Criei um exemplo simples com uma linha e um círculo. Veja abaixo quantos enfeites diferentes eu consegui criar apenas mudando o número de cópias. É um bom hábito começar com o menor número possível de cópias de formas e aumentar 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çando com duas cópias:

Efeito 3D

Eu percebi que, ao brincar com as camadas do Sketch, você pode criar efeitos 3D impressionantes. A chave para fazer uma imagem com aparência 3D é adicionar alguns gradientes e sombras à sua forma inicial e duplicar essa forma na seção “Mover”. Girar e dimensionar também ajuda aqui:

Esfera de Partículas

O que você pode construir duplicando um único ponto? Bem, por um lado, você pode criar uma esfera feita de partículas. Depois de gerar muitos pontos com escala e opacidade aleatórias, 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 muito suavemente, você pode criar uma onda fria, 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 - você pode construir uma grade de perspectiva:

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

Et voilà! Uma grade de perspectiva com aparência de Tron feita em 20 segundos!

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

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 modo que você possa reproduzi-los ou usá-los como base para criar suas próprias ilustrações.

Quase Estrela da Morte

Deep Sea

• • •

Leituras adicionais no Blog de design do ApeeScape:

• eCommerce UX - Uma Visão Geral das Melhores Práticas (com Infográfico)
• A importância do design centrado no ser humano no design de produtos
• Os melhores portfólios de UX Designer - Estudos de caso e exemplos inspiradores
• Princípios heurísticos para interfaces móveis
• Design Antecipatório: Como Criar Experiências Mágicas do Usuário