HTML/CSS : la sélection des couleurs simplifiée !

1. Introduction: Bonjour, bienvenue à la couleur pour CSS.A le mystère de la couleur fait allusion à vous et vous vous demandez comment rendre vos conceptions un peu plus forte.Dans cette classe, vous allez explorer différents systèmes de génération de couleurs et comment les utiliser dans votre code. On va explorer l'ambiance. Nous allons explorer les générateurs de couleurs. Ensuite, nous allons tout mettre ensemble dans Dreamweaver en utilisant votre CSS en ligne et externe. J'espère que vous apprécierez. 2. Générateurs de schémas de couleurs: Regardons les générateurs de jeux de couleurs, j'adore les générateurs de jeux de couleurs. Je les utilise non seulement pour mon design web, mais aussi pour mon design d'impression. C' est juste une bonne façon de mettre de l'ordre sur notre marque et notre client avant de nous lancer dans le processus. J' aime compter cela comme une partie du processus de recherche, et j'ai tendance à le faire à l'unisson avec des croquis réels et la génération d'idées. Je sais où le projet va nous mener. Maintenant, sur notre blog ou sur mon blog, que j'ai lié dans nos projets de cours ci-dessous, j'ai fait une liste des cinq premiers à montrer en classe et j'ai pris mes élèves et ceux auxquels je pense que mes étudiants se connectent bien. Le lien est là, et si vous ne voulez pas l'utiliser, il suffit d'aller de l'avant et Google soit générateur de jeu de couleurs, ou les 20 principaux générateurs de jeu de couleurs. Il y a tellement de générateurs de schémas de couleurs là-bas qu'au départ, il peut être écrasant. C' est le top cinq édulcoré et vous pouvez continuer à explorer si vous le souhaitez. Celui avec lequel j'aime commencer les étudiants est en fait Palatton. Celui-ci est sympa parce que je vais appeler ça la version plus scientifique. Tu peux être assez exact avec celui-là. Si nous recherchions un bleu, peut-être bleu ardoise pour la couleur de notre site principal. Vous pouvez le voir, vous pouvez ajuster les nuances en conséquence si vous en avez besoin pour être un peu plus lumineux, etc. Vous pouvez l'incliner de quelle façon vous voulez le prendre et ce sera notre palette monochromatique. Lorsque vous survolez, vous pouvez voir qu'il a le numéro hexadécimal 446188. Maintenant, ce que je vais parfois faire pour faciliter la vie, c'est juste changer. Je suis sur un Mac, donc Shift Command 4, et ça nous donne un réticule. Je vais prendre une capture d'écran de ça pour que je puisse y revenir. Je peux l'apporter dans Photoshop et échantillonner ces couleurs ou je pourrais l'utiliser dans un projet d'impression si je suis un concepteur d'impression au lieu d'un concepteur Web. Ce que je fais aussi comme une sauvegarde, c'est je vais prendre mon crayon, que je vais prendre mon crayon, juste en bas de la couleur principale, 446188. J' ai un cahier couleur avec lequel je travaille et il est toujours sur mon bureau. Vous pouvez utiliser une note Post-it. Il suffit d'écrire ce numéro pour que vous puissiez y revenir. Je vais juste dire pour l'instant, je vais juste prendre cette couleur principale. Si je vais travailler de façon monochromatique, je peux prendre le reste d'entre eux, mais voyons ce qu'ils font de plus. Voici notre monochromatique. Ce sera notre adjacent ou notre analogue. Vous pouvez voir qu'il y a tous nos codes. Si vous voulez adjacente et que vous voulez l'utiliser pour votre système, saisissez-le. Nous avons notre triade et celui-ci a vraiment beau contraste, comme vous pouvez le voir donc vous obtenez une belle harmonie avec elle. Mais avoir encore ces points de contraste dont nous avons besoin pour donner à notre page un sens de l'organisation et de la hiérarchie. Ensuite, nous avons notre tag Trad ou notre carré, selon votre instructeur de fondations, ces deux termes sont interchangeables. Il y en a un qui est assez décent aussi. Vous pouvez voir qu'il donne également chacune de nos teintes et nuances. Aussi, si nous voulons rebondir, nous pouvons, nous pouvons partager nos palettes si nous le désirons, ou nous pouvons continuer à nous ajuster encore plus. J' aimerais travailler avec des triades typiquement. Commençons par celle-là. Il y a notre couleur principale et peut-être que ça va être, peut-être que le jaune va être notre couleur de soutien. Je vais écrire en retour. Ça va être CFB85E. Alors peut-être que la couleur pêche va être notre conteneur div. Je vais écrire div CFA85E et capture d'écran pour que nous ayons ces couleurs comme référence. Si nous cliquons sur notre onglet presets sous notre roue de couleur, vous pouvez voir que nous obtenons plus d'options. Vous pouvez aller avec le pastel le plus léger. Vous pouvez aller pastel brillant, brillant, pleine couleur, pastel clair, pastel plus lumineux, les couleurs plus sombres. Vous pouvez aller les écrivains grisâtres. Il y a tellement d'ajustements que vous pouvez continuer ici, continuez. Nous pouvons également ajouter des compléments si vous le souhaitez afin que vous obtenez une gamme encore plus large. Nous avons nos bleus et nos oranges. Il va obtenir ce facteur d'équilibre et nous donner un peu plus d'importance. Palatton est un bon pour commencer, puis revenir à nos couleurs. Parce que cela va vous donner beaucoup d'options et ils vont être, puisque c'est plus basé sur la roue de couleur, vraiment agréable et harmonieux pour votre design. Allons de l'avant et regardons les autres. La toile en a un. Voyons Canvas. Canvas 'intéressant parce qu'il faudra une approche plus psychologique couleur et que juste ce que nous venons de voir avec l'harmonie des couleurs. C' est tout ce que vous devez savoir sur les couleurs. Cliquons sur violet. Il va vous dire de quoi il s'agit, où il était assis sur la roue de couleur, ce que cela signifie. Plus sur la signification de la couleur, et ce qui est beau est sur la droite, vous avez vos combinaisons de couleurs. Vous pouvez, bien sûr, cliquer sur plus, mais prenons simplement le premier pour que nous puissions le voir. C' est un tableau d'humeur préexistant que quelqu'un a fait. Vous pouvez voir les couleurs que cela a sélectionnées avec elle et les codes hexadécimaux sont bien sûr avec elle. Vous pouvez aller de l'avant et écrire cela ou faire une capture d'écran. Il y a aussi de l'approvisionnement en couleurs. Cela a une interface vraiment agréable et c'est une version similaire du concept avec le Palatton. Mais ce qui est bien avec celui-ci, c'est qu'il va vous donner des exemples de ce que votre design CSS/Web va ressembler si vous utilisez ces choix de couleurs. Cela vous aide à prendre vos décisions un peu plus facilement. Si vous voulez orange ou Germaine, quoi ça ressemblerait ? En plus de le reprendre pour compléter. Peut-être que vous voulez qu'il soit un peu plus lumineux et ton afin que vous puissiez voir, vous pouvez déplacer chacun des points d'accent vers cela, et cela va donner votre code pour les principaux aussi. Comme d'habitude, capture d'écran, écrivez-le, quel que soit votre système. Allez-y et essayez ça. Il suffit d'explorer chacun d'entre eux, voir lequel fonctionne le mieux pour vous. Vous en trouverez un que vous avez tendance à faire référence à maintes et maintes fois. Comme je l'ai dit, il y en a tellement, faire une recherche Google et trouver encore plus. 3. Adobe Spark et Canva Moodboards: D' accord. Allons de l'avant et vérifions les tableaux d'humeur. Il y en aura deux que nous allons passer. Le premier est Adobe Spark, et le second est celui de Canva. Les deux sont gratuits pour vous d'utiliser. Pour Adobe, vous devez vous connecter ou utiliser Creative Clouds afin d'y accéder. Mais allons de l'avant et créons un tableau d'humeur. Maintenant pour cela, ce que nous voulons faire est de penser à ce que seraient les besoins du client et comment pouvons-nous représenter son site en utilisant des couleurs. Pas nécessairement les couleurs que nous voulons, mais quelles sont les couleurs qu'ils veulent ? Ils et leurs clients aussi. Pour cela, ce que nous allons devoir faire est de faire un nouveau poste. Vous pouvez commencer à partir de zéro si vous le souhaitez, vous pouvez aller de l'avant et choisir un modèle. Pour cela, je vais juste utiliser un modèle. De cette façon, vous pouvez voir comment il fonctionne. Vous pouvez voir leur entreprise, école, artisanat vedette, nourriture, collages, et sans aucun doute celui que nous allons chercher va être sous la zone de collage, parce que vous allez vouloir être en mesure de voir le différentes photos qui représentent l'ambiance de votre client et de leur site. Vous pouvez voir, vous pouvez choisir celui que vous voulez. Celui que vous sentez sera le mieux pour vous. J' aime le quadrillage de celui-ci. Allons de l'avant et jetons ici. Une bonne chose avec Spark et Canva est qu'ils ont images clipart slash gratuites que vous pouvez utiliser pour créer votre tableau d'ambiance. Ça va prendre une partie de la recherche. Une option qui est également disponible pour vous est bien sûr Pinterest. Mais j'ai la figure que la plupart d'entre nous connaissent Pinterest maintenant, alors allez-y et utilisez celui-ci aussi si vous le souhaitez. C' est bien parce que c'est ce que vous voyez, c'est ce que vous obtenez. Allons de l'avant et mettre un tableau d'humeur de conception web ou qui que votre client serait. Dans notre projet de classe, j'ai une liste de plusieurs clients à utiliser, donc vous pouvez utiliser l'un d'entre eux. Vous pouvez changer votre style de type si vous le souhaitez. Vous pouvez voir que nous avons une primaire, nous avons une secondaire. Si vous ne voulez pas celle-là, allons-y avec celle-là, parce que peut-être cette dalle de serif va s'adapter un peu plus au style de notre client. Vous pouvez être aussi personnalisable que vous le souhaitez avec ceci ou le garder aussi large et général. Mais l'accent sera bien sûr sur les images qui représentent notre client. L' un des clients est un site en plein air. Donc pour celui-ci, je vais le construire comme si ça allait être un site extérieur. Je vais cliquer sur notre première cellule, et vous pouvez voir que nous avons des filtres dessus, je vais éteindre les filtres parce que si nous avons affaire à partir de la couleur, je veux qu'il ne soit pas ajusté à ce stade parce que nous allons pour extraire nos échantillons de cette zone. Allez-y, nous allons trouver une photo gratuite et c'est un extérieur. Disons que notre premier, nous voulons regarder les montagnes. Alors ce que vous voudrez faire est de penser à quelle couleur les représenterait, et allons de l'avant et insérons-la ici, et vous pouvez les faire glisser, vous pouvez augmenter et diminuer, vous pouvez tourner si vous le souhaitez, Donc si tu dis : « Oh, je veux que ça ressemble à ça. Une échelle beaucoup plus large parce que je suis surtout intéressé par ces couleurs. » Alors allez-y absolument. On va en trouver un autre ici, alors Alter, je vais penser à Lake. Quelles couleurs d'un lac vont s'associer à l'inspiration de ce projet ? C' est la partie que vous pouvez prendre le temps et serrer un peu. Je pense peut-être à cette couleur. Même chose si vous voulez faire pivoter, allez-y et faites pivoter. Vous pouvez dire qu'il est penché vers un peu d'abstraction avec cela, et vous pouvez juste continuer. Vous sélectionnez chaque cellule que vous souhaitez modifier, désactivez ce filtre pour vous assurer qu'il est également désactivé. Sky, parce qu'on veut être dehors. Celui-ci a l'air plutôt sympa. Ensuite, il suffit de le faire pivoter là où les couleurs représentent le mieux votre client. Maintenant, regardons Canva qui fonctionne très similaire à Spark. Encore une fois, tous ces liens se trouvent dans notre zone de projet de classe. Allons de l'avant et cliquez sur « Commencez à concevoir un tableau d'humeur ». Vous pouvez bien sûr travailler à partir de zéro. Mais je vais juste rendre juste comme la dernière vie un peu plus facile et allons juste de l'avant et utiliser un modèle pré-existant. Mais celui-ci, vous pouvez voir qu'il y avait un signe $ dessus, donc si vous ne vouliez pas celui-là et si vous en vouliez un libre, vous pouvez aller de l'avant et cliquer sur l'un des gratuits, et vous pouvez voir qu'il change en conséquence et vous pouvez transformer autant que que vous voulez. Maintenant, juste de la même façon, c'est à peu près ce que vous voyez est ce que vous obtenez. Allons de l'avant, design web et tableau d'humeur couleur. Vous pouvez changer le type si vous le souhaitez, tout comme dans le dernier. Double-cliquez dessus et si on ne veut pas celle-là, je vais juste prendre le premier là-bas, laisser le faire, c'est même affaire ici, changeons celui-là. Allons avec les audacieux pour que notre hiérarchie soit établie immédiatement. On peut changer cette couleur. Je vais supposer que vous avez vos codes hexadécimaux prêts et écrits dans notre dernière section. Vous pouvez aller de l'avant, choisir une couleur dans ce petit quadrant et cliquer sur le plus. Si vous avez votre code hexadécimal, vous pouvez aller de l'avant et taper là, ou vous pouvez faire tourner votre roue si vous utilisez votre planche d'humeur comme un moyen de trouver ces couleurs. Vous pouvez augmenter les nuances et le tendu si vous le souhaitez, vous pouvez le laisser au milieu de gamme. Allons plus vers ce spectre juste pour qu'il semble un peu différent de notre dernier, et restons juste au thème de la nature, la boutique de plein air de notre dernier. Je vais aller de l'avant, double-cliquez. Nous allons d'abord entrer dans nos éléments. Faisons ça. Allez-y, supprimez celui-là. Trouvons juste une photo gratuite. On y va, oh, magnifique. Vous pouvez voir, vous pouvez simplement cliquer et le faire glisser dans, et vous pouvez faire votre bouton d'annulation ici. Lorsque vous double-cliquez, vous pouvez redimensionner et faire pivoter en conséquence. Si vous vouliez plus de couleurs de cascade pour celui-ci, vous serez en mesure de le changer de cette façon. Je vais juste continuer à glisser l'un après l'autre, redimensionner, ajuster, faire pivoter. Peut-être que dans nos sites extérieurs, le canoë a du sens, et le champ, et une montagne. Parfait. Ça a bien fonctionné pour nous. De plus, vous pouvez voir que nous pouvons faire glisser certaines de nos couleurs à partir d'ici. Ajoutons une couleur. Disons, le premier que nous voulons qu'il soit aussi vert sur le canoë. Je vais juste me pencher plus vers ça. Ensuite, quand nous sommes satisfaits de ça, vous pouvez voir qu' il est en train de l'ajuster au fur et à mesure que je travaille. On va y aller avec celle-là. Cliquez sur le suivant. Prenons ce violet, puisque nous l'avons déjà utilisé comme hiérarchie. Mélangez une autre couleur, allons-y avec la couleur de blé. Je vais le prendre plus vers la lumière. Le vert foncé de notre montagne, changez l'intensité de celle-ci. Peut-être que pour notre design web, ce sera notre couleur de fond. Peut-être que celui-ci va être notre paragraphe div h1, etc., ou des boutons. De cette façon, vous avez un point de départ pour le thème de votre pièce. Ces deux sites sont vraiment faciles à utiliser et je vous recommande fortement de les essayer. 4. Dreamweaver: Bon, alors maintenant prenons notre code et prenons-le sur notre site web. Pour cela, je vais utiliser Dreamweaver et j'ai des modèles faits pour vous. Ils sont juste vraiment simples et simples pour vous habituer à mettre des couleurs dans le CSS, et à voir à quoi ils ressemblent sur la page. Maintenant, j'ai pris notre approvisionnement en couleurs, un que nous avons fait et j'en ai trouvé un qui me plaisait. Nous allons nous en tenir aux analogues et voici nos codes. Je suis allé de l'avant et je les ai notés. De cette façon, j'ai accès à ça. Vous avez aussi eu vos captures d'écran. Si vous utilisiez ce système, bien sûr nous avons notre premier, allez dans Photoshop, ouvrez-le et attrapez votre compte-gouttes. Ensuite, lorsque vous double-cliquez sur votre nuance de couleur, votre code hexadécimal va s'afficher là, sorte que vous pouvez les écrire à partir de là. Dans une certaine mesure, que ce soit par la capture d'écran ou par l'un de nos générateurs de couleurs, allez-y, faites écrire nos couleurs afin que nous puissions aller de l'avant dans Dreamweaver. D' accord, ouvrir notre Dreamweaver et moi avons les deux sites. Pour celui-ci, je vais vous montrer l'interne, allons-y, je vais gérer les sites. Voilà notre externe, faisons un nouveau, démo 1. Nous allons le lier à, faisons juste en ligne. Démo 1, juste en s'assurant, accord, allez-y et appuyez sur « Terminé ». C' est celui qui va être notre inline. Allons de l'avant et ouvrons notre page d'index pour que nous puissions voir ce qui se passe ici. Maintenant, j'ai des couleurs de base jetées ici et j'ai juste utilisé le système de dénomination jaune, vert, rouge, donc ce n'est pas si précis, nos codes hexadécimaux vont nous donner plus de précision. Pour notre couleur de fond, j'ai aimé ce regard jaunâtre. Allons-y, et celui que j'ai est FFF337, il y a notre premier, qui est joyeux. Notre h1, disons que nous allons mettre une zone de fond sur celui-là. Essayons la sarcelle 95ECD6, voilà notre look sarcelle. Bon, et allons-y avec notre zone de div, je n'ai attrapé que trois, donc nous allons juste faire les trois premiers, c'est ce look orange, FBC52C. J' ai oublié l'hexagone, n'oublie pas ton hexadécimal. On y va, on a l'enseigne de la livre pour voir, on les éteint. Nous avons notre sarcelle qui orange de souci, puis notre jaune. Si tu voulais en prendre un de plus, revenons à celui-là. Ajustez-le peut-être à plus de l'aspect orangé, juste pour que vous puissiez voir les quatre couleurs, FF6001, écrire cela. J' aurais juste pu le copier et le coller, mais c'est ce que c'est. Allons-y, FF6001, et il y aurait tous les quatre dans cette famille de couleurs qui travailleraient sur votre page. Peut-être que certains seront des textes, d' autres seront les gros titres. Ça va être complètement à toi de décider. Fin de celui-là. Je ne vais pas enregistrer, mais vous allez de l'avant, capture d'écran que, vous pouvez prévisualiser si vous le souhaitez, et le télécharger dans nos projets de cours afin que nous puissions voir ce que vous travaillez sur. Mettons l'extérieur. On va le gérer. Je vais appeler cette démo 2, et nous allons la lier à notre externe, sauver, c'est bien, fait. Il y a notre index et il y a nos styles, et il est basé sur les dernières couleurs, juste le bleu-vert clair, etc Changez-le dans votre externe, je vais juste les attraper un à la fois, CD6. Oups. Souviens-toi, ce sont les petites fautes de frappe qui peuvent nous jeter. Assurez-vous d'orthographier et de placer vos symboles correctement, BC52C, et enfin, FF6001. Si vous allez utiliser mon modèle, allez-y et prenez quatre des couleurs. Maintenant, si nous allons par ici, vous pourriez être comme : « Rien ne se passe. » Assurez-vous de le sauvegarder, si rien ne se passe. Les deux se parlent si vous avez la dernière version de Dreamweaver, mais les plus anciennes, vous devrez vous assurer qu'elle est sauvegardée et actualisée. De cette façon, vous pouvez voir ce qui se passe avec les couleurs, et vous pouvez créer un site qui dépend de votre marque et des besoins de vos clients. 5. Projet de couleurs CSS: D' accord. Pour notre projet de classe, vous avez deux options pour cela. Le premier est de créer des tableaux d'humeur qui représentent les clients que j'ai répertoriés dans le projet de classe. Il y en a environ cinq et chacun a un besoin très spécifique de la clientèle. L' un est plus orienté vers les enfants. L' un est plus, disons, axé sur la finance. Comment traitez-vous avec les couleurs qui représentent vos différents clients, leurs besoins et leur marque ? Option 1, vous pouvez aller de l'avant et créer ces planches d'humeur. Vous pouvez les enregistrer ou les capter d'écran et les télécharger sur nos projets de cours pour que nous puissions les voir. L' autre option est que vous pouvez également ajouter un peu plus à cela. Que se passe-t-il si vous ajoutez le code dans votre CSS ? J' ai des modèles en ligne et externes gratuits à utiliser. Ils sont très basiques donc c'est juste manipuler votre CSS pour voir comment ajuster vos couleurs et voir comment cela fonctionnerait sur une page Web réelle. Les fichiers sont créés dans Dreamweaver afin que vous puissiez utiliser Dreamweaver ou vous pouvez les ouvrir via TextEdit ou Bloc-notes plus si vous êtes un utilisateur de PC. Comme toujours, chaque fois que vous avez terminé, allez-y et partagez-les pour que nous puissions voir ce que vous avez fait. 6. Conclusion: Dans cette classe, vous devez explorer les générateurs de combinaisons de couleurs, et voir comment chacun d'entre eux fonctionne, pour savoir lequel fonctionne le mieux pour vous et votre flux de travail. En donnant un schéma de couleurs plus harmonieux, vous allez pousser vos dessins au niveau supérieur. De plus, vous devez voir comment les tableaux d'humeur peuvent influer sur les décisions de marque et de couleur, et vous devez tout rassembler à l'aide de CSS Inline ou externe, quel que soit votre choix. J' espère que vous avez apprécié la classe. J' ai hâte de voir ce que tu as créé.