Nützliche Mini-Tools für Webdesigner
Grafik-Spezialisten

DeveloperIT-ProjekteSoftware

Ganz gleich ob Sie fremde Designs studieren oder eigene Webseiten überprüfen möchten – nützliche Helfer wie Bildschirmlineale und Farbmesser können einiges vereinfachen.

Toolsammlung

Nützliche Mini-Tools für Webdesigner

Zum Messen, Beurteilen und Prüfen von Webseiten-Bereichen kann der Designer auf kleine, handliche Spezial-Tools zurückgreifen, die zusätzlich zum normalen Web-Editor, Grafik- und Illustrationsprogamm immer zur Hand sein sollten. Denn ein Hauptteil der Design-Arbeit besteht darin, das eigene Werk zu testen, zu optimieren, aber auch sich von anderen Sites Anregungen zu holen und die eigene Arbeit kritisch zu hinterfragen. Dieser Artikel gibt einen Überblick über interessante Helfer. Die Bandbreite reicht dabei von der Bildschirmlupe über das Screen-Lineal bis hin zur Farbpipette.


Browserlösungen

Nützliche Mini-Tools für Webdesigner

Neben den eingebauten Hilfen in Betriebssystemen wie der Bildschirmlupe in den Eingabehilfen unter Windows sind vor allem die Fähigkeiten der Browser interessant. Standardmäßig gibt es hier nicht so viele Hilfen für Webdesigner. Aber mit den richtigen Erweiterungen wird aus einem normalen Browser schnell ein Ideen- und Maße-Lieferant für den fleißigen Webdesigner.

Als Mozilla-Erweiterung ist beispielsweise die Webdeveloper Toolbar verfügbar. Als Mozilla-Bolide lässt sie sich selbstverständlich auch in Firefox, Flock und Seamonkey integrieren. Sie wird installiert wie jede andere Mozilla-Erweiterung.

Die Leiste enthält Funktionalität für Design und Entwicklung. Der Entwickler kann die Cookies einer Website kontrollieren oder sich Javascript- und CSS-Code einzeln ansehen. Für den Designer bietet das Menü Resize die Möglichkeit, das Browserfenster auf eine bestimmte Größe zu setzen. Als voreingestellte Größe steht anfangs nur 800 x 600 Pixel zur Verfügung, aber auch dies lässt sich in den Optionen ändern. Im Bereich Miscellaneous finden Sie Hilfslinien (Display Line Guides) und ein viereckiges Messrechteck (Display Ruler), mit dem Bereiche sehr einfach auszumessen sind. Allerdings legen sich beide über den Inhalt des Browserfensters. Daher sind Formulare und Links erst wieder zu bedienen, wenn die Seite neu geladen ist.

Vom selben Entwickler gibt es auch noch den User Agent Switcher. Er erlaubt dem Webdesigner den einfachen Browserwechsel auf Knopfdruck. Beeindruckend ist dabei, dass der Switcher als Mozilla-Erweiterung für unterschiedlichste Betriebssysteme zur Verfügung steht und selbstverständlich auch zu den Browser-Konkurrenten wie Internet Explorer oder Opera wechselt.


Opera Webdev Toolbar

Nützliche Mini-Tools für Webdesigner

Ähnliche Werkzeugleisten gibt es auch für andere Browser. Für Opera ab Version 8 steht beispielsweise die Webdev Toolbar bereit. Sie vereint Validierung, Hervorhebung verschiedener Elemente und Formularsteuerung. Insgesamt enthält sie nicht ganz so viele Funktionen wie die Firefox-Alternative und relativ wenig für Designer. Dafür ist sie für Entwickler ausgesprochen praktisch.

Für den Internet Explorer entwickelt Microsoft selbst eine eigene Developer Toolbar. Sie ist als Beta 2 zum Download verfügbar und aktuell kostenlos. Ähnlich wie Webdev für Opera ist sie eher entwicklerlastig und glänzt mit Funktionen wie einer DOM-Ansicht und dem Validieren von Seiten. Daneben gibt es aber auch für Designer praktische Funktionen: Beispielsweise lassen sich einzelne Elemente der Seite farbig hervorheben, so dass Bilder oder div-Elemente gut sichtbar sind. Außerdem haben Sie über das Menü Image die Möglichkeit, sich beispielsweise Bildgrößen und -maße anzeigen zu lassen.

