HTML/CSS: Farbauswahl leicht gemacht!

1. Einführung: Hallo, willkommen, um für CSS zu färben.Hat das Geheimnis der Farbe Sie anspielten und Sie fragen sich, wie Sie Ihre Entwürfe ein wenig stärker zu machen.In dieser Klasse werden Sie verschiedene Systeme der Generierung von Farben und wie verwenden Sie sie in Ihrem Code. Wir werden uns mit dem Stimmungsboarden auseinandersetzen. Wir werden Farbschema-Generatoren erforschen. Dann werden wir alles in Dreamweaver mit Ihrem Inline-und externen CSS zusammenstellen . Ich hoffe, Sie genießen es. 2. Farbschemata Generatoren: Schauen wir uns Farbschema-Generatoren an, ich liebe Farbschema-Generatoren. Ich benutze sie nicht nur für mein Webdesign, sondern auch für mein Print-Design. Es ist nur eine schöne Möglichkeit, unsere Gedanken über unsere Marke und unseren Kunden in Ordnung zu bringen, bevor wir tatsächlich in den Prozess einsteigen. Ich zähle das gerne als Teil des Forschungsprozesses, und ich neige dazu, dies im Einklang mit tatsächlichen Skizzen und Ideengenerierung zu tun. Ich weiß, wohin das Projekt uns bringen wird. Jetzt auf unserem Blog oder auf meinem Blog , den ich in unseren Kursprojekten unten verlinkt habe, habe ich eine Liste der Top 5 davon erstellt, um in der Klasse zu zeigen und nahm meine Schüler und diejenigen, mit denen ich fühle, dass meine Schüler gut verbunden sind. Der Link ist da, und wenn Sie das nicht verwenden möchten, gehen Sie einfach voran und Google entweder Farbschema-Generatoren oder Top 20 Farbschema-Generatoren. Es gibt so viele Farbschema-Generatoren da draußen, dass es anfangs überwältigend sein kann. Dies ist die bewässert unten oben fünf und Sie können weiter erkunden, wenn Sie so wünschen. Der, mit dem ich gerne Schüler anfange, ist eigentlich Palatton. Das hier ist schön, weil ich das die wissenschaftlichere Version nennen werde. Sie können ziemlich genau mit diesem hier sein. Wenn wir auf der Suche nach einem blauen, vielleicht Schieferblau für unsere Hauptseite Farbe. Sie können sehen, Sie können die Schattierungen entsprechend anpassen wenn Sie das etwas heller sein müssen, usw. Sie können es kippen, auf welche Weise Sie es nehmen möchten und dies wird unsere monochromatische Palette sein. Wenn Sie den Mauszeiger zeigen, können Sie sehen, dass es die Hex-Zahl 446188 hat. Nun, was ich manchmal tun werde, um das Leben leichter zu machen, ist nur Verschiebung. Ich bin auf einem Mac, also Shift Command 4, und das gibt uns ein Fadenkreuz. Ich werde einen Screenshot davon machen, damit ich darauf zurückverweisen kann. Ich kann es in Photoshop bringen und diese Farben testen oder in einem Druckprojekt verwenden , wenn ich ein Druckdesigner anstelle eines Webdesigners bin. Was ich auch als Backup mache, ist, ich meinen Bleistift schnappen werde, genau die Hauptfarbe, 446188. Ich habe ein farbiges Notizbuch, mit dem ich arbeite und es ist immer auf meinem Schreibtisch. Sie können eine Post-It-Notiz verwenden. Schreiben Sie einfach die Nummer auf, damit Sie sich darauf beziehen können. Ich werde nur sagen, ich nur die Hauptfarbe schnappen werde. Wenn ich monochromatisch arbeiten werde, kann ich den Rest von ihnen greifen, aber schauen wir uns an, was sie mehr tun. Hier ist unsere monochromatische. Das wird unser benachbarter oder unser Analog sein. Sie können sehen, dass es alle unsere Codes gibt. Wenn Sie benachbarte möchten und Sie das für Ihr System verwenden möchten, greifen Sie es zu. Wir haben unsere Triade und diese hat wirklich schönen Kontrast, wie Sie sehen können, so dass Sie eine schöne Harmonie mit ihm bekommen. Aber immer noch diese Kontraste Punkte, die wir brauchen um unsere Seite ein Gefühl von Organisation und Hierarchie zu geben. Dann haben wir unsere Tag trad oder unsere quadriert, abhängig von Ihrer Stiftung Lehrer, diese beiden Begriffe sind austauschbar. Es gibt eine, die auch ziemlich anständig ist. Sie können sehen, es gibt auch jede unserer Tönungen und Schattierungen. Auch wenn wir davon abprallen wollen, können wir unsere Paletten teilen, wenn wir es wünschen, oder wir können uns weiter anpassen. Ich möchte typischerweise mit Triaden arbeiten. Fangen wir einfach mit dem an. Es gibt unsere Hauptfarbe und vielleicht wird das sein, vielleicht wird das Gelb unsere Backer-Farbe sein. Ich werde mich notieren. Es wird CFB85E sein. Dann wird vielleicht die Pfirsichfarbe unser div Container sein. Ich werde div CFA85E und Screenshot aufschreiben , so dass wir diese Farben als Referenz haben. Wenn wir auf unsere Voreinstellungen Registerkarte unter unserem Farbrad klicken, können Sie sehen, dass wir mehr Optionen erhalten. Sie können mit leichtesten Pastellfarben gehen. Sie können helle Pastell, glänzend, volle Farbe, helles Pastell, heller Pastell, die dunkleren Farben gehen. Du kannst die gräulichen Schriftsteller gehen. Es gibt so viele Anpassungen, dass du hier weitermachen kannst, einfach weitermachen. Wir können auch Ergänzungen hinzufügen, wenn Sie dies wünschen, so dass Sie eine noch breitere Palette erhalten. Wir haben unseren Blues und unsere Orangen. Es wird diesen Gleichgewichtsfaktor bekommen und uns ein bisschen mehr Nachdruck geben. Palatton ist ein netter Anfang, und dann gehen Sie zurück zu unseren Farben. Denn es wird Ihnen eine Menge von Optionen geben und sie werden sein, da dies mehr Farbe Rad basiert, wirklich schön und harmonisch für Ihr Design. Gehen wir weiter und schauen uns die anderen an. Canvas hat einen. Schauen wir uns Canvas an. Canvas' interessant, weil es eine mehr eine psychologische Herangehensweise an Farbe und dass genau das, was wir gerade mit der Farbharmonie gesehen. Dies ist alles, was Sie über Farben wissen müssen. Lasst uns auf Lila klicken. Es wird Ihnen sagen, worum es geht, wo es auf dem Farbrad saß, wofür es steht. Mehr über die Bedeutung der Farbe, und was schön ist, ist auf der rechten Seite haben Sie Ihre Farbkombinationen. Sie können natürlich auf mehr klicken, aber lasst uns einfach das erste nehmen, damit wir es sehen können. Dies ist ein bereits existierendes Stimmungsbrett, das jemand getan hat. Sie können die Farben sehen, die dies mit ihm ausgewählt und die Hex-Codes sind natürlich mit ihm. Sie können voran gehen und schreiben Sie das auf oder machen Sie eine Bildschirmaufnahme. Es gibt auch Farbvorräte. Dies hat eine wirklich schöne Schnittstelle und es ist eine ähnliche Version des Konzepts mit dem Palatton. Aber was ist schön mit diesem hier ist, dass es Ihnen Proben geben wird Ihr CSS/Web-Design aussehen wird, wenn Sie diese Farbauswahl verwenden. Es hilft Ihnen, Ihre Entscheidungen ein wenig einfacher zu machen. Wenn du orange oder Germaine willst, wie würde das aussehen? Sowie nehmen Sie es zurück, um zu ergänzen. Vielleicht möchten Sie, dass es ein wenig heller und Ton ist, damit Sie sehen können, Sie können jeden der Hervorhebungspunkte darauf verschieben, und es wird Ihren Code auch für die wichtigsten geben. Wie üblich, Screenshot, schreiben Sie es auf, was auch immer Ihr System ist. Gehen Sie weiter und versuchen Sie das. Erkunden Sie einfach jedes von ihnen, sehen Sie, welche am besten für Sie geeignet ist. Sie werden eine finden, auf die Sie eine Tendenz haben, sich immer wieder zu beziehen. Wie ich schon sagte, es gibt so viele da draußen, machen Sie eine Google-Suche und finden Sie noch mehr. 3. Adobe Spark und Canva Moodboards: In Ordnung. Lass uns voran gehen und schauen uns Moodboards an. Es wird zwei geben, über die wir gehen. Der erste ist Adobe Spark, und der zweite ist der durch Canva. Beide sind kostenlos für Sie zu verwenden. Für Adobe müssen Sie sich anmelden oder Ihre Creative Clouds verwenden, damit Sie darauf zugreifen können. Aber lass uns voran gehen und ein Moodboard erstellen. Nun, was wir tun wollen, ist darüber nachzudenken, was die Bedürfnisse des Kunden sein würden und wie wir ihre Website mit Farben repräsentieren. Nicht unbedingt die Farben, die wir wollen, aber was sind die Farben, die sie wollen? Sie und ihre Kunden auch. Dafür müssen wir einen neuen Beitrag machen. Sie können von Grund auf neu beginnen, wenn Sie dies wünschen, können Sie voran gehen und eine Vorlage auswählen. Dafür werde ich nur eine Vorlage verwenden. Auf diese Weise können Sie sehen, wie es funktioniert. Sie können sehen, ihr Geschäft, Schule , vorgestellte Handwerk, Essen, Collagen, und zweifellos die, die wir suchen werden, wird unter dem Collage-Bereich und zweifellos die, die wir suchen werden sein, weil Sie in der Lage sein werden, die verschiedene Fotos, die die Stimmung für Ihren Kunden und ihre Website darstellen. Sie können sehen, Sie können wählen, was auch immer Sie so wünschen. Was auch immer Sie fühlen, wird am besten für Sie arbeiten. Ich mag das Gitter von diesem hier. Lass uns voran gehen und hier reinkommen. Eine nette Sache mit Spark und Canva ist, dass sie kostenlose Slash Clip-Art-Bilder haben , die Sie verwenden können, um Ihr Moodboard zu erstellen. Es wird etwas von der Suche rausholen. Eine Option, die Ihnen auch zur Verfügung steht, ist natürlich Pinterest. Aber ich habe angenommen, dass die meisten von uns Pinterest jetzt kennen, also gehen Sie voran und verwenden Sie diese auch, wenn Sie es wünschen. Das ist schön, weil es das ist, was du siehst, ist, was du bekommst. Lassen Sie uns voran und setzen Sie ein Web-Design-Moodboard oder wer auch immer Ihr Kunde sein würde. In unserem Klassenprojekt habe ich eine Liste von mehreren Clients, die Sie verwenden können, so dass Sie einen dieser verwenden können. Sie können Ihren Typ-Stil ändern, wenn Sie dies wünschen. Sie können sehen, wir haben eine primäre, wir haben eine sekundäre. Wenn Sie das nicht wollen, gehen wir mit dem, denn vielleicht passt diese Slab Serif zu unserem Kundenstil ein bisschen mehr. Sie können so anpassbar sein, wie Sie möchten, oder halten Sie es so breit und allgemein. Aber im Mittelpunkt stehen natürlich die Bilder, die unseren Kunden repräsentieren. Einer der Kunden ist ein Außengelände. Also für diesen hier werde ich es bauen, so dass dies ein Außengelände sein wird. Ich werde auf unsere erste Zelle klicken, und Sie können sehen, dass wir Filter darauf haben, ich werde die Filter ausschalten, denn wenn wir es von Farbe zu tun haben, möchte ich, dass es in diesem Stadium nicht angepasst wird weil wir gehen , um unsere Proben aus diesem Bereich zu ziehen. Los, wir werden ein kostenloses Foto finden und es ist ein Outdoor. Sagen wir, unsere erste, wir wollen auf Berge schauen. Dann wollen Sie darüber nachdenken, welche Farbe sie darstellen würde, und lassen Sie uns voran und fügen Sie es hier ein, und Sie können sie herumschieben, Sie können erhöhen und verringern, Sie können drehen, wenn Sie es wünschen, Also, wenn du so bist: „Oh, ich will, dass es so aussieht. Viel breiterer Maßstab, weil ich vor allem an diesen Farben interessiert bin.“ Dann geh absolut drauf. Wir werden hier noch einen finden, also ändern, ich werde an Lake denken. Welche Farben eines Sees werden sich mit der Inspiration für dieses Projekt verbinden? Dies ist der Teil, den Sie sich Zeit nehmen und ein wenig schlängeln können. Ich denke vielleicht an diese Farbe. Das Gleiche, wenn Sie drehen möchten, gehen Sie voran und drehen Sie es. Sie können sagen, dass es sich damit zu einer Abstraktion neigt, und Sie können einfach weitermachen. Wählen Sie jede Zelle aus, die Sie ändern möchten, deaktivieren Sie diesen Filter, um sicherzustellen, dass auch der Filter deaktiviert ist. Sky, weil wir unterwegs sein wollen. Das hier sieht ziemlich nett aus. Dann drehen Sie es einfach überall dort, wo die Farben Ihren Kunden am besten darstellen. Nun schauen wir uns Canva an, die sehr ähnlich wie Spark funktioniert. Auch hier befinden sich alle diese Links in unserem Klassenprojektbereich. Gehen wir weiter und klicken Sie auf „Beginnen Sie mit der Gestaltung eines Moodboards“. Sie können natürlich von Grund auf arbeiten. Aber ich werde nur wie das letzte Leben ein wenig einfacher machen und lassen Sie uns einfach voran gehen und eine bereits vorhandene Vorlage verwenden. Aber dieses, das Sie sehen können, gab es ein $ Zeichen darauf, also wenn Sie das nicht wollten und wenn Sie eine kostenlose wollten, können Sie voran gehen und auf einen der freien klicken, und Sie können sehen, dass es sich entsprechend ändert und Sie können so viel wie Sie wollen. Genau das gleiche, es ist so ziemlich, was du siehst, ist das, was du bekommst. Lassen Sie uns voran gehen, Web-Design und Farbe Moodboard. Sie können den Typ ändern, wenn Sie dies wünschen, genau wie in der letzten. Lasst uns darauf doppelklicken und wenn wir das nicht wollen, werde ich nur die erste greifen, lassen Sie es tun, es ist Sache, gleichen Deal hier, lasst uns das ändern. Gehen wir mit dem Mutigen, damit wir unsere Hierarchie direkt von der Fledermaus etabliert haben. Wir können diese Farbe ändern. Ich gehe davon aus, dass Sie Ihre Hex-Codes bereit und aus unserem letzten Abschnitt notiert haben. Sie können voran gehen, wählen Sie eine Farbe in diesem kleinen Quadranten und klicken Sie auf das Plus. Wenn Sie Ihren Hex-Code haben, können Sie voran gehen und ihn dort eingeben, oder Sie können Ihr Rad drehen, wenn Sie Ihr Moodboard verwenden, um diese Farben zu finden. Sie können die Schattierungen und die Anspannung erhöhen, wenn Sie dies wünschen, können Sie es in der Mitte lassen. Lassen Sie uns mehr in Richtung dieses Spektrums gehen , nur so dass es ein wenig anders aussieht als unser letztes, und lassen Sie uns einfach mit dem Thema Natur bleiben, dem Outdoorsy Shop von unserem letzten. Ich werde weitermachen, doppelklicken. Wir werden zuerst auf unsere Elemente eingehen. Lass uns das machen. Los, lösche das aus. Lassen Sie uns einfach ein kostenloses Foto finden. Da gehen wir, oh, schön. Sie können sehen, Sie können einfach klicken und ziehen Sie es hinein, und Sie können Ihren Rückgängig-Button hier tun. Wenn Sie doppelklicken, können Sie die Größe ändern und drehen. Wenn Sie mehr von den Wasserfallfarben für diesen einen wollten, werden Sie in der Lage sein, es auf diese Weise zu ändern. Ich werde nur eine nach dem anderen ziehen, die Größe ändern, anpassen, drehen. Vielleicht in unseren Outdoor-Websites, das Kanu macht Sinn, und das Feld, und ein Berg. Perfekt. Das hat gut für uns geklappt. Sie können auch sehen, dass wir einige unserer Farben von hier in ziehen können. Lassen Sie uns eine Farbe hinzufügen. Sagen wir, der erste, den wir wollen, dass es so grün auf dem Kanu ist. Ich werde mich nur mehr dazu neigen. Dann, wenn wir damit zufrieden sind, können Sie sehen, dass es passt, wenn ich arbeite. Wir werden mit dem gehen. Klicken Sie auf den nächsten. Lasst uns einfach das Lila schnappen, da wir das bereits als unsere Hierarchie verwendet haben. Mischen Sie eine andere Farbe, lassen Sie uns mit der Weizenfarbe gehen. Ich werde es mehr in Richtung Licht nehmen. Das dunklere Grün unseres Berges, ändern Sie die Intensität für diesen. Vielleicht wird dies für unser Webdesign unsere Hintergrundfarbe sein. Vielleicht wird dieser unser div h1 Absatz usw. oder Schaltflächen sein. Auf diese Weise haben Sie einen Ausgangspunkt zum Thema Ihres Stückes. Diese beiden Seiten sind wirklich einfach zu bedienen und ich empfehle Ihnen, sie auszuprobieren. 4. Dreamweaver: In Ordnung, also nehmen wir jetzt unseren Code und nehmen ihn auf unsere eigentliche Website. Dafür werde ich Dreamweaver verwenden und habe Vorlagen für Sie erstellt. Sie sind einfach und einfach, um Sie daran zu gewöhnen , Farben in das CSS zu setzen und zu sehen, wie sie auf der Seite aussehen. Nun, ich nahm unsere Farbversorgung, eine, die wir gemacht haben, und ich fand eine, die mir gefallen hat. Wir bleiben bei analogen und hier sind unsere Codes. Ich ging weiter und schrieb sie auf. Auf diese Weise habe ich Zugang dazu. Du hattest auch deine Screenshots. Wenn Sie dieses System verwenden, haben wir natürlich unser erstes, gehen Sie in Photoshop, öffnen Sie es und greifen Sie Ihre Augentropfer. Wenn Sie dann auf Ihr Farbfeld doppelklicken, wird Ihr Hex-Code dort angezeigt, so dass Sie sie von dort aufschreiben können. In gewisser Hinsicht, sei es durch den Screenshot oder von einem unserer Farbschema-Generatoren, gehen Sie weiter, lassen Sie unsere Farben aufschreiben, damit wir in Dreamweaver einsteigen können. In Ordnung, öffnen Sie unseren Dreamweaver und ich habe die beiden Seiten. Für diesen, werde ich Ihnen die interne zeigen, lasst uns voran gehen, ich werde die Websites verwalten. Da ist unser externes, lasst uns einfach ein neues machen, Demo 1. Wir werden es mit verknüpfen, lassen Sie uns einfach inline machen. Demo 1, nur sicherstellen, Ordnung, gehen Sie weiter und drücken Sie „Fertig“. Das ist derjenige, der unser Inline sein wird. Gehen wir weiter und öffnen Sie unsere Indexseite, damit wir sehen können, was hier vor sich geht. Nun, ich habe hier Grundfarben geworfen und ich habe nur das gelbe, grüne, rote Namenssystem verwendet , also ist es nicht so genau, unsere Hex-Codes werden uns mehr Genauigkeit geben. Für unsere Hintergrundfarbe mochte ich diesen gelblichen Look. Gehen wir weiter, und die, die ich habe, ist FFF337, da ist unser erster, das ist fröhlich. Unser h1, sagen wir, wir werden einen Hintergrundbereich darauf setzen. Probieren wir das Blaugrün 95ECD6, da ist unser blaugrün Look. Alles klar, und gehen wir mit unserem div Bereich, ich habe nur drei geschnappt, also werden wir nur die ersten drei machen, das ist dieser orangefarbene Look, FBC52C. Ich habe den Hex vergessen. Vergiss deinen Hex nicht. Da gehen wir, haben unser Pfundschild eingeschaltet, damit wir sehen können, dass wir die ausschalten. Wir haben unsere Blaugrün, die Ringelblume Orange, und dann unser Gelb. Wenn du noch eins schnappen wolltest, gehen wir einfach zurück zu diesem. Lassen Sie uns einfach anpassen, um mehr von der orangey Look, nur damit Sie die vier Farben sehen können, FF6001, das aufschreiben. Ich hätte es einfach kopieren und einfügen können, aber es ist, was es ist. Gehen wir weiter, FF6001, und es gäbe alle vier in dieser Farbfamilie, die auf Ihrer Seite arbeiten würden. Vielleicht werden einige Text sein, einige werden Schlagzeilen sein. Es wird ganz von Ihnen überlassen. Lassen Sie uns das schließen. Ich werde nicht speichern, aber Sie würden voran gehen, Screenshot, dass, Sie können es Vorschau, wenn Sie es wünschen, und laden Sie es in unsere Kursprojekte, damit wir sehen können, woran Sie arbeiten. Lasst uns das Äußere reinlegen. Wir werden es schaffen. Ich werde diese eine Demo 2 nennen, und lassen Sie uns es mit unserer externen verknüpfen, speichern, das ist in Ordnung, fertig. Es gibt unseren Index und es gibt unsere Stile, und es basiert auf den letzten Farben, nur die hellblau-grün, etc. Ändern Sie es in Ihrem externen, ich werde nur zu greifen, um sie eine nach dem anderen, CD6. Hoppla. Denken Sie daran, es sind die kleinen Tippfehler, die uns wegwerfen können. Stellen Sie sicher, dass Sie Rechtschreibung und setzen Sie Ihre Symbole korrekt, BC52C, und nicht zuletzt FF6001. Wenn Sie meine Vorlage verwenden möchten, gehen Sie einfach vor und greifen Sie vier der Farben. Wenn wir hier rüber gehen, könnten Sie sagen: „Nichts ist passiert.“ Vergewissern Sie sich, dass Sie es speichern, wenn nichts passiert. Die beiden sprechen miteinander, wenn Sie die neueste Version von Dreamweaver haben, aber die älteren, müssen Sie sicherstellen, dass sie gespeichert und aktualisiert wird. Auf diese Weise können Sie sehen, was mit den Farben passiert, und Sie können eine Website erstellen, die von Ihrer Marke und den Bedürfnissen Ihrer Kunden abhängt. 5. CSS Color Kursprojekt: In Ordnung. Für unser Klassenprojekt haben Sie zwei Möglichkeiten dafür. Die erste besteht darin, Mood Boards zu erstellen, die die Kunden repräsentieren, die ich im Klassenprojekt aufgelistet habe. Es gibt etwa fünf von ihnen und jeder hat ein sehr spezifisches Kundenbedürfnis. Einer ist mehr kindorientiert. Einer ist mehr, sagen wir, finanziell orientiert. Wie gehen Sie mit Farben um, die Ihre verschiedenen Kunden, ihre Bedürfnisse und ihre Marke repräsentieren ? Option 1, können Sie voran gehen und diese Moodboards erstellen. Sie können sie speichern oder mit einem Screenshot versehen und in unsere Kursprojekte hochladen, damit wir sie sehen können. Die andere Option ist, dass Sie auch ein wenig extra hinzufügen können. Was passiert, wenn Sie den Code in Ihr CSS hinzufügen? Ich habe Inline-und externe Vorlagen kostenlos zu verwenden. Sie sind sehr einfach, also manipuliert es nur Ihr CSS, um zu sehen, wie Sie Ihre Farben anpassen und zu sehen, wie es auf einer tatsächlichen Webseite funktionieren würde. Die Dateien werden in Dreamweaver erstellt, sodass Sie Dreamweaver verwenden können, oder Sie können sie über TextEdit oder Notepad plus öffnen , wenn Sie ein PC-Benutzer sind. Wie immer, wann immer Sie fertig sind, gehen Sie weiter und teilen Sie sie, damit wir sehen können, was Sie getan haben. 6. Schlussbemerkung: In dieser Klasse müssen Sie Farbschema-Generatoren untersuchen und sehen, wie jeder von ihnen funktioniert, um herauszufinden, welcher für Sie und Ihren Workflow am besten geeignet ist. Indem Sie ein harmonischeres Farbschema geben, werden Sie Ihre Entwürfe auf die nächste Ebene ziehen. müssen Sie sehen, wie Moodboards Einfluss auf Marken- und Farbentscheidungen haben können, und Sie müssen alles mit Inline oder externem CSS zusammenbringen, je nachdem, welches Sie sich entscheiden. Ich hoffe, Sie haben die Klasse genossen. Ich kann es kaum erwarten zu sehen, was du erschaffen hast.