Os elementos do design web retro

O estilo vintage e retro está se tornando cada vez mais popular na arte digital de hoje.

O uso de temas retro e vintage no design é provavelmente uma das tendências mais difundidas desde que a indústria foi quase totalmente digital.

No post de hoje, vamos dar uma olhada nos exemplos de trabalho provenientes do maravilhoso Dribbble , o que nos ajuda a focar em trechos de uma peça, em vez de todo o design ou ilustração.

A partir daqui, é possível identificar quais técnicas foram usadas e descrever como elas afetam o design geral. Você se familiarizará com essas tendências de design e poderá replicá-las.

Para ajudá-lo, pequenos tutoriais estão espalhados pelo artigo. Nós também lhe indicamos vários outros tutoriais e recursos úteis para você começar seu próprio trabalho vintage e retrô!

1. Círculos e Outras Formas Simples

Formas simples são comumente usadas em design vintage. Os círculos são os mais comuns, especialmente em branding. Os exemplos abaixo foram cuidadosamente selecionados para mostrar o quão poderosas as formas simples podem ser.

Esta linda ilustração faz uso de formas elípticas para produzir um sol e é finalizada com um efeito tipográfico.

A marca da Circlebox Creative é baseada em um círculo e inspirada por selos e crachás de tinta vintage. O design é gelado com padrões florais e estilo tipográfico simples.

Esse design é um pouco diferente porque depende muito de formas simples para torná-lo pop. O cabeçalho da barra azul usa uma longa fileira de pequenos círculos para criar uma borda inferior interessante.

Este design vintage, como a marca da Circlebox Creative, é inspirado em carimbos e crachás vintage. A identidade parece ter sido estampada em um pedaço de papel, ao contrário das linhas suaves e limpas do Circlebox.

Aqui está outra peça de marca baseada em um círculo. A textura e o azul entre todo o cinza trazem realmente este projeto à vida.

Um trabalho incrivelmente simples que consiste em dois círculos, uma textura, alguns estilos de mistura e tipografia limpa. Esta peça realmente demonstra o poder das formas simples.

Mini-Tutoriais

Como aplicar um padrão floral damasco a um círculo usando o Adobe Illustrator

Aplicar um padrão a um círculo no Illustrator é algo que você provavelmente fará muito se explorar a tendência retrô. A técnica é semelhante ao que Glace Cakes faz por sua marca (mostrada acima).

Abra o Illustrator e desenhe um círculo. Segure a tecla Shift enquanto arrasta o círculo para mantê-lo em volta. Insira seu padrão floral de damasco indo até Arquivo → Inserir.

Remova qualquer plano de fundo e altere a cor do seu padrão recém-colocado. Você pode selecionar itens individuais usando a ferramenta Seleção direta.

Selecione seu padrão usando a ferramenta Seleção e, em seguida, vá para Window → Pathfinder para abrir a janela do Pathfinder, caso ainda não tenha feito isso. Segure a tecla Shift e selecione seu círculo para selecionar os dois itens ao mesmo tempo. Clique no botão “Minus Front” na janela do Pathfinder para remover o padrão floral que está fora do seu círculo. Jogue com a sua escolha de cores e pronto!

Criando uma linha borbulhada usando o Adobe Photoshop

Vamos criar uma linha parecida com uma bolha, como a do exemplo acima.

Usando a ferramenta de letreiro retangular, arraste uma seleção e preencha com preto em uma nova camada. Selecione a ferramenta de letreiro elíptico e, mantendo pressionada a tecla Shift, arraste uma seleção muito pequena e preencha-a com preto, novamente em uma nova camada.

Posicione o círculo preto na parte inferior do seu retângulo preto. Duplique a camada e posicione o novo círculo ao lado do original.

Repita este passo até ter algo parecido com a imagem seguinte. Você terá muitas camadas. Selecione todas elas enquanto mantém pressionada a tecla Shift e, em seguida, vá para Camada → Mesclar camadas para transformá-las em uma.

