Illustrator CC für Webdesigner: Kernkonzepte

Das Web-Farbmodell und seine Anwendung in Illustrator

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Farbmodell RGB ist das entscheidende Farbmodell für Webdesigner. Bei der "Schreibweise" kann zwischen der hexadezimalen Angabe und einer dezimalen Schreibweise in Form der RGBA-Definition gewählt werden. Das Video beschreibt den Aufbau und die Anwendung im Illustrator.

Transkript

Diesen Video möchte ich Ihnen das Webfarbmodell näherbringen und das wird Webfarbmodell basiert auf einer Farbangabe von rot, grün und blau, kurz RGB und dieser RGB-Wert, der beinhaltet die Farben von 0 bis 255 in der dezimalen Angabe. Also das heißt, wenn der Wert Links, rot, wirklich volles Rot ergibt, dann haben wir einen dezimalen Wert von 255. Das Gleiche gilt für grün und auch für blau. Damit das aber in einem Browser auch verständlich aufgeschrieben wird, das heißt der Browser braucht eine Code-Angabe, einen sogenannten Hexadezimalcode, damit er weiß, wie er die Farbe überhaupt interpretieren soll und der Hexadezimalcode, denn sehen Sie hier. Hexadezimal bedeutet in dem Fall, dass es eine Unterscheidung zwischen der Schreibweise gibt, dezimal 0 bis 255 entspricht hexadezimal 0 bis FF und die Besonderheit, damit der Browser überhaupt weiß, dass es ein Hexadezimalcode ist, ist die Raute. Die Raute definiert den Hexadezimalcode. Ja, wie sieht das nun genau aus mit den RGB-Werten und dem Hexcode. Wir haben also drei Farben in Form des Hexadezimalcodes und jeder dieser einzelnen Farben besitzt Angaben von 0 bis FF oder einem Wert der geringer ist. Dezimal ist es 0 bis 255. Ein kleiner Hinweis noch zu der Kodierung. Der Hexadezimalcode hat eine Zahlenbasis 16, der Dezimalcode, wie das der Name schon sagt, eine Zahlenbasis 10. In der Mathematik gilt, je höher die Zahlenbasis, desto weniger Stellen benötige ich. Und deswegen brauchen wir beim Dezimalcode, die größte Zahl 255, da brauchen wir drei Stellen, beim Hexadezimalcode nur zwei und das entspricht FF. Alle Werte von 0 bis 9 sind dezimalidentisch und der Wert 10, den wir ja im Dezimalsystem nur durch Kombination zweier Einzelziffern darstellen können, wird im Hexadezimalbereich mit dem Buchstaben A dargestellt. Somit gehen im Hexadezimalcode die Anzahl der Zeichen von 0 bis 9 und von A bis F. Also, je höher der numerische Wert, desto heller die Farbe, die Sie auswählen. Bei 255 bei Rot ist es ein dunkles Rot und je höher dieser numerische Wert wird, desto heller wird die Farbe im Gesamten. Also 00 wäre schwarz. Schauen wir uns das genauer an bei dem Wert Rot, anhand eines solchen Farbkreises. Der Wert Rot braucht, um reines Rot darzustellen, die Raute für hexadezimal und dann zwei F für 255 und die Werte für Grün und für Blau, die sind mit 0 belegt, weil die Werte brauchen wir nicht. Der nächste Wert ist Grün und hier brauchen wir keinen Rotwert, sondern nur die 255 auf Grün und 0 wiederum auf Blau, und Blau wiederum wird dann mit 255 in den letzten zwei Ziffern deklariert. Was passiert nun bei einer Mischung wie gelb? Hier muss ich rot und grün mischen, das heißt also den vollen Farbwert hinterlegen und den Blauwert komplett herausnehmen und dann erhalte ich die Farbe Gelb. All diese Angaben, die brauchen wir für die Definition von Farben im Webbrowser und es gibt ein zweites Modell neben dem Hexadezimalcode das ist der sogenannte RGBA-Code oder RGBA-Code und den findet man ganz häufig in moderneren CSS-Beschreibungen, weil ja da kommt ein Teil dabei, der wirklich sehr tolle Möglichkeiten bietet. Die Schreibweise sieht so aus. Ich schreibe mal so RGBA, dann kommen runde Klammern und hier kommen jetzt wieder Rot-, Grün-, Blau-Angaben rein. Also in dem Beispiel haben wir jetzt 240 als Rot, 25 und 75 als Grün- und Blauwert. So, und auch das entspricht genau den Angaben Rot 240, der Anteil quasi der Farbdeckung ist 240, der Anteil 25 bei Grün und der Anteil 75 bei Blau und diese .5, die Sie ganz zum Schluss sehen, das ist der sogenannte Transparenzwert oder die Opacity und die ist mit 0,5 so angegeben, dass sie einem 50%-Wert entspricht. Also 0.7 oder .7 wären 70% 0.5 50%, 0.2 20% und entsprechend so sind diese Werte nicht deckend, sondern entsprechend transparent. In Illustrator können Sie solch eine Einstellung in dem Farbwähler definieren. Und das schauen wir uns jetzt mal gerade ein ganz klein wenig in der Praxis an, denn wie Sie hier sehen, die Angaben 240-25-75 tauchen beim RGB auf und auch hier direkt die Ausgabe des hexadezimalen Codes, also man muss da gar nicht umrechnen, aber man findet keinen Alpha-Wert oder beziehungsweise keine Transparenz. Schauen uns das mal ganz kurz in der Praxis entsprechend an. Ich habe also hier ein Dokument und ziehe mal ein Rechteck auf, ganz normal. Dieses Rechteck möchte ich jetzt nicht schwarz haben, sondern ich stelle einen Rotwert ein, beziehungsweise einfach mal einen Doppelklick und ich öffne den Farbwähler und mach mal das Gleiche mit 240-25-75 und Sie sehen, hier habe ich jetzt den Rotwert, bestätige ich. So, und um hier diesen Wert verwenden zu können, da gibt es hier die CSS-Eigenschaften und da kann man zum Beispiel auch mal nachschlagen, wie hier der Hexadezimalwert eingetragen wird. Background, Raute und dann kommt die Hexadezimal-Angabe. Da drunter sieht man RGBA 240-25-75 und 100%. Die CSS-Eigenschaften, die können Sie jetzt theoretisch direkt kopieren oder dem Webentwickler, dem Webprogrammierer übermitteln und er hat direkt die richtigen Werte. Sollte das bei Ihnen nicht angezeigt werden, dann klicken Sie hier rechts auf den Menüpunkt und wählen die Exportoptionen und schalten einfach mal zunächst hier das Häkchen für CSS für unbenannte Objekte generieren ein, weil wenn das ausgeschaltet ist, bekommen Sie diese Werte nicht, dann müssen Sie die Objekte zunächst einmal benennen. Ja, und gucken wir uns das mal mit der Transparenz noch genauer an, also die Angabe fehlt ja, einmal haben wir hier oben natürlich die Deckkraft, das könnten Sie benutzen oder eben über die Werkzeugpalette transparent, Transparenz und hier können Sie dann natürlich auch 50% angeben und wie man sieht, ist das jetzt, ist es heller geworden das heißt, hier scheint jetzt ein Objekt mit 50% durch. Auch das zeige ich Ihnen noch mal ganz kurz. Ich wähle mal ein schwarzes Objekt aus und das schieben wir mal hier hinter wobei Schwarz ist jetzt auch nicht so gut, machen wir mal das Ganze zunächst mal in den Hintergrund, so, und wählen aber nicht Schwarz, sondern machen wir mal ein dunkles Grün und da sieht man, wenn ich jetzt das Objekt im Vordergrund mit der Transparenz über das andere Objekt schiebe, dann schimmert hier, ja gemischt natürlich, ein Farbton durch und dieser Farbton, der ergibt sich durch die Transparenz 50%. Da kann ich quasi durchschauen wie durch eine Glasscheibe auf das grüne Objekt im Hintergrund. Damit wissen Sie im Großen und Ganzen schon alles, was es zu dem Webfarbmodell zu wissen gibt. Sie haben zwei Einstellungsmöglichkeiten, also zwei Definitionen nämlich den Hexadezimalwert eingeleitet durch die Raute und jeweils drei Blöcke Rot, Grün, Blau, die RGB-Beschreibung von 0 bis 255 oder hexadezimal 0 bis FF oder die andere Schreibweise, RGBA in Runden Klammern mit den jeweils dezimalen Angaben der Farbwerte und dem Alpha-Wert, damit das Ganze auch transparent dargestellt werden kann.

Illustrator CC für Webdesigner: Kernkonzepte

Lernen Sie die grundlegenden Begriffe des Webdesigns kennen und konfigurieren Sie Illustrator für den teamfreundlichen Webdesign-Einsatz.

1 Std. 49 min (18 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:31.05.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!