Articles

gradientes Web inspiracionais e onde encontrá-los

gradientes web estão voltando como um elemento de design para o mundo online. Eles se tornaram uma maneira fácil de trazer o seu site à vida.se forem bem aplicados, dão ao olho um sentimento unificado que convida o utilizador a permanecer no website. Este sentimento surge da falta de bordas duras e quebras na estrutura da página.

web gradients - nyc_pride como você pode ver no exemplo acima, o gradiente acalma a ação da imagem de fundo para torná-la adequada para ser o fundo deste projeto UI.queres saber o motivo?

O segredo é que a harmonia que um gradiente se espalha deriva de fenomenons na natureza, onde a maioria das arestas duras não aparecem. Tudo tem uma forma orgânica ou transições suaves.além disso, os seres humanos têm uma grande visão colorida e gostam de ver cores. Imagine um gradiente preto e branco. Depende do caso, mas muito provavelmente não parece que grandes e coloridos gradientes são preferidos em muitos casos.porque achas que toda a gente gosta de ver o pôr-do-sol?

gradientes web-gradiente de pôr-do-sol

ou apenas coloca a sua cabeça no céu?

web gradients-nature gradient

usando gradientes no fundo de uma página web também pode ser uma forma discreta de guiar a visão do visitante através do conteúdo sem precisar de colocar setas irritantes no primeiro plano.

os novos conhecimentos devem ser usados para a informação importante de qualquer forma e o fundo pode cumprir um objectivo subordinado.

aplicado a elementos como botões e ícones gradientes também pode levar a um efeito 3D Fácil.nem sempre é fácil encontrar o gradiente adequado e aplicá-lo adequadamente com todos estes benefícios.não te preocupes. Há uma solução.

Existem muitas ferramentas online que já oferecem um monte de gradientes preparados apenas para inspiração ou diretamente para integrá-los facilmente em seu site.

Agora você só tem que descobrir que Ferramenta vai atender às suas necessidades o melhor.vamos começar.

gradientes Web inspiracionais …

gradientes web - symodd

Como mencionado, symodd é um exemplo clássico de como bons gradientes web podem funcionar como um fundo simples que é interessante e captura de qualquer forma.

não só usa alas como fundo, mas também são aplicados a quase todos os elementos, especialmente aos ícones e botões.

web gradientes gogoro

Gogoro está usando um gradiente em uma forma que o torna mais dinâmico e apoia o objectivo da marca.

Como você pode ver nestes sites é tudo sobre encontrar o equilíbrio adequado e usar cores com moderação.

Não inspiradores da gradiente:

web gradientes badExample

Este gradiente é tão feio que eu tenho de pedir desculpas a apresentar aqui porque dói o olho de tanto. Tem demasiadas cores que são todas muito diferentes. Além disso, o texto preto simples no primeiro plano parece deslocado e é suprimido pelo gradiente.

assim, se, depois de ver estes exemplos, ainda não tiver a certeza se poderá aplicar um gradiente que seja capaz de apoiar o seu projecto da forma que deveria, poderá ir mais fundo na web e no design gráfico.não é suficiente?

WEB DESIGN PROFISSIONAL

Saiba mais sobre a nossa assinatura do curso.
escolha o melhor cronograma para estudar ONLINE ou na escola.

ver curso

seguir este guia para obter uma melhor compreensão dos tipos de gradientes e aconselhar sobre as melhores práticas.

…e onde encontrá-los

web gradientes uiGradients
web gradientes uiGradients

uiGradients é muito fácil de usar, pois tem apenas dois ecrãs principais. Depois de carregar pode ver directamente um gradiente Aleatório em todo o ecrã.

com as setas nos lados, você pode mudar dentro da grande oferta de todos os tipos de gradientes. A segunda tela mostra todos os gradientes como uma lista para percorrer e Classificar por cor.

a atmosfera que os gradientes web criam é suportada pelo seu nome individual. Como uma característica especial, Você também pode rodar seu gradiente para ver como ele se parece fora de outra perspectiva.

para as pessoas que querem contribuir com o seu gradiente criado para a comunidade, a opção existe para adicionar o seu gradiente à colecção através do GitHub. Isto torna a variedade de gradientes quase ilimitada.

uiGradients oferece três maneiras de salvar o seu gradiente escolhido. Se você quiser recriar o gradiente em um software de design gráfico ou código, você pode simplesmente copiar o código de cor Hex.

para uma implementação direta em seu site, você pode obter o código CSS.

A fim de salvar o gradiente como inspiração basta baixar o arquivo JPEG.

WebGradients

web gradients - WebGradients

Esta ferramenta começa por mostrar a colecção de 180 gradientes web como uma longa lista que pode percorrer. Uma vez que você quer ver mais de um gradiente basta clicar em Sua Seleção e a cor será mostrado em todo o seu ecrã.

cada gradiente tem um nome Por Isso torna possível a sua aplicação mais tarde em mais concreto.

WebGradients é executado por itmeo, uma empresa que fornece múltiplas ferramentas digitais online. Seu serviço de gradiente, neste caso, é gratuito a menos que você não quer baixar um Sketch ou arquivo Photoshop.

Como em uiGradients você também tem três possibilidades para salvar a sua nova inspiração gradiente encontrada aqui.

para cada gradiente, você pode salvar um grande arquivo PNG para usá-lo como fundo para o seu próprio design gráfico.