Agora vamos adicionar alguns estilos de camada simples ou opções de mesclagem para dar vida à nossa forma! Clique com o botão direito na sua camada e selecione “Blending options”. A janela Layer Style deve abrir. Aplique os seguintes efeitos para adicionar um gradiente, sombra interna e sombra:

E acabamos!

2. Esquemas de cores de dois tons e limitados

Esquemas de cores de dois tons são uma grande coisa no design vintage porque produzir cópias coloridas não era tão fácil no passado como é agora. Abaixo estão alguns exemplos recentes de esquemas de cores de dois tons e limitados.

Esse design minimalista obtém seu apelo visual das formas e linhas em preto e branco, especialmente a linha tracejada horizontal e formas recortadas da parte inferior do círculo.

Esta marca repete algumas cores selecionadas por toda parte. As cores funcionam incrivelmente bem juntas. O amarelo alaranjado é a cor focal que chama sua atenção.

Esta linda peça de design retro depende exclusivamente de cor e tipografia. As linhas sutis de um pixel de largura terminam.

Outro design em preto e branco de dois tons. Essa identidade é baseada em um selo e obtém uma aparência levemente tridimensional a partir de tipografia e efeitos simples.

Este exemplo realmente mostra como a cor eficaz pode ser. Ele usa três cores: laranja, marrom e branco. O contraste entre as três amostras funciona muito bem para o design.

Esse design (a identidade em si, não o plano de fundo) depende exclusivamente da cor e da tipografia.

Este design combina laranja e um bom azul esverdeado com branco. A combinação de cores combina com as bordas extravagantes e efeitos tipográficos simples.

Ainda outro logotipo tipográfico vintage que se baseia em duas cores: tipo branco no vermelho. Observe como a identidade é baseada em um círculo.

Essa identidade usa apenas três cores, um tipo de letra elegante e um bom modo de mesclagem para colocar a cereja no topo do bolo.

Recursos de cor

Um monte de excelentes aplicativos estão disponíveis para ajudá-lo a criar seus próprios esquemas de cores. Esta pequena seleção compartilha vários dos melhores:

ColourLovers (aplicativo web)
Um site adorável dedicado a esquemas de cores. Navegue pelos temas existentes criados pela comunidade ou crie os seus próprios a partir do zero, carregando fotos.
Tucano Aviário (aplicativo web)
Outra aplicação web, mas sem um apoio da comunidade como o ColourLovers. Esta aplicação permite criar esquemas de cores a partir do zero ou de imagens importadas.
Adobe Kuler (aplicativo web)
Ainda outro aplicativo web de gerenciamento de cores, desta vez trazido a nós pela sempre adorada Adobe. A interface é impressionante e fácil de usar. O Kuler hospeda uma comunidade e você pode navegar pelos esquemas de cores mais bem classificados.
Fluxo de cor (aplicativo para iPhone)
Este aplicativo para iPhone permite criar e armazenar paletas de cores a partir do zero ou de uma foto importada. Você também pode gerar automaticamente esquemas de fotos usando o esquema de cores integrado.
Paletas (aplicativo para iPhone)
Paletas é semelhante ao Color Stream, permitindo que você crie e armazene esquemas de cores em movimento desde o início ou a partir de uma imagem. Você também pode pegar cores do seu site favorito.

Se você é um novato, aqui estão alguns artigos que vale a pena conferir: Escolhendo combinações de cores ”E“ Teoria das cores para designers, parte 3: Crie suas próprias paletas de cores .

3. Elementos tipográficos e tendências

A tipografia é um dos elementos mais importantes no design digital retro. Existem infinitas possibilidades com design de tipos, algumas das quais podem ser encontradas nos exemplos abaixo.

Esse trecho de design de tipos é repleto de bondade de efeito de texto. O texto é finalizado com um drop-shadow e um simples mas realmente impressionante padrão de linha diagonal de um pixel.

