PixelZoomer

Abstände pixelgenau in Firefox messen

PixelZoomer für Firefox

Entwickelt Für Firefox.

Bei PixelZoomer handelt es sich um eine Firefox-Erweiterung für Webentwickler, mit der es möglich ist, Websites vergrößert zu betrachten. Dabei sind verschiedene Werkzeuge integriert, mit denen sich pixelgenau Abstände messen und Farbwerte (HEX- und RGB-Werte) ermitteln lassen. Der sichtbare Bereich einer Website wird von PixelZoomer durch einen Screenshot dargestellt, wodurch echte Pixel die Basis für das Betrachten bilden. Die Extension soll den Schritt über ein Bildbearbeitungsprogramm überflüssig machen, so dass bei der Entwicklung von Web-Projekten direkt im Browser Größen und Abstände analysiert werden können.

PixelZoomer for Chrome on YouTube

Firefox als Messwerkzeug

PixelZoomer in Firefox verwenden

Die Umsetzung einer Website erfolgt in der Regel auf Basis einer Design-Vorlage, die möglichst exakt auf den Browser übertragen werden soll. Mit CSS müssen dann Schaltflächen, Texte und Grafiken genau platziert werden. Eine visuelle Kontrolle gibt Sicherheit – ein virtuelles Lineal kann hier behilflich sein.

Um Abstände zu kontrollieren, bietet sich ein Bildbearbeitungsprogramm oder ein Bildbetrachter an. Dazu muss zuerst ein Screenshot der Website erstellt und anschließend in das Programm eingefügt werden. Dieser Schritt muss bis zur Finalisierung einer Website sehr oft durchgeführt werden.

Mit PixelZoomer kann dieser Vorgang beschleunigt werden: Die Firefox-Erweiterung erstellt per Knopfdruck einen Website-Screenshot und öffnet diesen in einem neuen Tab, wo dann verschiedene Messwerkzeuge zur Verfügung stehen. Der Screenshot kann mit einer Lupe vergrößert werden und Abstände oder Farbwerte lassen sich blitzschnell ablesen.

Funktionen

Messwerkzeug

Die Hauptfunktion von PixelZoomer besteht darin, Abstände genau zu vermessen. Das integrierte Messwerkzeug versteht sich dabei als virtuelles Lineal, durch das sich Höhe und Breite einer frei definierbaren Fläche ermitteln lassen. Die Auswahlfläche kann während und nach der Erstellung frei verschoben werden.

Pipette

Natürlich darf bei einem Messwerkzeug auch die Farbanalyse nicht fehlen: Hierzu bietet PixelZoomer eine Pipette, die das Aufnehmen von Pixelfarben in Echtzeit ermöglicht. Die aufgenommene Farbe wird dann in den HEX- und RGB-Formaten dargestellt. Die Pipette lässt sich auch während der Vergrößerung verwenden, wodurch das gewünschte Pixel exakt ausgewählt werden kann.

Zoom bis 3200%

Auch das Vergrößern des Screenshots stellt eine wichtige Funktion von PixelZoomer dar. Eine intelligente Lupe erlaubt das gezielte Vergößern eines bestimmten Bereichs, der mit der Maus angesteuert werden kann. Hierbei ist eine maximale Vergößerung von 3200% möglich.

Alles an einem Platz

Die verschiedene Werkzeuge von PixelZoomer befinden sich in einer einzigen Toolbar am oberen Fensterrand. Innerhalb der Werkzeugleiste gibt es drei Bereiche, in denen die Analyse-Werkzeuge, Infos und Zoom-Einstellungen zu finden sind. Da die Erweiterung auf Schnelligkeit ausgelegt ist, dient die Toolbar nur als Hilfestellung: Die eigentliche Arbeit wird durch Maus und Tastatur ausgeführt, so dass in der Werkzeugleiste hauptsächlich Pixelmaße und Farbwerte abgelesen werden.

Die Toolbar von PixelZoomer

Präzises Messwerkzeug

Virtuelles Lineal zum Messen von Abständen

In erster Linie ist PixelZoomer auf das Messen von Abständen ausgelegt. Damit diese Aufgabe präzise erfolgen kann, erzeugt die Firefox-Erweiterung einen Screenshot der Website. Der Screenshot wird mit einem speziellen CSS-Attribut dargestellt, das eine Kantenglättung verhindert. Dadurch behalten Pixel auch bei einer starken Vergrößerung ihre Kanten bei und die realen Pixelabstände können ermittelt werden. Mit dem virtuellen Lineal können Höhen und Breiten über eine Auswahlfläche gemessen werden. Die Auswahlfläche kann mit der SHIFT-Taste auch quadratisch erzeugt werden.

Weil eine Auswahlfläche beim ersten Klick nicht immer exakt an der richtigen Position erzeugt wird, lässt sie sich während dem Erstellen durch das Halten der Leertaste noch verschieben. Und auch nach der Erstellung ist Auswahl noch über die Maus oder per Pfeiltasten verschiebbar.