Webdesign-Tipps

Von der Druckerrei bekommt man ja meist die Firmenfarbe als Pantonewert. Im Webdesign arbeitet man am meisten mit RGB-Farbwerten. Was ist nun genau was? Auf das Auge sollte man sich nicht verlassen. Auf dieser Webseite ist eine Übersicht der Pantonefarben als CMYK und RGB Werte.

http://www.tabelle.info/farben_pantone_CMYK_RGB.html

Fragen zu den Farbmodell-Begriffen? Hier ein Miniüberblick:

RGB-Farbmodell

Scanner, Digitalkameras, Monitore und auch Belichter verwenden das RGB-Farbmodell zur Darstellung von Farben. In diesem Modell werden Farben anhand des Rot-, Grün- und Blauanteils definiert. RGB (englisch Red Green Blue) ist ein additives Farbmodell, bei dem sich die Grundfarben zu Weiss addieren (Lichtmischung). Eine Farbe wird durch drei Werte beschrieben: den Rot-, den Grün- und den Blauanteil. Jeder Farbanteil kann zwischen 0% und 100% variieren. Die Farbbeschreibung im HTML-Code erfolgt im RGB-Farbraum. Die Farben werden in der Form #RRGGBB angegeben. Dabei bezeichnen RR, GG und BB jeweils den Rot-, Grün- und Blauanteil der Farbe in hexadezimaler Schreibweise. Die Werte können folglich von hexadezimal 00 (=0 dez.) bis FF (=255 dez.) variieren. (Es sind neben der Darstellung mit 2 Hexadezimalziffern pro Grundfarbe noch Darstellungen mit 1, 3 oder 4 Hexadezimalstellen möglich.) Will man also dem Bildschirm mitteilen, er soll "nichts tun", also schwarz sein, schreibt man für alle Grundfarben die NULL: #000000 - soll er dagegen weiss sein, schreibt man für alle Grundfarben die 255 bzw. f f: #ffffff, siehe auch Farbtabelle

Bei digitalen Bilddaten eignet sich der RGB-Farbraum ausschließlich für die Darstellung am Bildschirm. Bilddaten, die für den professionellen Druck (z.B. Offsetdruck, Siebdruck, Digitaldruck) genutzt werden sollen, müssen im CMYK-Farbmodell dargestellt werden.

CMYK-Farbmodell

CMYK steht für Cyan, Magenta, Yellow (Gelb) und Key (Schlüsselfarbe) ist ein subtraktives Farbmodell, welches bei Druckverfahren eine Rolle spielt. Der Wertebereich jeder einzelnen Farbe geht von 0% bis 100%, wobei 0% einer unbedruckten und 100% einer Volltonfläche entspricht. Durch Mischen der drei Grundfarben entsteht der Farbraum. Die Schlüsselfarbe K zu sämtlichen Helligkeitsstufen, Schwarz, dient nicht der Farbgebung, sondern lediglich zum Abdunkeln von Farben; der Begriff "Key" anstelle von "Black" wurde eingeführt, um Mißverständnissen vorzubeugen, da das "B" im Englischen für "Blue" steht) bzw. Black oder aber auch Kontrast (Schwarz) und die Druckfarbe Schwarz ist unter anderem nötig, weil der Zusammendruck der drei anderen Farben zwar theoretisch (subtraktives Farbmodell), aber nicht praktisch Schwarz ergibt, da die im Druck verwendeten Cyan-, Magenta- und Gelb-Farbstoffe keine perfekten Sekundärfarben sind.

Pantone-Farbmodell

Die Pantone, Inc. ist der weltweit führende Anbieter von Farbsystemen und aktuellen Technologien zur exakten Farbauswahl und -kommunikation. Der Name PANTONE gilt bei Designern, Herstellern, Händlern und Kunden als internationaler Kommunikationsstandard. Mit 40 Jahren Erfahrung ist Pantone Marktführer im Segment der Farbkommunikation und -technologie für die Grafik- und Designbranche, das Verlags- und Druckwesen sowie die Textil- und Kunststoffindustrie. Das Flaggschiff der Pantone Produkte, das PANTONE MATCHING SYSTEM®, wurde ursprünglich für grafische Anwendungen entwickelt und hat sich zum weltweiten Standard für genaue Farbkommunikation und -reproduktion entwickelt. Der PANTONE formula guide, ein Set aus drei Farbfächern auf gestrichenem, ungestrichenem und matt-gestrichenem Papier enthält alle 1.114 PANTONE Sonderfarben und biete zu jeder Farbe auch die jeweilige Druckfarbenrezeptur. Das entsprechende Ordnerset mit solid chips bietet darüber hinaus zu jeder Farbe heraustrennbare Farbmuster, die z.B. zur Qualitätskontrolle eingesetzt werden können.

Das L*a*b-Farbmodell

Ein wesentlicher Bestandteil von Photoshop ist das L*a*b-Farbmodell. Dies ist ein internes Farbmodell, das verwendet wird, wenn Sie den Farbmodus eines Bildes in einen anderen umwandeln möchten.