Aqui está a minha peça tipográfica favorita neste mostruário. Ele combina alguns excelentes estilos vintage com técnicas modernas. O tipo é trazido à vida pela adição de detalhes sutis, como o traço branco de um pixel na linha “Você está cordialmente convidado” e as sombras sempre importantes no tipo de data.

Esta tipografia retro revela técnicas surpreendentemente simples. O tipo “Design is” é duplicado três vezes e reposicionado. A parte inferior duplicada é então texturizada para criar um lindo estilo retrô em questão de minutos.

Ainda mais tipografia que usa um simples drop-shadow para adicionar profundidade ao tipo elegante e decorativo.

Tipografia simples combinada com formas semitransparentes e uma textura subtil. O design combina bem.

Você não pode ficar muito mais simples do que isso: uma poderosa escolha de tipos de letra.

Esta tipografia tridimensional foi provavelmente concluída no Illustrator, fazendo uso das ferramentas 3-D lá. Ruído sutil foi adicionado ao design, o que funciona bem com o esquema de cores limitado.

Este excelente instantâneo do design retro produzido digitalmente combina textura, ruído, formas simples, diferentes estilos de mistura e um excelente esquema de cores. A tipografia, especialmente do tipo maior, é trazida à vida pelas sombras acentuadas.

Esta impressionante peça de papelaria de inspiração vintage faz uso de elementos desenhados à mão pela sua aparência. O design também tem um esquema de cores limitado.

A tipografia branca neste design foi fundida com a imagem como se estivesse lá quando a fotografia foi tomada. Funciona bem com a foto sépia.

Mini-Tutoriais

Como criar uma tipografia desenhada à mão usando o Adobe, Photoshop ou Illustrator

Neste breve tutorial, você aprenderá a produzir, digitalizar e digitalizar rapidamente seu tipo desenhado à mão usando o Adobe Photoshop e o Illustrator.

Primeiro de tudo, desenhe algumas letras:

Você precisa preencher seu tipo de esboço de alguma forma. Você pode fazer isso usando tinta ou um marcador. Eu vou usar tinta preta da Índia e um pincel fino, o que eu recomendo, principalmente porque é tão puro e ousado.

Comece preenchendo suas linhas esboçadas.

Você deve acabar com algo que se parece com isso.

Em seguida, digitalize sua imagem. Se você não possui um scanner, basta fotografar o trabalho - apenas certifique-se de que ele é de alta qualidade. Depois que a imagem for digitalizada ou fotografada, abra um novo arquivo do Photoshop e vá para Arquivo → Colocar; localize a imagem e coloque-a no seu documento.

Vá para Imagem → Ajustes → Brilho / Contraste. Aumentar o nível de contraste para algo em torno de 50. Isso escurecerá o preto na imagem.

Salve seu arquivo como uma imagem e abra o Adobe Illustrator. Crie um novo arquivo RGB e vá para Arquivo → Inserir. Localize sua imagem recém-salva e coloque-a na sua tela. Na barra de menu na parte superior da tela, selecione a opção "Live Trace". Seu texto agora é um vetor de trabalho e pode ser ampliado ou reduzido como quiser, para ser usado em seus documentos do Photoshop.

Como adicionar tipografia a uma fotografia da cidade usando o Adobe Photoshop

Vamos adicionar tipografia a uma fotografia usando uma técnica semelhante à usada para a fotografia de Amsterdã acima. Para o propósito deste tutorial, usaremos esta fotografia de Barcelona .

Copie a fotografia e crie um novo documento do Photoshop. Cole a fotografia no documento. Selecione a ferramenta Texto e digite “Barcelona” no tipo de letra de sua escolha. Vá para Editar → Transformar → Girar e gire a tipografia em um ângulo para que ela fique alinhada com o ângulo dos edifícios.

Você notará que algumas das letras não se sobrepõem aos edifícios. Para corrigir isso, selecione a ferramenta Caneta e estenda manualmente a parte inferior das letras desenhando novas formas sobre elas. Depois de fazer isso, clique com o botão direito do mouse e selecione "Preencher caminho". Preencha a seleção com preto.