Über Resize passen Sie die Größe des Browserfenster an. Hier sind wie bei der Mozilla-Lösung neben den Standardgrößen von 640×480 bis 1280×1024 auch eigene Maße möglich. Unter dem Oberpunkt Ruler verbirgt sich ein Lineal zum Aufziehen. Zwar ist es optisch nicht allzu übersichtlich, bietet aber mit Snap to Element die Möglichkeit, sich an Elementen auf der Seite zu orientieren. Außerdem kann es horizontal oder vertikal einrasten (Snap to X/Y Axis), die Farbe wechseln und eine Skala mit Start- und Endpunkten anzeigen. Bei gedrückter [Strg]-Taste ziehen Sie sogar mehrere Lineale auf einmal auf.


Standalone-Tools

Nützliche Mini-Tools für Webdesigner

Neben den direkt im Browser integrierten Helfern gibt es auch eine Vielzahl eigenständiger Programme. Aus dieser umfangreichen Riege sollen hier beispielhaft einige herausgegriffen werden. Sie zeigen auch die Bandbreite vom einfachen Werkzeug bis zur komplexen Messlösung. Recht bekannt sind die kleineren Tools Screen Ruler und Traycolor. Sie sind auch in verschiedenen Webdesigner-Sammlungen (zum Beispiel www.webmasternetz.de/downloads) zu finden. Traycolor selbst ist mittlerweile sogar nur noch über solche Sammlungen zu beziehen.

Das Screen Ruler gibt es auf einer eigenen Website, allerdings scheitert die dort verfügbare Demoversion auf den Testsystemen von Internet Professionell. Die teilweise älteren Versionen aus den Webmaster-Sammlungen funktionieren dagegen.


Lineal anlegen

Nützliche Mini-Tools für Webdesigner

Beide Tools lassen sich ohne Installation direkt als EXE-Datei starten und sind sofort einsatzbereit. Wunder an Funktionalität darf man allerdings nicht erwarten, beide tun, was ihr Name verrät: Das Screen Ruler zeigt ein Lineal, das verkleiner- und vergrößerbar ist, und Traycolor nimmt die Farbe von einer beliebigen Stelle des Bildschirms auf. Eine kostenlose Alternative zum Screen Ruler ist Pixel Ruler, bei dem der Designer allerdings auf eine Lupe verzichten muss.

Die aufwendigste Messlösung ist das Screen Measurement Pack . Enthalten sind eine Schublehre, ein Winkelmesser und ein Radiusmesser. Jedes dieser Tools muss eigens installiert werden. Die Schublehre enthält sogar ein Microsoft-Frontpage-Plug-in. Bei aller Präzision und hübschen Werkzeugkasten-Grafik stellt sich allerdings die Frage, ob solch aufwendige Werkzeuge wirklich notwendig sind, da für das Web zwangsläufig auch nur das Messen von Pixeln gebraucht wird. Hier rechtfertigt sich der hohe Preis von über 60 Euro nur, wenn sehr viele und komplizierte Messaufgaben zu erwarten sind. Interessant sind allerdings der Farbmesser und die Lupe, die beide von derselben Firma angeboten werden.

Der Farbmesser mit dem Namen Colorpic enthält die Lupe. Er ist vor allem dank der vielfältigen Umrechnung zwischen Hexadezimal, RGB und CMYK recht praktisch. Außerdem bietet er eine Palette mit mehreren Farben, die alle per Pipette vom Bildschirm belegt werden können. Zur Bedienung verwendet Colorpic Tastenkürzel: [Strg G] nimmt eine Farbe auf, mit den Funktionstasten schalten Sie zwischen den einzelnen Farbfeldern durch.


Exoten

Nützliche Mini-Tools für Webdesigner

