socialgekon.com
  • Principal
  • Planejamento E Previsão
  • Armazenando
  • Outros Do Mundo
  • Kpis E Análises
Ferramentas E Tutoriais

Criação de ilustrações incríveis com Sketch e looper em nenhum momento

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.

Ilustrações feitas com Sketch e Looper

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.

Plug-in Looper para Sketch - Fluxo

Formas Abstratas

Forma abstrata feita com Looper e Sketch

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.

Configurações de forma no Sketch Configurações de Looper para Sketch

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

forma abstrata final do fundo feita com Sketch e Looper

Configurações de forma de esboço Configurações de Looper para Sketch

Padrões Simples

Padrão feito com Sketch e Looper

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:

criação de padrões no Looper para Sketch

Configurações básicas de forma no Sketch Configurações básicas de forma no Looper

Enfeites

3 enfeites feitos com Sketch e Looper

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.

Criação de ornamento com Sketch e Looper

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

Desenhe a forma inicial Configurações de Looper para Sketch

Efeito 3D

Imagem 3D feita com Sketch e Looper

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:

Configurações básicas de forma no Sketch Looper para configurações de Sketch

Partícula esférica

Esfera feita com partículas em Sketch e Looper

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:

Desenhe a forma inicial Configurações de Looper para 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:

Onda feita com Sketch e Looper

Desenhe a forma básica Configurações de Looper para Sketch

Tron 1982 - Grades de construção

Imagem inspirada em Tron 3D recriada com Sketch e Looper

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:

Formas básicas no Sketch

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.

Imagem inspirada em Tron 3D recriada com Sketch e Looper

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

Configurações de Looper para Sketch Configurações de Looper para Sketch

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

Grades de construção em perspectiva para criar uma ilustração Grades de construção em perspectiva para criar uma ilustração

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.

Ópera de Sydney ilustrada com Sketch e Looper

Configurações de formas básicas de esboço Configurações de Looper para Sketch

Quase a estrela da morte

Quase Estrela da Morte ilustrada com Sketch e Looper

Configurações de formas básicas de esboço Configurações de Looper para Sketch

Mar profundo

Criatura do mar profundo ilustrada com Sketch e Looper

Configurações de formas básicas de esboço Configurações de Looper para Sketch

Design da página de destino: construindo a página de destino final

Processo E Ferramentas

Design da página de destino: construindo a página de destino final
Menos é mais - Usando Lean UX para avaliar a viabilidade do produto

Menos é mais - Usando Lean UX para avaliar a viabilidade do produto

Design Ux

Publicações Populares
Criação de aplicativos reativos com Redux, RxJS e Redux-Observable no React Native
Criação de aplicativos reativos com Redux, RxJS e Redux-Observable no React Native
Principais erros de apresentação de argumentos de venda
Principais erros de apresentação de argumentos de venda
Os esforços de responsabilidade corporativa são lucrativos?
Os esforços de responsabilidade corporativa são lucrativos?
Índices SQL explicados, pt. 1
Índices SQL explicados, pt. 1
A culinária também deve ser ensinada nas escolas, diz a Chef Amrita Raichand
A culinária também deve ser ensinada nas escolas, diz a Chef Amrita Raichand
 
Guia: gerenciamento de versão de software para pequenas equipes
Guia: gerenciamento de versão de software para pequenas equipes
Analista de produto, marketing de crescimento
Analista de produto, marketing de crescimento
'Bebês de dragão' que moram em cavernas são exibidos pela primeira vez na Eslovênia
'Bebês de dragão' que moram em cavernas são exibidos pela primeira vez na Eslovênia
6 vezes a jornada de Michelle Obama como mãe parecia tão identificável
6 vezes a jornada de Michelle Obama como mãe parecia tão identificável
Harmonia imperfeita: uma visão geral do SoundCloud vs. Spotify
Harmonia imperfeita: uma visão geral do SoundCloud vs. Spotify
Categorias
Pessoas E Equipes De ProdutoDicas E FerramentasProcesso InternoFilmagemNutriçãoSaúdeProcesso E FerramentasMundoÁfrica Do Oriente MédioPessoas E Equipes

© 2023 | Todos Os Direitos Reservados

socialgekon.com