Em seguida, exclua as áreas sobrepostas do seu tipo. Mais uma vez, use a ferramenta Caneta para criar uma seleção. Zoom direito em sua fotografia e trace ao redor do edifício e da árvore. Depois de fazer isso, clique com o botão direito do mouse e vá para "Make Selection". Agora você deve ter uma linha tracejada em movimento como a abaixo:

Clique com o botão direito do mouse na sua camada de tipografia e selecione “Rasterize Type.” Isso irá transformá-lo de uma camada de tipo em uma camada padrão. Mesclar o seu tipo de camada com as formas personalizadas que fizemos anteriormente, selecionando todos eles, mantendo pressionada a tecla Shift e indo para Layer → Merge Layers. A seleção que fizemos na última etapa com a ferramenta Caneta ainda deve estar ativa. Com a única camada de texto agora selecionada, pressione a tecla Delete. Isso deve remover todo o texto sobreposto.

Agora é hora de editar fotos muito simples para mesclar o seu tipo um pouco melhor. Selecione a camada de plano de fundo (que deve ser sua fotografia) e vá para Imagem → Ajustes → Desaturar para transformar sua fotografia em escala de cinza / preto e branco. Agora vá em Image → Adjustments → Photo Filter. Selecione a opção sépia no menu suspenso e brinque com o controle deslizante de nível para definir a intensidade do efeito. Eu escolhi cerca de 60%.

Clique com o botão direito na sua camada de texto e selecione “Blending Options” no menu. Aplique uma sobreposição de cores ao seu tipo; Eu usei um castanho claro. Aqui está o meu resultado:

Como aplicar uma sombra e sobreposição de padrões à tipografia usando o Adobe Photoshop

Neste breve tutorial, vamos criar uma peça simples de tipografia usando efeitos integrados do Photoshop. Nós também vamos criar nosso próprio padrão.

Primeiro vamos criar nosso padrão simples. Abra um novo documento do Photoshop com 3 × 3 pixels. Agora selecione a ferramenta Lápis. Aumente o zoom em sua tela e, usando preto # 000000, coloque três pontos diagonalmente na tela, como visto abaixo:

Vá para Editar → Definir Padrão para exibir a caixa de campo a seguir. Chame seu padrão de algo adequado (chamei o meu de "Diag Line 1"). Clique no botão "OK". Seu padrão está feito!

Crie outro novo documento do Photoshop. Preencha o fundo com uma cor clara à sua escolha e adicione alguma tipografia à tela. Os tipos de letra que eu usei são Helvetica Neue Medium e Helvetica Neue Bold.

Selecione novamente seu texto e altere sua cor. Escolha algo que contrasta bem com o fundo. É importante definir a cor do texto em vez de usar uma sobreposição de cores, porque usaremos uma sobreposição de padrão mais tarde e, infelizmente, você não poderá usar as duas.

Clique com o botão direito do mouse na sua camada de texto e selecione “Blending options” para abrir a janela Layer Style. Selecione "Pattern Overlay" e, na caixa suspensa padrão, selecione o padrão que fizemos anteriormente. Altere o modo de mesclagem para “Overlay” e a opacidade para 30%. Os resultados irão variar dependendo da sua escolha de cor, por isso sinta-se à vontade para experimentar.

Agora vamos aplicar uma sombra interna. Use as configurações vistas na imagem abaixo:

Agora aplique um drop-shadow muito fraco, mas importante. Prestar atenção aos pequenos detalhes vale sempre a pena. Use configurações semelhantes às vistas na captura de tela abaixo:

Para finalizar a tipografia, duplicamos o texto inteiramente. Clique com o botão direito do mouse na camada de texto e selecione “Duplicar camada”. Selecione a ferramenta Mover, mova o tipo em outro lugar do documento e reposicione-o abaixo da camada de texto original. Abaixe a opacidade e pronto.

