Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601

Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601
As melhores ferramentas para criar sua paleta de cores - Kolaborativa

As melhores ferramentas para criar sua paleta de cores

Olá, sou o Entedi4do e com esse post estou estreando a seção de design do Tech4Noobs. O foco aqui será o design na web e a integração do design com a tecnologia, ou melhor, tentaremos acompanhar e descobrir no que o design está se transformando nesses tempos em que o Front End está avançando a passos largos, facilitando em muitos aspectos a vida de desenvolvedores e designers noobs. Veremos o impacto da tecnologia no design e vice-versa. E também tentaremos mostrar que design não é só “dar uma cara bonita a um projeto”.

Mas uma coisa de cada vez. Vamos falar de ferramentas tecnológicas que mudaram a forma de se fazer as coisas.

Começaremos com um assunto que agrada a muitos, não apenas os que trabalham com design: paletas de cores.

Paletas de cores são fundamentais para qualquer designer. Existem diversas técnicas de combinações que podem ser utilizadas, e até tempos atrás, a única maneira de consegui-las era gastando muita tinta e tempo. Felizmente, para facilitar a vida dos designers noobs, hoje existe uma série de sites que facilitam esse processo, cada um com um foco distinto. Veremos alguns deles, com o que cada um tem de diferencial*.


Novidade: aprenda a criar startups na prática com o curso da ESPM + ACE (Antiga Aceleratech). Uma nova versão do Colisões. Vagas limitadas! Começo em 27 de Agosto de 2016 – Visite o site oficial: http://espm.br/startup


Importante destacar que essas ferramentas, como qualquer outra, não fará o trabalho sozinho. É preciso saber o que está fazendo para que o resultado seja uma paleta que possa ser aplicada em seu trabalho.

*Eu não sou usuário hardcore desses sites, portanto podem faltar algumas informações. Aqui falarei o básico sobre as vantagens de cada um. Cabe a você testar os que mais parecerem interessantes – e quem sabe comentar aqui no post o que achou deles.

1 – Colorotate

Um site que aposta muito no visual para navegar entre o espectro de cores, que se transforma em um “diamante” 3D, tornando mais intuitiva e humana as opções como luminosidade das cores. No entanto, outras opções não são tão simples de encontrar e entender, sendo necessário um tempinho gasto no site até assimilar bem. Você pode optar por 3 tipos de visualização, inserir a quantidade de cores que terá na paleta, navegar para “próximo da luz” ou “afastado da luz”, entre outras opções. Pode ainda escolher paletas de outros usuários e utilizá-las ou criar uma nova a partir delas. Algumas opções são meio escondidas, mas é possível importar imagens e exportar a paleta em diversos formatos, inclusive PDF, CSS, ou simplesmente copiar o CSS ou as IDs das cores para a sua área de transferência. O site é em flash – pontos a menos no conceito. Animações que tornam tudo mais lento do que deveria. Mas vale a pena conhecer.

http://web.colorotate.org/

2 – Kuler

O Kuler é o aplicativo de cores da Adobe. Possui as mesmas funcionalidades do Colorate, porém, sem a visualização 3D. Você pode criar paletas com combinações de cores análogas, monocromática (variações de matiz e luminosidade da mesma cor), complementares, tríade e – opção interessante – shade (variações de matiz da mesma cor). Também tem a opção custom, que alguns outros sites do gênero não apresentam – controle total de cada point. Você também pode visualizar as paletas de outros usuários.

https://kuler.adobe.com/#create/fromacolor

3 – Color Palette FX

Muito mais simples que os demais, a vantagem desse site é capturar todas as cores existentes em uma imagem e oferece opções para organizá-las em sua paleta. Você pode organizar por Matiz, Saturação, Brilho ou Frequencia de cores. Cada paleta gerada é guardada e você pode fazer o download em .jpg. E claro, como obrigatório em qualquer site do gênero, opção para copiar os valores hexagonais ou RGB. As paletas salvas ficam guardadas em cachê, mas não sei por quanto tempo, ou se permanecem após reiniciar o pc.

http://www.palettefx.com/index.php

4 – Color Scheme Designer

Um dos meus favoritos. Permite criar combinações a partir de variações da mesma matiz, de cores complementares, tríades, análogas, e análogas + complementares, sempre exibindo em tempo real os valores hexagonais. Uma função muito bacana no menu é exibir como portadores de diferentes deficiências visuais irão visualizar suas cores. Você também pode configurar o disco de cores em RGB, Web Colors e Opaltone Colors. Infelizmente a opção para Pantone foi desabilitada por reivindicação da proprietária (PANTONE ™). Depois quando digo que os proprietários atrasam a evolução, tem gente que reclama… Ainda no menu, você pode escolher uma paleta randomicamente e, por fim, exportar suas cores em HTML+CSS, XML, TXT, ACO (formato para paletas do Photoshop) e GPL (formato para paletas do GIMP). Mas a função mais bacana deixei para o final. Abaixo do esquema de cores, você tem a opção de visualizar um layout básico de site com a paleta que você criou, em duas versões: light e dark. Muito interessante pra quem está começando com web design e quer saber como uma paleta pode ser usada em um site. Ainda abaixo da paleta, existe uma opção para testar a visualização de texto sobre suas cores. Muito bom pra evitar cores bonitas porém com textos ilegíveis.

http://colorschemedesigner.com/

5 – Colord

Colord