A fim de usar as cores exatas e o gradiente em um software de design gráfico ou código, você pode copiar o código de cor Hex ou obter a versão CSS do gradiente.

coolHue

gradientes web - coolHue

esta colecção de gradientes já é mostrada quando você abre pela primeira vez o website. Você pode escolher dentro de 60 gradientes coloridos. Basta percorrer em cada caso seis peças em uma linha desta variedade de gradiente.

infelizmente, não há maneira de mostrar o gradiente tamanho completo.

a adição agradável para o coolHue é a animação quando você paira sobre as peças do gradiente, o que lhe dá uma impressão tangível dele.

os gradientes web devem entregar a sua atmosfera a você apenas através das cores. É por isso que não têm nomes nesta ferramenta. Portanto, no canto inferior direito, você tem mais opções para Sketch e Photoshop.

Quando sobrevoar o seu gradiente seleccionado, aparecem mais duas opções. Você pode copiar o código CSS para uma implementação fácil em seu código ou baixar um pequeno arquivo PNG.

Se quiser usar as cores exactas, basta copiar o código de cores Hex por baixo do gradiente.

ColorSpace

colorspace

ColorSpace oferece-lhe a opção de escolher e aplicar uma cor gradiente em 10 direcções diferentes. Para aplicar uma cor você pode escolher no menu de cores que aparece, o mesmo que você encontraria em um software de edição de imagens. Você também pode colar um código de cor Hex da cor para obter as cores exatas que você deseja usar.

o gradiente é aplicado sobre o fundo em todo o ecrã. Isto dá-lhe uma sensação muito boa do humor das cores, e motiva-o a escolher a cor que sente que melhor se adequa ao assunto relevante que possa estar à procura.

com espaço de cores, Você também pode copiar o URL do seu gradiente de cores escolhido. Isso torna muito fácil compartilhar as opções de cor sem ter que salvar um arquivo e, em seguida, enviá-lo como um anexo ou para enviar as especificações a partir do que a cor é. Eles podem apenas ver o que você estava olhando clicando no link que Você enviou e eles terão toda a informação que eles precisam, os códigos hexadecimal e o código CSS.

no entanto, se preferir gravar um ficheiro de imagem, infelizmente este site não lhe dá essa opção.

Gerador de gradientes de CSS Final

gradientes web - Gerador de gradientes de CSS Final

agora chegamos às ferramentas mais complexas que, neste caso, como o nome já diz, é usado apenas para a integração no seu código CSS.

A interface é dividida em quatro partes e lembra um software de design gráfico típico. Você pode ajustar ou criar predefinições, ver este resultado em uma pequena antevisão e dar uma olhada no código CSS completo.

O derradeiro Gerador de gradientes de CSS é uma parte da extensão do navegador ColorZilla. Sua ferramenta de gradiente oferece possibilidades ilimitadas para criar gradientes web.

pode adicionar quantas cores quiser, ajustar o tom e a saturação como o conhece do seu software de design gráfico, inverter o gradiente e definir as cores, opacidade e localização do gradiente.

além disso, você pode salvar o seu próprio gradiente criado para as predefinições, há apenas uma maneira de exportá-lo com o código CSS ou SAS.

mas antes disso, você é capaz de definir o tamanho do gradiente, mudar a orientação Dele para diferentes direções e escolher o formato de cor de cinco opções dadas.problemas para decidir?

uiGradients WebGradients coolHue Gradientify Gradients.io CSS Gradient Generator
Full-screen view + + +
Switch in full-screen view +
List view + + + + + +
Amount of gradients almost unlimited 180 60 45 24 unlimited
Sort gradients by colour
Named gradients + + + +
Rotate gradient (change orientation) + +
Change colour opacity +
Change colour location +
More than two colours + +
Change hue/saturation +
Reverse colours + +
Adding new gradient + +
Import image +
Import CSS code + +
Change export size +
Hex Color Code + + + + +
CSS code + + + + +
Chose colour format (CSS) +
JPEG file 1920 × 1080
PNG file 2400 × 2000 500 × 500

o Que web gradientes ferramenta é melhor usar sempre depende do seu projeto, o tempo que você tem e o nível de individualidade ou de outros requisitos de qualidade.

A tabela acima pode ajudá-lo a decidir que ferramenta você deve usar melhor para o resultado que você deseja ter.Lembras-te da coisa mais importante?

não use muitas cores – a melhor prática de hoje é usar apenas duas cores que também não são muito diferentes.

O que você também deve prestar atenção é o design geral do seu gradiente, a forma como você o aplica ao seu projeto mais tarde e como ele se encaixa em seu ambiente.

uiGradients oferece todas as características visuais importantes como você pode ver na tabela. Esta ferramenta faz você imaginar o gradiente para o seu projeto da melhor maneira possível.

Se quiser ir mais fundo na adaptação do gradiente para um projecto web de alta qualidade, poderá combinar uiGradients com o gerador de gradientes de CSS, importando o código CSS ou a imagem transferida.agora está pronto para fazê-lo sozinho. Se você decidir trabalhar com gradientes, por favor, avise-nos no twitter.

WEB DESIGN PROFISSIONAL

Saiba mais sobre a nossa assinatura do curso.
escolha o melhor cronograma para estudar ONLINE ou na escola.

VER CURSO

Deixe uma resposta

O seu endereço de email não será publicado.