Tenho notado uma tendência recente em web design que envolve o uso de espectros coloridos como um elemento do projeto principal. Os usos são muito variadas, mas quase sempre muito bonito.

Hoje vamos aprender a construir obras de arte baseada em espectro incrível no Photoshop e, em seguida, dê uma olhada no 25 exemplos brilhantes do espectro a ser utilizado em sites real.

Como se divertir com Spectrums no Photoshop

Antes de olharmos para a nossa selecção de sites que utilizam o espectro como um elemento de design importante, vamos dar uma olhada em como você pode facilmente construir o seu próprio espectro de arte em Photoshop.

A construção de gradientes e complexa no Photoshop pode ser demorado. Felizmente, ele vem embutido com alguns espectros grande que você pode aplicar em apenas alguns cliques.

Para começar, crie uma camada preta sólida. Então duplique essa camada e aplique um Gradiente Overlay a camada que está em cima.

Para carregar no espectro gradientes, clique na pequena seta à direita do seletor de gradiente e vai até o fundo onde diz “Spectryms”.

Selecione qualquer espectro que você gosta e definina a direção para o que você achar mais adequado. Devido ao resultado horrível inicial desta etapa, eu imagino que muitos designers nunca ter pensado em usar esses gradientes pré-construídos. No entanto, sempre lembro de olhar para os efeitos do Photoshop como blocos de construção, não como produtos acabados.

Realmente muito fácil de se transformar em algo que parece muito legal e se encaixa com as tendências do design moderno.

O próximo passo é criar uma camada e preencha de branco, depois selecione Filter > Render > Fibers. Realmente não importa as configurações apenas vamos brincar até obter algo que você gostamos.

Agora aplique um Filter > Blur > Motion Blur, no campo pixel digite o valor de 300px e ângulo de 90º. Você pode ver na imagem abaixo que isso vai nos dar uma textura muito agradável com muita profundidade e contraste.

A mágica acontece quando você definir essa camada para Multiplicar (Layers, aplique Multiply). Veja só?

Para tornar mais dramático, aplique uma Camada de máscara preta e sólida, em seguida, pegar um Pincel grande e macio definido como branco. Em seguida, clique em torno da tela duas a três vezes com o pincel para trazer de volta o gradiente de uma maneira sutil e atraente.

Não pára por aí! Brinque com outros filtros e efeitos para criar o seu próprio exame único em espectros. A imagem abaixo utiliza exatamente o mesmo processo mostrado acima, mas utiliza as nuvens em vez de fibras (vala a desfocagem etapa).

Como uma dimensão final, uma vez que você estrela misturá-lo com os gráficos, o efeito pode ficar realmente surpreendente realmente rápido. Abaixo eu joguei em um compasso levantou-se e foi capaz de avançar com alguns resultados impressionantes em apenas alguns segundos de ajustes.

Espectros em Fundos de sites

Para ter uma idéia de como praticamente aplicar essas técnicas no mundo do design web, confira os grandes exemplos a seguir. Esta primeira seção implementa espectros de cores como o principal ponto focal do fundo do site.

- https://www.4muladesign.com/
- https://bundlehunt.com/
- https://www.rareview.com/
- https://www.mikii.fr/
- https://clickontyler.com/incoming/
- https://spectrum-theme.com/
- https://deaxon.com/
- https://www.petrosdimitriadis.com/
- https://orderedlist.com/
- https://www.ciplex.com/
- https://www.golifechurch.com/
- https://www.burubundi.es/
- https://xeeds.de/
- https://www.robinjamesyu.com/
- https://www.aroradesigns.com/