4. Estilos de mistura

Estilos de mistura (normalmente conhecido como o modo de mesclagem no Photoshop e no Illustrator) é uma ótima maneira de adicionar dimensão ao seu trabalho sem muito esforço. Ele permite que você misture objetos e cores de várias maneiras diferentes. Os modos de mesclagem costumam ser usados com diferentes níveis de opacidade; por exemplo, ao aplicar uma textura fotográfica a uma imagem, que discutiremos mais adiante.

Parece que há três formas nesta marca, mas na verdade só existem duas: uma azul e uma vermelha. Um modo de mesclagem foi aplicado às formas para permitir a exibição do plano de fundo texturizado, mesclando as cores e criando um roxo escuro vívido.

Esta pequena peça é embalada com vários modos de mesclagem, texturas, fotografias e formas simples, resultando em um trabalho poderoso.

Este belo trabalho repete formas simples e usa diferentes modos de mesclagem para tornar cada forma única. Modos de mesclagem também foram aplicados à tipografia.

Os dois círculos neste design têm diferentes modos de mesclagem aplicados a eles, um dos quais projeta um tom vermelho na imagem abaixo, o outro modifica a imagem abaixo para um vermelho escuro, e ambos permitem que a textura apareça. Um vermelho vívido é produzido onde as duas formas se encontram.

Esta peça da Open Yoga Gallery é uma das minhas favoritas no mostruário. Combina um esquema de cores suave e limitado com uma fotografia e depois adiciona ruído, textura leve e tipografia elegante.

A fotografia nesta peça pode ter sido produzida cobrindo toda a foto com uma cor sólida e alterando o modo de mesclagem dessa camada, fazendo com que a imagem abaixo dela pareça desbotada e desgastada.

Esta peça é embalada com textura. Um modo de mesclagem foi aplicado a cada textura para permitir a exibição da imagem abaixo.

Semelhante à fotografia da Itália que vimos, esta foto foi manipulada usando uma camada cheia de cor com um modo de mesclagem. O estilo tem uma camada de blobs de cores diferentes, provavelmente com um modo de mesclagem de Overlay aplicado a eles e uma transparência reduzida.

O círculo no meio desta peça tem um modo de mesclagem aplicado a ela, permitindo que o plano de fundo apareça.

Mini-Tutoriais

Como misturar cores com fotografias usando o Adobe Photoshop

Neste mini-tutorial, aplicaremos a cor a uma fotografia em preto e branco usando a ferramenta Pincel e os modos de mesclagem. Eu vou estar usando esta fotografia de teia de aranha .

Abra um novo documento do Photoshop e coloque a fotografia de sua escolha na tela. Eu dei a minha uma borda branca.

Selecione uma escova macia e cor clara. Eu escolhi um pastel amarelo. Crie uma nova camada indo em Layer → New Layer. Pinte um grande splodge de sua cor para a nova camada, como visto aqui:

Repita o processo com mais cores. Você pode pintar essas cores na mesma camada - não há necessidade de criar novas camadas.

Quando terminar de colorir a sua camada, vá para Filter → Blur → Gaussian Blur. Desfoque a camada para mesclar essas cores um pouco mais. Qualquer coisa acima de 100 pixels deve ficar bem, mas isso depende do tamanho da sua tela: quanto maior a tela, mais pixels você precisará desfocar.

Agora podemos mudar o modo de mesclagem da camada. No menu suspenso do modo de mesclagem, na paleta de camadas, selecione "Overlay".

Diminua a opacidade da sua camada colorida para cerca de 50%. Você deve acabar com algo assim:

A experimentação é fundamental; Cada modo de mesclagem altera o produto final, o que significa que você nunca conseguirá reproduzir um resultado. O exemplo abaixo usa a tela do modo de mesclagem, que remove a foto e faz com que pareça retro. Experimentar efeitos como esse é tipicamente o modo como os efeitos de câmera retro Lomo e Holga são reproduzidos.

Recursos

