PixelZoomer

Websites in Chrome pixelgenau analysieren

PixelZoomer für Chrome

Für Google Chrome.

PixelZoomer ist eine Erweiterung für Google Chrome und erlaubt das schnelle Messen von Abständen und Aufnehmen von Farbwerten. Sie erstellt per Klick einen Screenshot der geöffneten Website und bietet anschließend verschiedene Analyse-Werkzeuge. PixelZoomer ist in erster Linie für das Analysieren von Websites gedacht, die pixelgenau umgesetzt werden müssen. Die Erweiterung richtet sich an Entwickler und Webdesigner. PixelZoomer ist kostenlos und kann über den Chrome Web Store zu Chrome hinzugefügt werden.

PixelZoomer for Chrome on YouTube

Direkte Integration in Chrome

PixelZoomer in Chrome verwenden

Bei der pixelgenauen Umsetzung von Design-Vorlagen müssen Webentwickler in der Regel maßgetreu und exakt arbeiten: Schaltflächen, Grafiken und Texte müssen genau ausgerichtet sein. Augenmaß reicht dann nicht mehr aus, wenn Abstände wirklich präzise sein sollen – ein digitales Lineal kann hier Abhilfe schaffen.

Der Ablauf zum Messen von Abständen könnte darin bestehen, einen Screenshot der geöffneten Website zu erstellen, diesen in ein Bildbearbeitungsprogramm einzufügen und mit einem Auswahlwerkzeug Abstände zu messen – ein zeitaufwendiger Ablauf, der bis zum fertigen Produkt mehrere Male durchgeführt werden muss.

Und hier kommt PixelZoomer ins Spiel: Die Chrome-Erweiterung erstellt per Klick einen Schnappschuss der geöffneten Website und bietet anschließend verschiedene Analyse-Werkzeuge. So können Abstände gemessen und Farbwerte pixelgenau aufgenommen werden. Der erzeugte Screenshot kann dabei mit der integrierten Lupe vergrößert werden.

Features

Abstände messen

Das primäre Werkzeug von PixelZoomer ist das Messwerkzeug, ein virtuelles Lineal. Mit der Maus lassen sich hiermit Auswahlbereiche auf dem Screenshot erstellen. PixelZoomer zeigt die Breite une Höhe des ausgewählten Bereichs in Pixeln an. Wenn ein Bereich ausgewählt ist, kann dieser anschließend mit den Pfeiltasten oder der Maus verschoben werden.

Farben aufnehmen

Auch das Ermitteln eines bestimmten Farbwerts ist mit PixelZoomer kein Problem: Mit der integrierten Pipette kann der Farbwert des Pixels unterhalb des Mauszeigers analysiert werden. Die Farbe wird anschließend als HEX-Wert und im RGB-Format angezeigt.

Vergrößern bis 3200%

PixelZoomer bietet eine Vergrößerung auf bis zu 3200%. Abstände können bei jeder Zoomstufe pixelgenau gemessen werden. Eine intelligente Lupe ermöglicht das Vergrößern eines Bereichs an der Position des Mauszeigers. Der vergrößerte Bildbereich kann auch mit der Maus verschoben werden.

Eine einzige Toolbar

Alle Werkzeuge von PixelZoomer sind in einer einzigen Toolbar integriert, die sich am oberen Fensterrand befindet. Die Toolbar ist in drei Bereiche aufgeteilt: Analyse-Werkzeuge, Infos und Zoom-Einstellungen. Die Erweiterung ist so entwickelt, dass die Toolbar nur als Hilfestellung dient: Das eigentliche Arbeiten mit dem Screenshot erfolgt direkt über Maus und Tastatur. Jede Funktion kann über einen Tastaturbefehl erreicht werden und die Interaktion mit der Maus ist intuitiv. Durch das Scrollrad kann der Screenshot stufenweise vergrößert werden.

PixelZoomer-Toolbar in Chrome

Virtuelles Lineal

Abstände in Chrome pixelgenau messen

Das virtuelle Lineal in PixelZoomer wird durch eine erstellbare Auswahlfläche aktiviert: Mit der Maus können beliebige Rechtecke erzeugt werden, zu denen sich in der Mitte der oberen Werkzeugleiste die Pixelmaße ablesen lassen. Eine Auswahl kann auch im vergrößerten Zustand erstellt werden, wodurch pixelgenaue Messungen möglich sind. Eine neu erstellte Auswahl kann auch über den Fensterrand hinaus gezogen werden – der vergrößerte Bildausschnitt wird automatisch verschoben. Zudem können durch die SHIFT-Taste quadratische Auswahlbereiche erzeugt werden.

Außerdem lässt sich eine erzeugte Auswahl in Echtzeit verschieben: Durch das Drücken der Leertaste und gleichzeitigem Bewegen der Maus wird die Auswahl in die gewünschte Position gebracht. So muss die Auswahl nicht neu erstellt werden, falls ein Pixel nicht genau getroffen wurde.