Das L*a*b-Farbmodell basiert auf dem Original-Farbmodell, das 1931 von der Commission Internationale d'Eclairage (CIE) zur internationalen Norm in der Farbmessung erklärt wurde. 1976 wurde dieses Modell verbessert und CIE L*a*b genannt.
Der Vorteil des L*a*b-Farbmodells besteht in der Geräteunabhängigkeit, das bedeutet, Sie können die Farbgenauigkeit erhalten, wenn Sie Bilder zwischen unabhängigen Systemen austauschen und wenn die Ausgabe mit PostScript-Level-2-Druckern erfolgt.

L*a*b-Farben bestehen aus einer Luminanz- oder Helligkeitskomponente (L) und zwei chromatischen Komponenten: der a-Komponente, die von Grün bis Rot reicht, und der b-Komponente, die von Blau bis Gelb reicht.

Das HSB-Modell

In diesem Farbmodell werden Farben durch den Farbton (= Hue) die Sättigung (= Saturation) und die Helligkeit (= Brightness) definiert. Alle reinen Farbtöne sind in einem Farbkreis angeordnet.

Dieses Farbmodell geht von einem Farbkreis aus, bei dem jeder Farbton durch seine Position (in Gradzahlen) auf dem Kreis definiert wird. Daraus ergeben sich 360 verschiedene Farbtöne.

Mit der Sättigung wird die Reinheit, d.h. der Grauanteil der Farbe in Prozentwerten, festgelegt. Eine reine Farbe besitzt den Sättigungsgrad 100, wobei 0 einem Grau entspricht.

Die Einstellung des Graus wird mit Helligkeitsprozentwerten vorgenommen, wobei 100% einem reinen Weiß und 0% einem Schwarz entsprechen. Das HSB-Modell ist eine Variante des HSB-Modells (Brightness - Lightness).

Interessante Seite mit viel Hintergrundwissen zum Thema:

http://www.color-security.de/html/allgemein.html#Allgemein 

Von Genopal kommt ein praktisches und kostenloses Widget (wörtl. übersetzt: technische Spielerei, Hilfswerkzeug oft auch als gadgets bezeichnet), die Ihnen bei der harmonischen Farbauswahl Ihrer Webseite helfen soll. 

Wenn man nur das Design erstellen möchte, aber noch keinen Inhalt hat, ist Blindtext ideal. Auf dieser Seite können Sie sich ganz nach Ihren Wünschen Blindtext generieren lassen.

Blindtextgenerator 

Wenn Sie eine Webseite erstellen, sollten Sie immer beachten, dass es neben den vielen verschiedenen Browsern, ja auch die vielen Auflösungsmöglichkeiten gibt. Sie sollten Ihre Webseite jeweils für alle Auflösungen testen. Ein nützliches Tool ist Sizer. Damit wird das Optimieren einer Webseite für alle Auflösungen ein Kinderspiel.

Sobald man es installiert hat, klinkt es sich in die Tray ein und schon kann man die Größe des Browsers leicht regulieren. Dazu klickt man einfach mit der rechten Maustaste auf diesen Teil des Browsers und wählt im Kontextmenu, der erscheint, die gewünschte Größe aus (Es gibt noch viele weitere Stellen, an denen man die Einstellung vornehmen kann). Natürlich lässt sich diese Prozedur mit allen Programmfenstern machen. Außerdem ist es möglich eigene Einstellungen, d.h. eigene Auflösungen, zu konfigurieren.

Das Programm ist zwar auf englischer Sprache, aber Zahlen sind ja zum Glück überall gleich! Das Programm kann ruhig nebenbei laufen, da es eine verschwindend geringe Menge an Systemressourcen verwendet.

Die meisten von uns erstellen ihre Webseiten nicht von Hand in einem reinen HTML-Editor, sondern nutzen professionelle Programme wie z.B. Dreamweaver. Diese nehmen uns viele Arbeiten ab und kodieren zum Beispiel Umlaute und Sonderzeichen für uns um. Es kann jedoch vorkommen, dass auf manchen Systemen, die Zeichen nicht korrekt angezeigt werden. Dies ist darauf zurückzuführen, dass ein anderer Zeichensatz verwendet wird. Man kann jedoch in der HTML-Seite im Head-Bereich festlegen, welcher Zeichensatz genommen werden soll. Z.B.:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Die wichtigsten Zeichen sind:

    ä wird als &auml;
    ö wird als &ouml;
    ü wird als &uuml;
    Ä wird als &Auml;
    Ö wird als &Ouml;
    Ü wird als &Uuml;
    ß wird als &szlig;

Die Kodierung beginnt also immer mit einem & und endet mit einem Strichpunkt

Erst Unicode bringt die „große Freiheit“ durch die Angabe von

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Dann gibt's auch einen €, „typografische“ Anführungszeichen unten und oben und einen – korrekten – Gedankenstrich, aber insbesondere Deutsch, Russisch, Hebräisch, Arabisch in einem Dokument. Dabei verbraucht ein Dokument keinesfalls den doppelten Speicherplatz, wie häufig noch zu lesen ist (dieses Dokument ist in UTF-8 sogar ein paar Bytes “leichter“), sondern UTF-8 belässt die Ascii-Zeichen in einem Byte und ist so zu älteren Dokumenten kompatibel.

Übersicht des Unicodes in Tabellenform