Abaixo está uma pequena seleção de tutoriais de pôsteres vintage que usam estilos de mesclagem:

5. Textura e Ruído

A textura e o ruído adicionam interesse visual ao seu trabalho. Em alguns casos, um design simplesmente não parece certo sem eles. Em outros casos, a textura e o ruído podem ser demais. Abaixo estão alguns exemplos de designs retrô que funcionam bem com a textura.

Uma textura fotografada em estilo de tela é usada nesta peça, dando ao design geral uma bela aparência desgastada.

Esta textura limpa acaba por produzir um design limpo. O visual retro é conseguido com um pincel leve grunge para remover algumas áreas do logotipo e tipografia.

A textura do papel tem sido usada excessivamente nesta peça para produzir um trabalho digital desgastado com aparência vintage.

Semelhante ao último exemplo, uma textura de papel foi usada para fazer a obra de arte parecer um pôster antigo. Uma textura escura também é colocada por cima das silhuetas do boxeador.

Uma combinação de madeira, papel reciclado e texturas de manchas de café foram usadas aqui para produzir um efeito realmente impressionante. Um modo de mesclagem foi aplicado à camada em que o caractere está, permitindo que a textura seja exibida.

A textura neste web design é mínima e sutil, no entanto, contribui significativamente para o interesse visual do trabalho em geral.

A textura é usada aqui para animar o plano de fundo e a tipografia. A mais simples das texturas, mas ainda é tão eficaz.

A textura foi usada minimamente para animar esta ilustração, dar profundidade e torná-la mais atraente para os olhos.

Aqui está uma peça que não teria a mesma aparência sem textura: o fundo, a ilustração e a tipografia são todos texturizados.

Esta peça é bastante diferente das outras neste mostruário; a textura não é uma fotografia, mas uma imagem vetorial.

Recursos

A lista abaixo contém links para vários sites excelentes, onde você pode baixar texturas - premium e grátis - para usar em seu trabalho:

TextureVault
Um mercado premium especialmente para fazer o download de texturas individuais. O preço varia dependendo do tamanho da textura.
Perdido e Tomado
Um ótimo blog que publica algumas das melhores texturas ao redor. Algumas coisas realmente de alta qualidade aqui. Você também pode ver o texturas em uma galeria .
Texturas CG
Provavelmente uma das maiores galerias de texturas ao redor. Milhares de imagens estão disponíveis gratuitamente.
TextureLovers
O TextureLovers é basicamente uma galeria de texturas de toda a web. É um ótimo lugar para ir se você não tiver certeza de onde procurar, porque ele exibe texturas de uma variedade de sites.

6. Cortar Imagem e Máscaras de Camada

O corte de imagem e as máscaras de camada são eficazes para adicionar elementos extras a um trabalho. Por que incluir uma fotografia inteira quando você pode apenas mostrar o que você precisa ou estilizá-la para combinar com o resto do trabalho? A simplicidade é fundamental no design retro.

Esta peça faz um grande uso de textura e efeitos tipográficos e habilmente usa uma máscara de camada para arredondar uma imagem da galáxia. Parece excelente.

Esta peça retro usa não apenas fotografias retro-mascaradas, mas também círculos, traçados, modos de mesclagem e um esquema de cores limitado - praticamente todos os principais elementos abordados neste artigo.

Esta peça é ultra-minimalista, mas parece ótimo. As imagens são mascaradas em círculos e muito barulhentas, dando-lhe uma ótima aparência retro-futurista.

Abaixo estão alguns tutoriais sobre o corte de fotos e o uso de máscaras de camada do Photoshop:

Escrito exclusivamente para WDD por Callum Chapman, um designer e ilustração de negociação como Criativo do Circlebox . Ele também corre o Blog de inspiração e Loja Picmix

Compartilhe seus desenhos e ilustrações vintage e retrô conosco, assim como quaisquer artigos ou tutoriais que possam ajudar seus colegas leitores.

desenhar Designer de Web retrô vintage dribbble