Cor na Web I: design de paletas coerentes

1. Trailer: Na primeira parte desta série sobre cores na web, estaremos aprendendo os primeiros passos para criar uma paleta harmoniosa para um site. Você vai começar com o resumo do cliente para seguir como um projeto real. Trabalharemos para uma empresa fictícia chamada Bike Book. Uma empresa de aluguer de bicicletas com um toque. Como nos concentraremos apenas na cor, a marcação do site será fornecida para você. Tudo o que você precisa é de uma cópia do Photoshop ou do Illustrator para acompanhar as lições. Analisaremos termos básicos de cores, aprenderemos dicas de pesquisa, falaremos sobre mensagens de cores e significados e entenderemos como escolher cores apropriadas para seu público. Então, entraremos e criaremos nossas paletas com base nas habilidades fundamentais que aprendemos. Esta aula é destinada a iniciantes que desejam melhorar suas habilidades de cores e designers experientes que desejam aperfeiçoar seu fluxo de trabalho de cores. No final da aula, você terá duas pastilhas harmoniosas para o seu projeto e estará pronto para passar para a classe dois, onde aprenderemos sobre acessibilidade de cores, testes, guias de estilo e como implementar nossa paleta no Bike Site do livro. 2. Uma apresentação da cor: Ei caras. Obrigado por se inscrever no meu Skillshare. Esta é, na verdade, uma série de duas classes, sobre fluxo de trabalho de cores em web design. Então, a primeira classe vai se concentrar em desenvolver uma paleta de cores para um site e a segunda classe, que eu espero que você também faça, vai se concentrar em realmente implementar sua paleta em um design de site. Então, a boa notícia é que o design já está feito para você. Então, para essas aulas, vamos nos concentrar na cor. Eu acho que uma das razões pelas quais muitos designers lutam com a cor, é porque eles tendem a apenas fazê-lo em tempo real enquanto eles estão trabalhando no layout ou tentando escolher fotos ou procurando o tipo perfeito. Você sabe como é. Você só está tentado a jogar cor em todo o caminho sem muito planejamento com antecedência. Apenas saiba que você definitivamente não está sozinho em sua luta. É totalmente normal e espero que você ache essas aulas úteis em seus projetos. No final desta classe, você terá duas paletas de cores de trabalho, e no final da segunda classe você vai pegar uma dessas paletes e implementá-la no design. Então, antes de entrarmos, quero rever alguns termos básicos de cores que vocês deveriam estar familiarizados. Muitos de vocês já vão saber disso e isso é completamente legal, mas uma revisão rápida não vai doer especialmente porque eu vou estar usando isso ao longo do curso. Então, as cores realmente criadas através de diferentes comprimentos de onda de luz. Quando esses comprimentos de onda são refletidos de uma superfície ou emitidos como luz, eles são interpretados pelo nosso sistema óptico como cor. Os comprimentos de onda mais longos são vermelhos, os comprimentos de onda mais curtos são violetas e todos os outros comprimentos de onda compõem as cores no meio. A capacidade de discriminar entre cores depende de três atributos: matiz, saturação e leveza. Então, matiz é uma propriedade de cor e é o que nos referimos quando dizemos que algo parece vermelho, amarelo, verde, azul ou roxo tipo de como as cores que descreveríamos em um arco-íris. Saturação refere-se à intensidade de uma tonalidade, onde a tonalidade mais saturada é a cor mais pura e a menos saturada aparece cinza. leveza também é chamado de valor e que se refere à leveza ou escuridão da cor e é conseguido pela adição de branco ou preto. Sombra é conseguida adicionando preto para aumentar a escuridão e uma tonalidade é conseguida adicionando branco para aumentar o brilho. Então, cores como marrom, eles são na verdade tons mais escuros de laranjas e amarelos e cores como rosa são na verdade tons mais claros de vermelho. Então, pense em quando você era criança na escola e você provavelmente aprendeu que vermelho, azul e amarelo, eram as cores que compunham todas as outras cores. Certo? Bem, na verdade é um pouco mais específico do que isso. São o que chamamos de ciano, magenta e amarelo. Eles não são exatamente os mesmos. Estas cores com a adição de preto, compõem o modelo de cor subtrativa que é base de tinta. Então, é chamado de subtrativo porque a tinta na verdade subtrai a quantidade de luz refletida de uma folha impressa. É amplamente usado na impressão offset e não vamos nos aprofundar nisso hoje porque, como web designers, nosso trabalho vive no modelo de cores aditivas. O modelo de cor aditiva é baseado em luz e que consiste em cores primárias vermelhas, verdes e azuis e misturam-se para criar todo o espectro. Então, monitores de computador, TVs, projetores, tablets scanners, câmeras digitais são todos dispositivos RGB. Então, aqui está um fato incrível do Dr. Jay Knights, que é um pesquisador de visão colorida na Universidade de Washington. Alguns anos atrás, ele afirmou que a pessoa média pode distinguir cerca de 1 milhão de tons diferentes e algumas pessoas podem distinguir ainda mais do que isso. Eu gosto de pensar que é por isso que a cor pode ser uma parte tão difícil do design para muitos de nós e é difícil saber por onde começar às vezes. Então, na próxima lição eu vou ensiná-los como realmente reduzir suas opções para tornar as coisas muito menos assustadoras. 3. O projeto: Então, vamos falar sobre o projeto que vocês vão trabalhar. Vamos desenvolver uma paleta de cores para uma startup fictícia chamada Bike Book. Assim, o objetivo da Bike Book é lançar um serviço de aluguel de bicicletas começando em Nova York, São Francisco e Portland, e expandindo para outras cidades mais tarde. Bike Book é um pouco diferente da loja média de aluguer de bicicletas. Ele não tem uma grande variedade de bicicletas, apenas aquelas que são elegantes, simples e com boa aparência quando você está montando. Eles estão mirando o tipo mais jovem de ciclistas urbanos consciente da moda, em vez de turistas casuais que estão apenas procurando uma maneira de ver a cidade. Algumas das bicicletas que alugam são da Mission Bicycle Company, Public Bikes, e também têm algumas bicicletas vintage restauradas. Assim, os clientes podem pré-reservar uma bicicleta em uma cidade de sua escolha em seu site em bikebook.me, que não é realmente uma url real. Em seguida, eles poderiam pegar a bicicleta na loja e devolvê-la no final do período de aluguel. Então, eu quero que vocês vão em frente e leiam o resumo vocês mesmos. Você pode baixá-lo na página da lição junto com os outros modelos que vamos precisar para este projeto. Então, você pode pensar que ler o resumo não é realmente necessário, mas é, e deve ser o primeiro passo em qualquer projeto que você faça. Pode ser realmente tentador pular em um computador imediatamente e começar a experimentar, mas se você realmente ler o resumo primeiro, você terá uma idéia melhor do que seu cliente está procurando. Eu até recomendaria ler o resumo e fazer sua pesquisa em um dia e, em seguida, esperar até o dia seguinte depois de você ter tido tempo para que a informação se afunde antes de entrar em coisas divertidas. Se há algo no resumo que você não tem certeza, agora é a hora de pedir esclarecimentos ao cliente. Fazer perguntas, entender o projeto da melhor forma possível nesta fase definitivamente ajudará a evitar mal-entendidos nas fases posteriores. Você parecerá mais preparado e mais confiante se tiver um raciocínio sólido por trás de suas decisões. Aposto que muitos de vocês já estiveram lá com um cliente e querem mudar esse lindo azul que você escolhe para algo como vermelho brilhante porque é a cor favorita deles ou algo assim. Mas, se você for capaz de realmente explicar a razão específica por que você escolheu aquele azul, você vai ter um tempo muito mais fácil convencer esse cliente a realmente confiar em sua experiência. Então, caso contrário, será apenas a sua cor favorita versus sua cor favorita e eles vão ganhar todas as vezes. Então, vá em frente e leia o resumo e dê uma olhada no design do site incluído e dê uma olhada no logotipo quando terminar. 4. Diretrizes da marca: Então, a primeira coisa você deve fazer sempre que iniciar um novo projeto é verificar se há diretrizes de marca existentes que o cliente possa ter. As diretrizes de marca às vezes têm nomes diferentes. A maioria dos web designers e desenvolvedores os chamarão de guias de estilo, e se você vier de um fundo de impressão como eu, você pode usar o termo manual de padrões gráficos. Então, esses manuais podem realmente variar de ser super simples e apenas definir como e onde um logotipo pode ser usado, mas outros manuais podem ser muito mais detalhados. Então, vamos falar mais sobre aqueles da segunda classe. Este é um exemplo do Skype. Eles têm as cores de suas marcas claramente definidas, por isso, se você é um designer que trabalha para o Skype, você vai precisar de um argumento bastante forte para introduzir novas cores se eles não fazem parte deste guia. Então, no nosso caso, tudo o que temos é o logotipo do bikebook em tons de cinza, e se você ler o resumo, você vai aprender que o logotipo não precisa usar preto ou cinza. Você pode usá-lo da maneira que você achar que é o mais apropriado, desde que você não edite a estrutura do logotipo em si. Então, essa situação torna nossa escolha de cor um pouco mais difícil, já que não temos nenhuma direção para trabalhar. Mas vou mostrar-lhe como encontrar um ponto de partida na próxima lição. 5. A mensagem e significado da cor: Então, é importante lembrar que a cor é um método incrivelmente poderoso de comunicação. E eu diria que a maioria das pessoas realmente não percebe os efeitos psicológicos que isso pode ter sobre elas. Então, você pode ter ouvido histórias sobre os truques que designers de interiores e arquitetos podem fazer para afetar como as pessoas se comportam dentro de um espaço ou de uma loja. Então, restaurantes de fast food às vezes usam laranjas, vermelhos e amarelos em seu interior para realmente fazer o ambiente se sentir um pouco mais desconfortável, e isso ajuda a manter as pessoas em movimento para criar espaço para novos clientes. Então, eu realmente gosto dessa citação de Manet. “ A cor é uma questão de gosto e de sensibilidade”, e é verdade. A cor carrega todos os tipos de mensagens e às vezes eles até se contradizem completamente. Mas há momentos em que certas paletes serão mais apropriadas para usar do que outras. Azul é uma cor que podemos associar ao sentimento triste ou deprimido e vemos vermelho quando estamos zangados e podemos ficar verdes de inveja quando estamos com ciúmes. Mas, ao mesmo tempo, azul é freqüentemente associado à tecnologia e comunicação ou indústrias profissionais corporativas e o vermelho é a cor do amor e da paixão. E verde pode representar atitudes positivas, natureza e boa saúde. Então, precisamos descobrir a mensagem que precisamos transmitir neste projeto. Como você quer que o público se sinta? Que tipo de adjetivos descrevem esse sentimento? Então, você vai encontrar a maioria das respostas na seção de tom do resumo. Então, eu tenho uma cópia do resumo aqui e eu preciso que vocês tomem nota que é um pouco diferente do seu. Então, eu quero que vocês façam o seu trabalho baseado em suas informações no resumo. Então, devemos acabar com alguns resultados bem diferentes no final da aula. É por isso que não posso enfatizar o suficiente que é importante para vocês lerem. Então, aqui está a seção de tom no meu resumo. O BikeBook vê-se como relaxado, confortável e legal. Pense em passeios de fim de semana preguiçosos para o brunch e passear em parques. Andar de bicicleta de BikeBook deve sentir-se como membro de um clube exclusivo. Gosto de procurar palavras-chave no resumo e anotá-las no meu caderno de esboços ou sublinhá-las. Então, temos coisas como relaxado, confortável, e legal, preguiçoso, talvez descontraído pode ser uma palavra melhor lá, exclusivo. Essa é muito boa. Vou continuar a ver as outras seções do resumo e adicionar mais à minha lista e quero que vocês façam o mesmo antes de seguir em frente. 6. Público alvo: Agora, é hora de falar sobre nosso público-alvo, que é um grupo muito específico de pessoas que serão direcionadas pela publicidade do cliente. Um público-alvo é geralmente composto de dados demográficos como idade, sexo , linguagem cultural, empregos, situação financeira e muito mais. Então, lembre-se quando estiver considerando o público-alvo em seu projeto não pinte todos com o mesmo pincel. Provavelmente não é uma boa idéia ler que o público-alvo são adolescentes ou algo assim e automaticamente fazer todas as suas coisas cor-de-rosa. Você realmente precisa ter cuidado com isso. Então, com isso em mente, podemos falar sobre como a cor pode realmente afetar seu público. A idade é muito grande. Então, se você está projetando algo para crianças ou pré-adolescentes. Seu esquema de cores provavelmente vai parecer muito diferente de algo que você projetaria para idosos. Você provavelmente vai querer mostrar algo um pouco mais atraente. Não necessariamente super louco, mas apenas mais emocionante e atraente do que se você estivesse projetando algo para pessoas mais velhas. As diferenças culturais também são algo para se pensar. Roxo é um bom exemplo aqui. Assim, roxo aos olhos das culturas ocidentais pode estar associado à realeza, mas também tem algumas conotações fortes com morte e o luto e algumas culturas católicas europeias. McDonald's é um ótimo exemplo de uma empresa que ajusta sua estratégia de marketing e design para diferentes países. Aqui estão três esquemas de cores diferentes dos sites atuais da McDonald's, Canadá, Japão e França. O francês é definitivamente uma grande partida. Você também deve pensar sobre a renda e o status de emprego do seu público. É um produto que estamos projetando para um item de luxo ou um serviço de luxo? Ou é acessível para todos, mas ainda precisa parecer um pouco caro. Pode ser totalmente apropriado fazer isso parecer barato se esse é o objetivo pretendido, isso não significa que tenha que parecer feio. Então, pense em empresas como a Target. Eu acho que a Target faz um bom trabalho de parecer uma loja acessível, mas eles ainda têm um bom design e, claro, a IKEA é da mesma maneira. Então, eu vou dar uma olhada no meu resumo novamente e ler a seção de público-alvo e novamente tomar nota de uma palavra-chave que eu acho que são úteis. Quero que façam o mesmo antes de seguir em frente. 7. Pesquisa de concorrentes: Então, você está construindo sua lista de palavras e inspiração para sua paleta e você pode já ter algumas cores em mente que você acha que gostaria de experimentar em seu projeto. Mas antes de chegarmos a esse passo, vamos dar uma olhada em nossos concorrentes. Então, uma das piores coisas que pode acontecer é acabar com uma paleta incrivelmente semelhante a um concorrente direto e que pode colocar o cliente e você como designer em apuros. Algumas empresas realmente vai tão longe quanto a cor de direitos autorais, Tiffany, a empresa de jóias realmente tem sua marca registrada azul nos Estados Unidos. É um número Pantone real, número 1837, mas não está impresso em nenhum livro de amostras Pantone. O que eu acho que é uma loucura. Cadbury purple também é marca registrada, UPS marrom, T-Mobile rosa e, claro, Coca-Cola, mas isso não é realmente uma surpresa. Felizmente, nosso cliente fez a maior parte da pesquisa para nós e listou alguns concorrentes no resumo. Então, eu vou dar uma olhada em apenas um por enquanto, um concorrente de Nova York chamado RentBike NYC. Então, a primeira impressão deste site é que é obviamente muito verde. Vou dar uma olhada rápida, definitivamente um monte de verde. Provavelmente não há muito mais acontecendo aqui em cores, na verdade. Então, eu vou ter que manter isso em mente Eu provavelmente não escolherei este tom de verde da minha cor primária, no mínimo. Então, eu quero que vocês verifiquem alguns outros concorrentes no briefing. Tome algumas notas antes de passar para a parte divertida que está realmente construindo nossa paleta. 8. Esquemas de cores: Então, espero que tenham terminado a sua pesquisa e tenham deixado afundar um pouco antes de seguir em frente. Agora, nós vamos cavar e realmente aprender a escolher nossa paleta de cores. Então, o que eu gosto de fazer aqui é pegar meu caderno de esboços e dar uma olhada nas informações que eu reuni sobre meu público-alvo e sobre a mensagem que eu preciso transmitir. O primeiro passo que gosto de dar ao escolher minha paleta é considerar se o design deve ser mais ousado ou mais suave e mais moderado. Então, nas minhas notas, eu tenho palavras como relaxado, confortável, legal, premium, elegante. Então, isso me ajuda a decidir que a cor deve ser um pouco mais suave e mais moderada. Então, eu não acho que vou usar muitas cores saturadas super brilhantes aqui. Então, isso ajuda a restringir minhas escolhas um pouco, mas lembre-se que você pode ter palavras ligeiramente diferentes em seu breve diferente especialmente na seção de tons. Então, certifique-se de tomar notas. A partir daqui, podemos começar a escolher tons apropriados e construir uma paleta harmoniosa. Então, é aqui que ele pode ficar um pouco assustador, mas não se preocupe, há truques e ferramentas lá fora para ajudá-lo. Então, eu vou falar sobre três tipos comuns de esquemas de cores que você pode usar como ponto de partida; analagous, tríade e split complementar. Combinações análogas envolvem a seleção uma cor primária e as duas cores adjacentes em uma roda de cores. Esses tipos de cores refletem comprimentos de onda semelhantes de luz e geralmente são harmoniosos. Os esquemas da tríade envolvem a seleção de três tons, espaçados equidistantes um do outro na roda de cores criando um triângulo. Os esquemas complementares divididos envolvem a escolha de uma tonalidade primária e duas tonalidades secundárias adjacentes ao complemento de tons na roda de cores. Não se preocupe se isso ainda não faz sentido para você. Vou mostrar-lhe alguns truques para ajudá-lo a colocar esses esquemas para uso após a próxima lição sobre contraste de cores. 9. Contrates das cores: Então, se algum de vocês é ilustrador ou artista, você provavelmente saberá que uma das chaves mais importantes para uma boa pintura é o uso efetivo do contraste. contraste pode criar foco na hierarquia, e pode chamar a atenção para as partes mais importantes de uma pintura ou design. O contraste também é um dos fatores mais importantes no aumento da legibilidade para uma pessoa com deficiência visual. Falaremos mais sobre deficiências visuais na segunda classe desta série. Então, não se preocupe muito com isso agora. contraste de cores pode ser alcançado de algumas maneiras diferentes, sendo algumas mais eficazes do que outras. Então, eu vou mostrar a vocês alguns exemplos. O contraste entre cores claras e escuras é o atributo mais importante ao criar contraste efetivo. Tente não usar cores que tenham uma leveza semelhante ao lado do outro em um design. Você pode ver aqui que as cores vermelha e verde à esquerda compartilham uma leveza semelhante, e elas não fornecem contraste suficiente por conta própria sem fazer alguns ajustes. A versão à direita é muito mais eficaz. contraste também pode ser alcançado escolhendo cores complementares que estão opostas umas às outras na roda de cores, mas uma exceção é, naturalmente, vermelho e verde, o que pode causar problemas para pessoas com cegueira de cor. Como você aprenderá na segunda parte, é melhor evitá-los sempre que possível. Os pares de cores complementares geralmente oferecem melhor contraste do que escolher tons adjacentes no volante. contraste também existe entre cores frias e quentes na roda de cores. Então, se pegarmos nesta roda de cores e dividi-la em cores legais como azuis, roxos e verdes, e então vamos compará-los as cores quentes como vermelhos, laranjas e amarelos. Escolher uma sombra escura de uma cor legal emparelhada com uma tonalidade clara de uma cor quente proporcionará melhor contraste do que duas cores quentes ou duas cores legais. contraste de saturação ocorre quando uma cor maçante é colocada ao lado de uma cor mais intensamente saturada. Mas, esta técnica não é tão eficaz quanto o contraste claro e escuro, então eu não recomendaria confiar nela para informações importantes como itens de cópia ou navegação. Então, se vocês deram uma olhada nos arquivos do projeto, vocês provavelmente notaram que eles estão todos em tons de cinza. Então, um dos truques mais fáceis para alcançar um bom contraste é realmente trabalhar em tons de cinza antes de introduzir qualquer cor, mesmo que você já tenha seu paladar em mente. Se você conseguir fazer o seu design ficar bem em tons de cinza, é provável que ele funcione quando você introduzir cores, e ele terá uma chance maior de manter o contraste necessário para um público mais amplo. Então, este é um conceito para um site que eu fiz, e eu sabia que meu paladar iria usar vermelho, preto e branco na minha cabeça, mas eu não tinha que ficar muito pendurado nos posicionamentos e onde todas aquelas cores iriam ficar enquanto eu estava trabalhando no layout, e isso realmente acelerou meu fluxo de trabalho no final. Vocês olham para o teste deste método de adicionar cor a uma maquete em tons de cinza na segunda classe da série. Mas agora, estamos prontos para pular em algumas mãos no trabalho. 10. Ferramentas de esquema de cores: Percebi que deixei cair muito conhecimento sobre vocês na primeira parte da aula, e tudo bem se vocês não entenderem logo. A cor é definitivamente um tópico complicado e todos nós podemos usar um pouco de ajuda na escolha de nossos esquemas de cores. Então, não há absolutamente nenhuma vergonha em usar ferramentas para orientação e eu sei que eu uso isso o tempo todo. Existem algumas ferramentas lá fora que você pode usar para ajudar a minimizar a adivinhação que vai para a escolha de um palete. Alguns você tem que pagar e outros são de graça. Então, um aplicativo que eu vou mostrar é chamado Spectrum e é um aplicativo pago disponível para macOS. Eu também vou mostrar um chamado Adobe Kuler, que está disponível online no navegador. Então, eu vou abrir o Spectrum aqui e mostrar-lhe o lugar. Vou construir um esquema de cores baseado nas informações que reuni na minha versão do resumo. Então, eu quero algo um pouco calmo, relaxante, legal, mas ainda um pouco premium olhando. Não quero que isto pareça um site de torus. Então, este é o painel principal onde você pode editar suas cores e aqui está uma guia onde você pode ver todas as paletas que você salvou. Spectrum também vem com algumas dessas paletas predefinidas com as quais você pode brincar. Então, eu vou fazer uma nova paleta aqui e chamá-lo de BikeBook. Vou clicar em Editar para voltar à tela. Agora, isso faz um esquema de cores padrão estranho, mas vou mostrar como podemos corrigir isso rapidamente e torná-lo muito melhor. Então, aqui na parte inferior da tela você pode ver exemplos de diferentes esquemas de cores que você pode usar para guias. Então, eu vou começar com algo mais simples e escolher análogo. Vou apagar algumas dessas amostras só para tornar mais fácil de usar agora. Então, cada uma dessas três amostras é mapeada para um desses pontos na roda. Se você arrastar esses pontos ao redor, as cores vão mudar. Quanto mais você puxá-los para fora, mais saturados eles ficam, e eles parecem ser um pouco instáveis. Mas quanto mais em direção ao centro você começa, eles ficam um pouco menos saturados e você já pode ver as cores parecendo muito mais promissoras. Então, se você puxar este nó para fora, ele vai ampliar essa seleção e, em seguida, ele vai incluir uma gama maior de cores. Então, eu acho que eu quero algo um pouco terroso, talvez algo como isso. Eu gosto disso. Eu acho que é suave e relaxante e fácil para os olhos, mas eu não tenho certeza se eu estou feliz com este marrom então eu posso clicar isso e eu posso realmente usar esses controles deslizantes aqui para fazer isso um pouco mais marrom, se eu quiser, um pouco mais avermelhado e mudar a saturação. Posso mudar o valor. Então, se eu voltar para minha guia aqui, eu posso ver que ela fez minha paleta. Posso duplicar se quiser. Volte para editar este, então saberemos que sempre temos backup para trabalhar. Então, se eu quiser fazer tons e tensos de cada uma dessas cores, o que eu vou fazer é duplicar cada um e fazer três de cada cor. Então eu posso começar a negociar e fazer uma tonalidade de cada cor até que eu esteja feliz. Obviamente, você vai gastar mais tempo nisso do que eu estou fazendo para esta demonstração, mas você entendeu a idéia. Se cometeres um erro, podes sempre trocar a cor e pronto. Se você não tiver um Mac, também poderá usar o Adobe Kuler soletrado K-U-L-E-R. Então, você pode simplesmente ir para kuler.adobe.com. Você terá que fazer uma conta se você quiser salvar qualquer um de seus paladares, mas você pode simplesmente jogar com ele se quiser. Então, você vai notar que ele funciona de forma muito semelhante ao Spectrum. Posso escolher meu esquema de cores ou regra de cores como eles chamam e posso arrastar o nó realçado no meio ao redor da roda para alterar minha paleta. Então, uma coisa sobre a cor é, você pode realmente copiar este URL ou marcá-lo e voltar para ele mais tarde. Por enquanto eu quero que vocês joguem com uma ou ambas as ferramentas e criem uma paleta que vocês acham apropriada para o site do BikeBook. 11. Usando fotografias: Agora que você tem um palete projetado, vamos fazer uma segunda opção usando uma fotografia para inspiração. Então, a chave aqui é escolher fotografias que tenham um esquema de cores óbvio próprio. Então, se a foto é incrivelmente ocupada com todos os tipos de cores saturadas brilhantes loucas acontecendo, seu palatte provavelmente vai olhar da mesma maneira, e não vai ser muito bonito. Então, eu vou abrir a pasta de fotografia fornecida aqui, que também estará em seus arquivos. Vou escolher uma foto que eu acho que é apropriada para o meu esquema de cores. vez, quero que o meu esquema pareça um pouco moderado, um pouco calmante. Então, vamos ver o que temos aqui. Então, eu realmente gosto deste. Acho que as cores parecem diferentes. Eu acho que um monte desses tons roxos suaves e castanhos naturais em 10 cores poderia funcionar muito bem. Algumas dessas outras fotos podem ser mais apropriadas para sua versão do projeto ou você pode querer tirar a cor completamente. Você pode estar pensando que um único monótono fotos coloridas mais apropriadas. Você tem a liberdade aqui de escolher o que quiser ou editar as fotos como quiser, desde que você ache que é apropriado para o cliente. Então, vou abrir o Illustrator para isso. Você pode usar o Photoshop se quiser ou pode até usar um Seletor de cores e colocar o raio de códigos em uma folha de estilos. Mas vou usar o Illustrator. Então, eu tenho minha foto colocada aqui com algumas amostras pretas embaixo. Eu vou dividir essas nove cores em três cores base novamente: uma cor primária, uma cor secundária, e depois uma terceira cor para acentos. Então, eu vou selecionar as três primeiras amostras. Eu só vou usar minha ferramenta conta-gotas e começar a provar minha cor primária, que eu acho que agora vai ser roxo. Uma coisa a ter em mente quando você está amostrando cores de fotos, alguns desses pixels por conta própria podem parecer um pouco enlameados. Então, você terá que olhar ao redor e fazer um pouco de ajuste para realmente obter a cor que você precisa. Então, acho que está tudo bem. Escolha minha cor secundária da mesma maneira. Basta explorar ao redor da foto um pouco. Na verdade, parece muito bom. Então, para a minha cor de sotaque, não há muito acontecendo no resto da foto em termos de uma terceira tonalidade. Então, eu vou escolher um verde para a nossa cor de sotaque. Então, eu só vou trocar aqui e procurar um verde que eu acho que seria apropriado. Agora, podemos voltar e fazer a mesma coisa para cada um. Faça uma sombra. Faça uma tonalidade mais leve até termos exatamente o que precisamos. Agora, eu vou dizer a vocês que vocês também podem trapacear com esta técnica e usar espectro ou cor para carregar uma fotografia, e ela irá extrair a paleta para vocês. Então, vá em frente e brinque com essas técnicas e crie uma segunda opção de paleta que você acha que é apropriada para o seu projeto. 12. Dicas e truques: Agora é um bom momento para dar a vocês algumas dicas extras e coisas a considerar ao escolher a cor. O primeiro é algo que aprendi ao longo dos anos enquanto estudava pintura e ilustração. O mesmo se aplica no design. As sombras não são pretas. É bom usar uma sombra cinza ou preta se você tiver um fundo cinza ou branco. Isso parece totalmente bem. Mas assim que você adicionar uma sombra sobre um fundo colorido, você deve experimentar a cor do fundo e misturá-la com o preto, criando uma nova cor personalizada para sua paleta. Então, veja o que você pode se sentir tentado a fazer ao escolher tons no seletor de cores do Photoshop ou do Illustrator. Você pode escolher uma cor e escolher esses tons mais escuros seguindo uma linha vertical para cima e para baixo. Mas, na realidade, os destaques e as sombras parecem muito mais naturais se você os escolher no seletor de cores em uma curva gradual em direção ao preto. Outra coisa que você deve pensar é considerar adicionar uma nova amostra para o corpo do texto em sua paleta. Então, em vez de tornar seu corpo texto 100% preto, tente torná-lo 80% preto ou 90% preto, para torná-lo um pouco menos áspero para os olhos. Falaremos mais sobre contraste na segunda classe, mas uma dica como esta é boa para pensar antecipadamente. Finalmente, pense em colocar sua escolha de cores totalmente off-line. Muitos de vocês podem não ter acesso a uma amostra pantone, que é bom porque a maioria deles são feitos para ser usado para design de impressão de qualquer maneira. Mas se vocês fazem um monte de brainstorming em grupo, ou talvez juntem um monte de quadros de humor durante sua pesquisa, vão pegar algumas lascas de tinta na loja de tintas. Não quero dizer levar todos eles, mas se há alguns que você gosta, leva-os de volta para o estúdio oficial, corte-os e comece a brincar com eles. Revisar discos, revistas, ir a uma loja de tecidos. Tantas impressões de tecido em padrões são ótimas para inspiração de cores. Nunca se sabe o que se pode inventar se consegue fugir do computador. 13. Construindo sua paleta: Então, eu costumava mostrar meus conceitos de cor para os clientes colocando as cores na maquete real do design do site no início que eu rapidamente aprendi que era uma idéia terrível. Há tantas coisas que podem dar errado aqui. Se você mostrar ao seu cliente dois ou três projetos de site diferentes, e cada design tem um esquema de cores diferente, você pode praticamente garantir que o cliente vai escolher o design do site com a cor que mais gosta, mesmo que o outro sites têm um design melhor em geral. Então, é por isso que gosto de mostrar aos meus clientes minhas ideias iniciais de cores. Muito antes de verem qualquer layout. Você quer que o cliente se concentre na cor apenas sem ser influenciado por qualquer outra coisa como fotografia, falta de conteúdo, não entender o que lorem ipsum é, ou qualquer outra coisa. É o que vocês vão fazer por mim. Para o seu projeto final nesta aula, quero que você pegue suas duas paletas, duas diferentes, as que você escolheu pesquisando e experimentando, e publique-as na comunidade de compartilhamento de habilidades para feedback. Quando você publicá-los eu quero que você realmente explique por que você escolheu cada esquema de cores. Não tenha medo de mostrar seu processo também. Você pode mostrar qualquer coisa que você usa para inspiração, você pode mostrar seus cadernos, o que quer que seja. Mas, não mostre as paletes no design do bikebook. Isso vai fazer parte da classe dois. Sinta-se livre para mostrar suas opções de cores da maneira que quiser. Mas se você não tem certeza de como, confira esta planilha de paleta que eu incluí para você. Então, eu gosto de mostrar como o logotipo poderia parecer, e como ele poderia olhar ao contrário, em uma cor clara sobre um fundo mais escuro, e claro eu gostaria de mostrar exemplos de cada amostra, e o tempo em tons de cada uma. No final do processo de feedback, você deve ter uma paleta de cores com a qual você está feliz antes de seguir em frente. Eu definitivamente espero que vocês se juntem a mim na classe dois. 14. Explore o Design no Skillshare: maneira.