HTML/CSS: seleção de cores fácil!

1. Introdução: Olá, bem-vindo à cor para CSS.Tem o mistério da cor aludiu você e você está se perguntando como fazer seus projetos um pouco mais forte.Nesta classe, você vai explorar diferentes sistemas de geração de cores e como usá-los em seu código. Vamos explorar o clima de embarque. Vamos explorar geradores de esquema de cores. Então, vamos colocar tudo junto no Dreamweaver usando seu CSS embutido e externo. Espero que goste. 2. Geradores de esquema de cores: Vamos verificar geradores de esquema de cores, eu amo geradores de esquema de cores. Eu os uso não só para o meu web design, mas também para o meu design de impressão. É apenas uma boa maneira de colocar nossos pensamentos em ordem sobre nossa marca e nosso cliente antes de realmente entrarmos no processo. Gosto de contar isso como parte do processo de pesquisa, e tenho tendência a fazer isso em uníssono com esboços reais e geração de ideias. Eu sei onde o projeto vai nos levar. Agora, no nosso blog ou no meu blog, que eu tenho ligado em nossos projetos de curso abaixo, fiz uma lista dos cinco primeiros para mostrar na aula e levei meus alunos e aqueles que eu sinto que meus alunos se conectam bem. O link está lá, e se você não quiser usar isso, basta ir em frente e Google ou gerador de esquema de cores, ou top 20 geradores de esquema de cores. Há tantos geradores de esquema de cores lá fora que inicialmente pode ser esmagador. Este é o top cinco regado e você pode continuar explorando se assim desejar. O que eu gosto de começar os alunos é na verdade Palatton. Este é bom porque vou chamar isso de versão mais científica. Você pode ser bem exato com este. Se estivéssemos à procura de um azul, talvez azul de ardósia para a cor do nosso site principal. Você pode ver, você pode ajustar os tons de acordo se você precisa que seja um pouco mais brilhante, etc Você pode incliná-lo para o caminho que você quer levá-lo e esta vai ser a nossa paleta monocromática. Quando você passa o mouse, você pode ver que ele tem o número hexadecimal 446188. Agora, o que eu faço às vezes para facilitar a vida é apenas mudar. Estou em um Mac, então Shift Command 4, e isso nos dá uma mira. Vou tirar uma captura de tela para que eu possa me referir a isso. Eu posso trazê-lo para o Photoshop e experimentar essas cores ou poderia usá-lo em um projeto de impressão se eu for um designer de impressão em vez de um web designer. O que eu também faço como reserva é, eu vou pegar meu lápis, bem na cor principal, 446188. Tenho um caderno colorido com o qual trabalho e está sempre na minha mesa. Você pode usar uma nota Post-It. Basta anotar esse número para que você possa se referir a ele. Eu só vou dizer por enquanto, eu só vou pegar essa cor principal. Se vou trabalhar monocromaticamente, posso pegar o resto deles, mas vamos ver o que mais eles fazem. Aqui está o nosso monocromático. Este vai ser o nosso adjacente ou o nosso análogo. Você pode ver que há todos os nossos códigos. Se você quiser adjacente e quiser usar isso para o seu sistema, pegue-o. Nós temos a nossa tríade e este tem um contraste muito agradável, como você pode ver para que você tenha uma boa harmonia com ele. Mas ainda temos esses pontos contrastes que precisamos para dar à nossa página um senso de organização e hierarquia. Em seguida, temos a nossa tag trad ou o nosso quadrado, dependendo do seu instrutor fundações, esses dois termos são intercambiáveis. Há um que é muito decente também. Você pode ver que também dá cada um dos nossos matizes e tons. Além disso, se quisermos saltar fora disso, podemos, podemos compartilhar nossas paletas se assim o desejarmos, ou podemos continuar nos ajustando ainda mais. Eu gostaria de trabalhar com tríades tipicamente. Vamos começar com essa. Aqui está a nossa cor principal e talvez esta vai ser, talvez o amarelo vai ser a nossa cor de apoio. Vou anotar de volta. Vai ser CFB85E. Então talvez a cor do pêssego seja o nosso recipiente div. Vou anotar div CFA85E e captura de tela para que tenhamos essas cores como referência. Se clicarmos em nossa guia de predefinições sob nossa roda de cores, você pode ver que temos mais opções. Você pode ir com pastel mais leve. Você pode ir pastel brilhante, brilhante, cor cheia, pastel claro, pastel mais brilhante, as cores mais escuras. Você pode ir os escritores acinzentados. Há tantos ajustes que você pode continuar aqui, apenas continuar. Também podemos adicionar complementos, se assim o desejar, para que você obtenha uma gama ainda mais ampla. Temos o nosso blues e as nossas laranjas. Vai conseguir esse fator de equilíbrio e dar-nos um pouco mais de ênfase. Palatton é um bom para começar, e depois voltar para as nossas cores. Porque ele vai lhe dar um monte de opções e eles vão ser, vez que este é mais baseado roda de cores, realmente agradável e harmonioso para o seu design. Vamos em frente e olhar para os outros. Canvas tem um. Vamos checar o Canvas. Canvas' interessante porque vai ter uma abordagem mais psicológica para a cor e que apenas o que acabamos de ver com a harmonia de cores. Isso é tudo o que você precisa saber sobre cores. Vamos clicar em roxo. Ele vai te dizer do que se trata, onde ele se sentou na roda de cores, o que significa. Mais sobre o significado da cor, e o que é bom é à direita você tem suas combinações de cores. Você pode, claro, clicar em mais, mas vamos apenas pegar o primeiro para que possamos vê-lo. Este é um quadro de humor preexistente que alguém fez. Você pode ver as cores que este selecionado com ele e os códigos hexadecimais são, claro, com ele. Você pode ir em frente e anotar isso ou fazer uma captura de tela. Também há fonte de cores. Este tem uma interface muito agradável e é uma versão semelhante do conceito com o Palatton. Mas o que é bom com este é que ele vai lhe dar amostras de seu CSS/web design vai se parecer se você usar essas opções de cores. Isso ajuda você a tomar suas decisões um pouco mais fáceis. Se você quer laranja ou Germaine, como seria? Bem como levá-lo de volta para complementar. Talvez você queira que ele seja um pouco mais brilhante e tom para que você possa ver, você pode mudar cada um dos pontos de ênfase para isso, e ele vai dar o seu código para os principais também. Como de costume, captura de tela, anote, seja qual for o seu sistema. Vá em frente e tente isso. Basta explorar cada um deles, ver qual deles funciona melhor para você. Você vai encontrar um que você tem uma tendência a se referir uma e outra vez. Como eu disse, há tantos lá fora, fazer uma pesquisa no Google e encontrar ainda mais. 3. Adobe Spark e Moodboards e no Canva: Tudo bem. Vamos em frente e verificar as placas de humor. Haverá dois que vamos ver. O primeiro é o Adobe Spark, e o segundo é o que passa pelo Canva. Ambos são gratuitos para você usar. Para a Adobe, você terá que fazer um login ou usar suas Creative Clouds para que você possa acessá-lo. Mas vamos em frente e criar um quadro de humor. Agora, para isso, o que queremos fazer é pensar sobre quais seriam as necessidades do cliente e como representamos seu site usando cores. Não necessariamente as cores que queremos, mas quais são as cores que eles querem? Eles e seus clientes também. Para isso, o que vamos precisar fazer é fazer um novo post. Você pode começar do zero se desejar, você pode ir em frente e escolher um modelo. Para isso, eu só vou usar um modelo. Dessa forma, você pode ver como funciona. Você pode ver seus negócios, escola , artesanato em destaque, comida, colagens, e, sem dúvida, o que estamos procurando vai estar sob a área de colagem, porque você vai querer ser capaz de ver o fotos diferentes que representam o clima para o seu cliente e seu site. Você pode ver, você pode escolher o que você quiser. Qualquer que você sinta que vai funcionar melhor para você. Estou a gostar da grelha desta. Vamos em frente e aparecer aqui. Uma coisa boa com Spark e Canva é que eles têm imagens de clipe art de barra livre que você pode usar para criar seu quadro de humor. Vai levar algumas das buscas. Uma opção que também está disponível para você é, naturalmente, o Pinterest. Mas eu acho que a maioria de nós conhece Pinterest agora, então vá em frente e use esse também se você assim desejar. Isso é bom porque é o que você vê, é o que você recebe. Vamos em frente e colocar um quadro de humor de web design ou quem quer que seu cliente seja. Em nosso projeto de classe, eu tenho uma lista de vários clientes para você usar, então você pode usar um desses. Você pode mudar seu estilo de tipo se assim o desejar. Você pode ver que temos um primário, temos um secundário. Se você não quer esse, vamos com aquele, porque talvez este serifa vai se encaixar um pouco mais no estilo do nosso cliente. Você pode ser tão personalizável quanto quiser com isso ou mantê-lo tão amplo e geral. Mas o foco é claro que vai ser as imagens que representam o nosso cliente. Um dos clientes é um local ao ar livre. Então, para este, eu vou construí-lo como este vai ser um site ao ar livre. Eu vou clicar em nossa primeira célula, e você pode ver que temos filtros nele, eu vou desligar os filtros porque se estamos lidando com isso de cor, eu quero que ele não seja ajustado nesta fase porque nós estamos indo para retirar nossas amostras desta área. Vá em frente, vamos encontrar uma foto grátis e é ao ar livre. Digamos que nosso primeiro, queremos olhar para as montanhas. Então o que você vai querer fazer é pensar sobre qual cor iria representá-los, e vamos em frente e inseri-lo aqui, e você pode deslizá-los ao redor, você pode aumentar e diminuir, você pode girar se você assim desejar, Então se você é como, “Oh, eu quero que ele se pareça com isso. Uma escala muito mais ampla porque estou mais interessado nessas cores.” Então, absolutamente, vá em frente. Vamos encontrar outro aqui, então Alter, vou pensar no lago. Que cores de um lago vão se unir com a inspiração para este projeto? Esta é a parte que você pode levar tempo e mergulhar um pouco. Acho que talvez esta cor. A mesma coisa se você quiser girar, vá em frente e gire. Você pode dizer que ele está inclinado para um pouco de abstração com isso, e você pode simplesmente continuar. Selecione cada célula que deseja alterar, desative esse filtro para se certificar de que o filtro também está desativado. Sky, porque queremos sair e sair. Este está muito bonito. Em seguida, basta girá-lo para onde as cores representam melhor o seu cliente. Agora vamos verificar Canva que funciona de forma muito semelhante ao Spark. Mais uma vez, todos esses links estão em nossa área de projeto de classe. Vamos em frente e clicar em “começar a desenhar um quadro de humor”. Você pode, claro, trabalhar a partir do zero. Mas eu só vou tornar apenas como a última vida um pouco mais fácil e vamos apenas ir em frente e usar um modelo pré-existente. Mas este aqui você pode ver que havia um sinal de $ nele, então se você não queria aquele e se você queria um livre, você pode ir em frente e clicar em um dos gratuitos, e você pode ver que ele muda de acordo e você pode se transformar tanto quanto que você quer. Agora, do mesmo modo, é basicamente o que você vê é o que você recebe. Vamos em frente, web design e cor humor board. Você pode mudar o tipo se desejar, assim como no último. Vamos clicar duas vezes sobre isso e se não quisermos que um, eu vou pegar o primeiro lá, deixá-lo fazer isso é coisa, mesmo negócio aqui, vamos mudar esse. Vamos com o ousado para que tenhamos a nossa hierarquia estabelecida imediatamente. Podemos mudar esta cor. Eu vou assumir que você tem seus códigos hexadecimais prontos e escritos de nossa última seção. Você pode ir em frente, escolher uma cor neste pequeno quadrante e clicar no plus. Se você tem seu código hexadecimal, você pode ir em frente e digitá-lo lá, ou você pode girar sua roda se você estiver usando seu quadro de humor como uma forma de encontrar essas cores. Você pode aumentar as sombras e o tenso, se desejar, você pode deixá-lo no mid-range. Vamos mais em direção a este espectro só para que pareça um pouco diferente do nosso último, e vamos apenas ficar com o tema da natureza, a loja ao ar livre da nossa última. Vou em frente, clique duas vezes. Vamos entrar em nossos elementos primeiro. Vamos fazer isso. Vá em frente, apague essa. Vamos achar uma foto grátis. Lá vamos nós, oh, lindo. Você pode ver, você pode apenas clicar e arrastá-lo para dentro, e você pode fazer o seu botão desfazer aqui. Ao clicar duas vezes, você pode redimensionar e girar adequadamente. Se você queria mais cores da cachoeira para este, você será capaz de mudá-lo dessa forma. Vou continuar arrastando um após o outro, redimensionar, ajustar, girar. Talvez em nossos locais ao ar livre, a canoa faz sentido, e o campo, e uma montanha. Perfeito. Isso funcionou bem para nós. Também pode ver que podemos arrastar algumas das nossas cores daqui. Vamos adicionar uma cor. Digamos que o primeiro que queremos que seja aquele verde na canoa. Só vou inclinar mais para isso. Então, quando estamos felizes com isso, você pode ver que ele está ajustando enquanto eu trabalho. Nós vamos com essa. Clique no próximo. Vamos pegar aquele roxo, já que já usamos isso como nossa hierarquia. Misture outra cor, vamos com a cor do trigo. Vou levar mais para a luz. O verde mais escuro da nossa montanha, mude a intensidade dessa. Talvez para o nosso web design, esta vai ser a nossa cor de fundo. Talvez este seja o nosso parágrafo div h1, etc., ou botões. Dessa forma, você tem um ponto de partida para o tema da sua peça. Estes dois sites são realmente fáceis de usar e eu recomendo que você experimentá-los. 4. Dreamweaver: Tudo bem, então agora vamos pegar nosso código e levá-lo para o nosso site real. Para isso, vou usar o Dreamweaver e tenho modelos feitos para você. Eles são muito simples e direto para você se acostumar a colocar cores no CSS, e ver como elas ficam na página. Agora, eu peguei nosso suprimento de cores, um que fizemos e encontrei um que eu gostei. Vamos ficar com o análogo e aqui estão os nossos códigos. Eu fui em frente e anotei. Assim eu tenho acesso a isso. Você também teve suas capturas de tela. Se você estava usando esse sistema, é claro que temos o primeiro, vá em frente ao Photoshop, abra-o, e pegue seu conta-gotas. Então, quando você clica duas vezes em sua amostra de cores, seu código hexadecimal aparecerá lá, para que você possa anotá-los a partir daí. Em alguma capacidade, seja através da captura de tela ou de um de nossos geradores de esquema de cores, vá em frente, anote nossas cores para que possamos ir em frente ao Dreamweaver. Certo, abrindo nosso Dreamweaver e eu temos os dois sites. Para este, vou mostrar-lhe o interno, vamos em frente, eu vou gerenciar os sites. Lá está o nosso externo, vamos apenas fazer um novo, demo 1. Nós vamos ligá-lo a, vamos apenas fazer inline. Demo 1, apenas certificando-se, tudo bem, vá em frente e aperte “Concluído”. Este é o que vai ser o nosso inline. Vamos em frente e abrir nossa página de índice para que possamos ver o que está acontecendo aqui. Agora, eu tenho cores básicas despejadas aqui e eu apenas usei o sistema de nomes amarelo, verde e vermelho, então não é tão preciso, nossos códigos hexadecimais vão nos dar mais precisão. Para a nossa cor de fundo, gostei desse olhar amarelado. Vamos em frente, e o que eu tenho é FF337, lá está o nosso primeiro, que é alegre. Nosso h1, digamos que vamos colocar uma área de fundo nesse. Vamos experimentar o cerco, 95ECD6, aí está o nosso olhar cercado. Tudo bem, e vamos com a nossa área div, eu só peguei três, então nós vamos fazer os três primeiros, este é aquele olhar laranja, FBC52C. Esqueci-me do feitiço, não te esqueças do feitiço. Lá vamos nós, temos nosso sinal de libra ligado para que possamos ver, estamos desligando esses. Temos o nosso cerco que laranja calêndula, e depois o nosso amarelo. Se você queria pegar mais um, vamos voltar para aquele. Vamos apenas ajustá-lo talvez para mais do olhar laranja, só para que você possa ver as quatro cores, FF6001, escrevendo isso. Eu poderia ter copiado e colado, mas é o que é. Vamos em frente, FF6001, e haveria todos os quatro nessa família de cores que estariam trabalhando em sua página. Talvez alguns vão ser texto, outros vão ser manchete. Vai depender completamente de você. Vamos fechar essa. Eu não vou salvar, mas você iria em frente, captura de tela que, você pode visualizá-lo se quiser, e enviá-lo para nossos projetos de curso para que possamos ver no que você está trabalhando. Vamos colocar o externo. Nós vamos administrar isso. Vou chamar este demo 2, e vamos ligá-lo ao nosso externo, salvar, tudo bem, feito. Há o nosso índice e há os nossos estilos, e é baseado nas últimas cores, apenas o azul-verde claro, etc Mude no seu externo, eu só vou pegá-los um de cada vez, CD6. Oops. Lembre-se, são os pequenos erros de digitação que podem nos despistar. Certifique-se de que você está soletrando e colocando seus símbolos corretamente, BC52C, e por último, mas não menos importante, FF6001. Se você estiver indo para usar o meu modelo, basta ir em frente e pegar quatro das cores. Agora, se formos até aqui, você pode ficar tipo, “Nada está acontecendo.” Certifique-se de salvá-lo, se nada estiver acontecendo. Os dois estão se comunicando se você tiver a versão mais recente do Dreamweaver, mas as mais antigas, você precisará garantir que ela seja salva e atualizada. Desta forma, você pode ver o que está acontecendo com as cores, e você pode construir um site que depende da sua marca e das necessidades dos clientes. 5. Projeto de curso de cores de CSS: Tudo bem. Para o nosso projeto de classe, você tem duas opções para isso. O primeiro é criar quadros de humor que representem os clientes que eu listei no projeto de classe. Há cerca de cinco deles e cada um tem uma necessidade muito específica de clientela. Um é mais orientado para crianças. Um é mais, digamos, orientado financeiramente. Como você lida com cores que representam seus vários clientes, suas necessidades e sua marca? Opção 1, você pode ir em frente e criar esses quadros de humor. Você pode salvá-los ou capturá-los e enviá-los para nossos projetos de curso para que possamos ver. A outra opção é que você também pode adicionar um pouco mais a isso. O que acontece se você adicionar o código em seu CSS? Eu tenho modelos embutidos e externos livres para usar. Eles são muito básicos, então é apenas manipular seu CSS para ver como ajustar suas cores e ver como ele funcionaria em uma página web real. Os arquivos são criados no Dreamweaver para que você possa usar o Dreamweaver ou abri-los por meio do TextEdit ou do Bloco de Notas Plus, se você for um usuário de PC. Como sempre, sempre que você terminar, vá em frente e compartilhá-los para que possamos ver o que você fez. 6. Conclusão: Nesta classe, você tem que explorar geradores de esquema de cores, e ver como cada um deles funciona, para descobrir qual deles funciona melhor para você e seu fluxo de trabalho. Ao dar um esquema de cores mais harmonioso, você vai puxar seus designs para o próximo nível. Além disso, você tem que ver como os quadros de humor podem influenciar o impacto nas decisões de marca e cor, e você tem que juntar tudo isso usando CSS Inline ou externo, qualquer que você escolher. Espero que tenha gostado da aula. Mal posso esperar para ver o que você criou.