A grande investida deste serviço é no visual. No estilo Pinterest, é bem agradável aos olhos, mesmo sacrificando um pouco a usabilidade – será necessário alguns cliques cegos para se descobrir o que realmente se pode fazer aqui. Em contrapartida, na teoria do design emocional, produtos mais bonitos parecem mais fáceis de usar. As funcionalidades são as básicas de criação de cores, paletas, gradientes e paletas através de uma imagem, a vantagem é a experiência de ferramentas com visual muito bonito e incomum, que pode ser também referência para seus trabalhos como designer. A ferramenta de criação de paletas através de imagens também tem uma vantagem sobre os demais sites: você pode escolher que ponto da imagem quer selecionar uma cor, tornando a paleta mais personalizada. Ainda pode baixar em AI, ACO ou GPL.

Vale a pena navegar.

http://colrd.com

6 – Color Blender

Mais objetivo e simples que os demais, embora muito útil, o Color Blender é focado na funcionalidade de criar degradês entre uma cor e outra. É muito prático. Você escolhe a cor 1 e a cor 2, depois escolhe quantos “midpoints” você deseja, ou seja, quantas cores de transição entre as cores 1 e 2. O resultado é um degradê útil para ilustrações, por exemplo.

http://meyerweb.com/eric/tools/color-blend/

7 – Sphere: Color Theory Visual

Muito semelhante ao Color Scheme Designer em termos de funcionalidades. Vale conferir e comparar a usabilidade de cada um. Foco nos controles de RGB e Matiz/Saturação/Luminosidade de toda a paleta. Não é possível controlar cores isoladamente. Todas são influenciadas pelos controles automaticamente.

http://mudcu.be/sphere/#

8 – ColourLovers

O melhor deixei por último. Pelo menos, é o meu favorito. Se trata de uma rede social para amantes de paletas. Ele trás diversos aplicativos que geram criações coloridas que outros usuários pode “amar” e usar em suas próprias criações. O site também promove concursos frequentemente. Os aplicativos gratuitos da rede são:

– Create a Palete: cria paletas simples de 5 cores selecionadas por você. Para iniciantes na arte de criar paletas. Você pode inclusive utilizar um dos outros sites dessa lista, copiar a notação das cores e colar nessa ferramenta.

– Copaso: uma ferramenta mais avançada, com os controles já familiares – blender, complementares, tríade, etc. Aqui também já é possível determinar o espaço que cada cor ocupa na paleta, o que gera possibilidades de criações mais bonitas.

– Photocopa: cria paletas a partir de imagens enviadas por você. Ela exibe mais de 40 tonalidades predominantes na imagem, sugere paletas e permite que você faça a combinação que desejar. Também é possível determinar o espaço que cada cor ocupa na paleta.

– Color a Seamless Pattern: oferece uma grande quantidade de texturas e vetores para você colorir.

– Design Your Own Seamless Pattern: você pode criar suas próprias texturas e estampas. Uma espécie de Illustrator online.

– Themeleon: uma ideia bacana, você pode usar texturas, paletas e estampas criadas no site para criar um tema para o seu twitter 🙂

O legal é que se você faz parte de grupos da rede social, você pode, ao criar uma paleta, enviá-la diretamente para o grupo que quiser. E claro, pode compartilhar em outras redes sociais.

Lembrando que tudo o que você criar aqui estará disponível na rede para que outros usuários “amem” e usem em criações derivadas. Eles podem usar suas paletas para colorir uma textura, usar sua estampa para aplicar outras cores, etc.

http://www.colourlovers.com

O ColourLovers é meio viciante, use com moderação. E me adicionem lá: http://www.colourlovers.com/lover/Entedi4do

E você, conhece algum site não listado aqui com funções interessantes? Compartilhe conosco nos comentários.

Author Description

Kolaboradores

Kolabore você também com o blog: http://blog.kolaborativa.com/blog/

There are 2 comments. Add yours

  1. 28th abril 2014 | Rafael says: Responder
    Muito bom, color Scheme Designer eu já conhecia, mas esse Color Blender é o melhor é simples e pratico, me deu o que eu queria um degrade de uma cor pra outra, me ajudo com o manual da marca de uma empresa.
    • 30th abril 2014 | entedi4do says: Responder
      Disponha, e se tiver dúvidas ou sugestões pode mandar aqui nos comentarios :)

Join the Conversation


Warning: Illegal string offset 'headers' in /home/crian734/public_html/blog.kolaborativa/wp-content/plugins/wp-super-cache/wp-cache-phase2.php on line 595

Fatal error: Uncaught Error: Cannot use string offset as an array in /home/crian734/public_html/blog.kolaborativa/wp-content/plugins/wp-super-cache/wp-cache-phase2.php:595 Stack trace: #0 /home/crian734/public_html/blog.kolaborativa/wp-content/plugins/wp-super-cache/wp-cache-phase2.php(313): wp_cache_get_ob('<br />\n<b>Warni...') #1 [internal function]: wp_cache_ob_callback('<br />\n<b>Warni...', 9) #2 /home/crian734/public_html/blog.kolaborativa/wp-includes/functions.php(3549): ob_end_flush() #3 /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php(525): wp_ob_end_flush_all('') #4 /home/crian734/public_html/blog.kolaborativa/wp-includes/load.php(638): do_action('shutdown') #5 [internal function]: shutdown_action_hook() #6 {main} thrown in /home/crian734/public_html/blog.kolaborativa/wp-content/plugins/wp-super-cache/wp-cache-phase2.php on line 595