Webwork-Tools - Dem Webworker seine Werkzeugkiste

Farbkombinationen

Bei der Erstellung einer Website hat man oft eine bestimmte Farbe im Kopf oder vorgegeben, die man verwenden möchte/muss. Da eine Farbe aber nicht reicht, braucht man noch mehr – und die sollten passen. Eine Möglichkeit dafür bietet Adobe® Kuler™.

Kuler ist ist eine webbasierte Anwendung aus dem Hause Adobe, die es einem erlaubt mit Farben zu "spielen". Und das meine ich wörtlich. Es macht nämlich unheimlich viel Spaß mit den Farbpaletten zu experimentieren. Um eine gute Ausgangsbasis zu haben, kann man ein eigenes Bild hochladen oder eine bestimmte Farbe als Basis bestimmen.

Ist man bei Adobe registriert, kann man seine Farbkombinationen auch speichern, downloaden (leider nur im Adobe Swatch Exchange-Format *.ase) oder die Farbkombinationen von anderen bewerten und kommentieren.

Umrechner: Pixel zu em

Neben Pixel (px) ist em eine weitere häufig eingesetzte Einheit wenn es darum geht in CSS die Schriftgröße zu definieren, aber auch die Dimensionen einer Fläche zu bestimmen. Pixel ist relativ zu dem Ausgabegerät (Monitor) und em ist relativ zu den Einstellungen des Benutzers.

Standardmäßig ist in allen gängigen Browsern die Standardgröße der Schriften mit 16 Pixel angegeben, was in dem Fall 100% bzw. 1em entspricht. Nun gibt es zwei Vorgehensweisen, wie man jetzt mit em hier weiter arbeiten kann:

1. Man setzt im body (quasi die oberste Ebene) die Schriftgröße auf 100% und "sagt" noch einmal explizit, das 16 Pixel die Bezugsgröße ist. Wenn man dann die Maße und die Größen benennt muss man sich immer entweder auf die 16 Pixel oder auf die Angabe des Elternelementes beziehen, weil die Angabe zu Schriftgröße vererbt wird. Hier muss man auf jeden Fall sehr häufig entweder einen Taschenrechner oder Stift und Papier griffbereit haben.
2. Man setzt in body als Bezugsgröße 62.5% ein, was dann einer Größe von 10 Pixeln entspricht. Hier liegt der Vorteil darin, dass man zumindest auf den ersten Verschachtelungsebenen weniger umrechnen muss, wenn man pixelgenaue Layouts umsetzen muss.

Gut, jetzt kann man diskutieren ob pixelgenaue Layouts wirklich sein müssen, aber das soll nicht der Gegenstand dieses Beitrages sein. Egal welche von beiden oben vorgestellten Vorgehensweisen man einschlägt, so kommt man früher oder später dazu umrechnen zu müssen. Auch dazu gibt es feine Helferlein:

• em Calculator
• Pixel in EM umrechnen (via Markus Kurde)
• Nachtrag: Vertical rhythm calculator (via Jens Grochtdreis)

Das zweite Tool kann nur basierend auf der Standardgröße von 16px rechnen, was für viele Anwendungsfälle ausreicht. Bei dem ersten Tool kann man nicht nur die Ausgangsgröße anpassen sondern man kann die Elemente verschachteln und dadurch die Veerbung der Schriftgröße visualisieren. Sehr fein.

Farbpicker: ColorPic von Iconico

Farbpicker sind Anwendungen die es einem ermöglichen von einer Website oder aus einer Grafik, die Farbwerte auszulesen. Farbpicker gibt es sehr viele und und in diversen Geschmacksrichtungen: kostenlos oder kostenpflichtig, als eigenständiges Programm oder als Erweiterung etc. Für welches man sich dann entscheidet ist nicht zu letzt von persönlichen Vorlieben abhängig.

In diesem Artikel werde ich ColorPic von der Firma Iconico vorstellen. Neben diesem Farbpicker hat das Unternehmen ein paar weitere, interessante Tools … aber zu denen werde ich in den nächsten Artikeln näher eingehen. Das gleiche gilt auch für andere Farbpicker, z.B. für ColorZilla welches als Erweiterung für Firefox und SeaMonkey daherkommt.

Bei ColorPic handelt es sich um eine kleine, selbständige und kostenlose Anwendung für Windows. Nach dem kurzen Installationsvorgang ist die Anwendung betriebsbereit und man kann sofort loslegen. In der Abbildung sieht man die komplette Anwendung und ihre Funktionalität.

Das Programm kommt mit vorgefertigten Farbpaletten, aber man kann ohne Probleme eigene Paletten erstellen und diese mit Farben bestücken. Die einzelnen Paletten werden im Programmordner in der Datei palettes.xml gespeichert. Somit besteht der Backup dieser Anwendung in der Sicherung dieser XML-Datei und das gute ist, dass man diese Datei auch mitnehmen kann um sie z. B. auf einem anderen Rechner, welcher mit ColorPic bestückt ist, einzusetzen.

Farben rauspicken

Die Farben pickt man heraus in dem man den Cursor über die entsprechende Fläche positioniert und Strg + G bzw. Ctrl + G drückt. Um das Positionieren zu erleichtern, gibt es im unteren Teil der Anwendung eine Lupenfunktion des anvisierten Abschnitts. Die Lupenfunktion kann man anpassen in dem man den Zoom verändert, Gitternetz einblendet, die Größe des Cursor anpasst oder indem man sogar den Cursor ausblendet.

Sehr gut finde ich dass ColorPic die Farbwerte in Echtzeit ausgibt so bald man den Cursor bewegt – man muss also die Farbe nicht in die Palette aufnehmen um den Farbwert zu erfahren – dass kann die eine oder andere kostenpflichtige Anwendung z.B. nicht. Das spart viel Zeit wen man mehrere Flächen schnell überfliegen will um die Farbwerte zu vergleichen.