Die Werkzeugsammlung Gadget enthält Testbilder und Ähnliches. Sie ist für Windows und Mac verfügbar und teilweise mit Funktionen überfrachtet. Aber trotz der etwas unübersichtlichen Handhabung findet sich auch für den Webdesigner einiges: Das Menü Tools enthält eine Palette, die die aktuelle Farbe misst, und eine einfache Bildschirmlupe. Golden Section lässt sich recht gut in die Kategorie Spezialist einordnen. Das Programm bietet ein Raster, das den goldenen Schnitt illustriert. Das Raster legt sich über den Bildschirm und lässt sich per einfach gehaltenem Dialogfeld anpassen. Es zeigt optional nicht nur den goldenen Schnitt, sondern auch ein echtes Raster. Für die bessere Anpassung an den Hintergrund lassen sich außerdem die Farben und die Stärke der Linien ändern.


Mac-Spezialisten

Nützliche Mini-Tools für Webdesigner

Für den Mac als Design-Boliden gibt es selbstverständlich auch ein paar exklusive Lösungen. Das Art Directors Toolkit ist vielleicht das bekannteste. Es wurde ursprünglich bei neuen Macs mitgeliefert. Mittlerweile gibt es die komplette Sammlung für knapp 30 Dollar oder als Upgrade für die Hälfte zu kaufen. Der Name weist schon auf die Zielgruppe hin: Kreative sollen einige Hilfswerkzeuge erhalten. Groß ist die Fülle an verfügbaren Funktionen. Umrechnungen und Maße für Papierformate wenden sich vor allem an den Print-Designer. Die Farbtabellen erlauben dagegen auch das Umrechnen von Farbwerten in Webfarben und viele andere Farbwerte. Überhaupt gibt es im Farbenbereich einige Hilfen: Beispielsweise bietet das Art Directors Toolkit Farbmuster mit Sonderfarben und ihren RGB-Werten, also im Prinzip alles, was sich der Designer wünscht, um Farbschemata ins Web zu übertragen. Außerdem lassen sich zwei Farben mischen und zentral in einer Palette anlegen. Zum Messen bietet das Toolkit ein Screenlineal, das gleichzeitig horizontal und vertikal misst und verschiedene Einheiten zur Wahl bietet. Abgerundet wird das Angebot durch Text- und Skaliermöglichkeiten und ein Ausklappmenü zum Organisieren häufig benötigter Design-Programme und Projekte.

Ein ähnliches Werkzeug, allerdings mit Schwerpunkt auf professioneller Messung, ist Xscope. Hier erhalten Sie Lineale, Hilfslinien, eine Lupe und ein Fadenkreuz zum exakten Messen. Insgesamt sechs verschiedene Tools sind über ein mitfließendes Fenster erreichbar. Praktisch sind einige Details: Beispielsweise lässt sich der Farbwert einfach kopieren. Das Lineal ist auch drehbar.

Neben den Komplettlösungen gibt es auch für den Mac noch Spezialisten für einzelne Bereiche. Pixelstick bietet beispielsweise eine Entfernungsmessung zwischen zwei Punkten und die zugehörige Winkelmessung. Das Programm ist einfach zu bedienen und als Freeware verfügbar. Ebenfalls auf Bildschirmmessungen spezialisiert sind die Charliex Rulers. Sie sind Shareware und für 15 Dollar käuflich zu erwerben.


Fazit

Nützliche Mini-Tools für Webdesigner

Das Messen, Kontrollieren und Testen von Größen, Proportionen und Farben geschieht im Webdesign meistens per optischer Schätzung oder exakter Messung im Bildbearbeitungsprogramm. Die hier vorgestellten Werkzeuge bieten alle für eine oder mehrere der täglichen Aufgaben nützliche Helfer. Wer sich die Developer Toolbar in den Firefox oder Internet Explorer geladen hat, wird sie kaum noch missen wollen. Die kommerziellen Alternativen bieten manchmal noch etwas mehr Komfort, teilweise allerdings auch zu kaum angemessenen Preisen. Wer genau nachmessen möchte, greift unter Umständen besser zur sowieso schon vorhandenen Bildbearbeitung.