PixelZoomer

Websites pixelgenau Vermessen

PixelZoomer für Windows

Browser-Screenshot

Für Windows®. Kostenlos.

PixelZoomer ist eine präzise und intuitive Software für das schnelle Messen von Abständen und Aufnehmen von Farbwerten. Sie ist in erster Linie für das Analysieren von Websites gedacht, die pixelgenau umgesetzt werden müssen. Die Windows®-Anwendung ist kostenlos und kann uneingeschränkt genutzt werden: Das Projekt versteht sich als Non-Profit-Software (Freeware). Der Download enthält einen Windows®-Installer und ist frei von Adware. Alternativ kann auch die portable Version heruntergeladen werden, die keine Installation benötigt.

PixelZoomer for Chrome on YouTube

Gemacht für UI-Entwickler

Design-Vorlage und Umsetzung pixelgenau vergleichen

Vertrauen ist gut, Kontrolle ist besser: Bei der Umsetzung von Design-Vorlagen müssen Webdesigner und Softwareentwickler in der Regel pixelgenau und maßgetreu arbeiten. Je nach Browser oder Anwendung müssen Schaltflächen, Grafiken und Texte präzise ausgerichtet sein. Augenmaß reicht dann nicht mehr aus, wenn Abstände wirklich exakt sein sollen – ein digitales Lineal ist erforderlich.

Der typische Arbeitsablauf könnte dann darin bestehen, einen Screenshot des Desktops oder des Fensters zu erstellen, diesen in ein Bildbearbeitungsprogramm einzufügen und anschließend mit einem Auswahlwerkzeug Abstände zu messen – ein zeitaufwendiges Unterfangen, das bis zum finalen Produkt sehr oft durchgeführt werden muss.

Hier kommt PixelZoomer ins Spiel: Die Anwendung erstellt automatisch einen Schnappschuss des Desktops und ermöglicht anschließend ein Analysieren des geöffneten Webbrowsers auf Pixelbasis. So können Abstände gemessen und Farbwerte aufgenommen werden. Der Screenshot kann dabei nach Belieben mit der integrierten Lupe vergrößert werden, um die Arbeit zu vereinfachen. Einer pixelgenauen Umsetzung des User Interfaces steht dann nichts mehr im Weg.

Auf einen Blick

Schneller arbeiten

Der übliche Prozess für das Messen von Abständen oder Aufnehmen von Farben über einen Bildbetrachter entfällt: Dank PixelZoomer sind entsprechende Analyse-Werkzeuge nur einen Klick entfernt. Das Programm erstellt direkt beim Start einen Desktop-Screenshot und erlaubt eine Pixelanalyse in Sekundenschnelle.

Vergrößern bis 3200%

PixelZoomer ermöglicht das Vergrößern des Desktop-Screenshots auf bis zu 3200%. Abstände können bei jeder Zoomstufe gemessen werden. Eine intelligente Bildschirmlupe ermöglicht das Vergrößern eines Bereichs an der Position des Mauszeigers. Der vergrößerte Bildbereich kann zudem mit der Maus verschoben werden.

Pixelgenaues Arbeiten

Für ein präzises Arbeiten hilft das Vergrößerungswerkzeug. Beim Vergrößern des Desktop-Screenshots werden die Pixel wiederholt, so dass harte Kanten erhalten bleiben. Eine Kantenglättung bleibt aus, wodurch die vergrößerten Pixel nicht verfälscht werden.

Abstände messen

Das wohl wichtigste Werkzeug von PixelZoomer ist das Messwerkzeug, ein virtuelles Lineal. Mit der Maus lassen sich damit Bereiche auf dem Screenshot markieren. Die Anwendung zeigt in Echtzeit die Breite une Höhe des ausgewählten Bereichs in Pixeln an. Ist das Messwerkzeug aktiv, kann es durch eine Taste zusätzlich verschoben werden.

Farben aufnehmen

Manchmal ist es erforderlich, in einer Design-Vorlage einen bestimmten Farbwert zu ermitteln – oder die Farbe einer umgesetzten Schaltfläche soll auf die Schnelle geprüft werden: Mit der integrierten Pipette kann einfach der Farbwert des Pixels unterhalb des Mauszeigers analysiert werden. Die Farbe wird dann als HEX-Wert und im RGB-Format angezeigt.

Aus der Zwischenablage

PixelZoomer erstellt direkt beim Programmstart einen Desktop-Screenshot zur Analyse. Alternativ können auch Grafiken aus der Windows®-Zwischenablage eingefügt werden. Somit lassen sich bestimmte Zustände einer Website oder einer Software festhalten und anschließend analysieren.

Intuitiv und in Echtzeit

Der Einsatzzweck von PixelZoomer besteht einzig darin, unkompliziert einen Abstand zu kontrollieren oder einen Farbwert zu extrahieren. Die Stärke der Desktop-Anwendung liegt in der Schnelligkeit – aus diesem Grund hat das Programm auch kein Hauptmenü. Die Anwendung wird gestartet, ein Abstand wird gemessen, die Anwendung wird wieder beendet. Da der Desktop-Screenshot automatisch beim Programmstart erstellt wird, entfällt eine manuelle Bildschirmaufnahme oder das Öffnen eines Bildes. Übrigens: PixelZoomer unterstützt selbstverständlich auch mehrere Bildschirme. Bei einem Multi-Monitor-Setup kann im Programm ausgewählt werden, von welchem Bildschirm der Screenshot erstellt werden soll.

Alle Werkzeuge von PixelZoomer arbeiten in Echtzeit: Das Vergrößern mit dem Mausrad, das Aufnehmen einer Farbe oder das Erstellen einer Auswahl erfolgen fließend. Der sichtbare Bildausschnitt des Screenshots kann mit der rechten Maustaste oder über die Leertaste verschoben werden (Panning). Eine Auswahl, die mit dem Messwerkzeug erstellt wird, kann auch über den Fensterrand hinaus vergrößert werden – die Anwendung verschiebt den Bildausschnitt automatisch mit.

Alle Tools im Überblick

Cross-Browser-Testing

In erster Linie richtet sich PixelZoomer an Webdesigner, Frontend-Entwickler und HTML/CSS-Programmierer. In diesem Bereich steht Entwicklern mit CSS ein mächtiges Layout-Werkzeug zur Verfügung: Typographie, Bedienelemente oder gar Effekte können gemäß einer Design-Vorlage sehr genau umgesetzt werden. Doch gerade das pixelgenaue Ausrichten und Zentrieren von Elementen ist nicht immer leicht. Eine visuelle Kontrolle entlang an Fluchtlinien ist mit bloßem Auge nur ungefähr möglich.

Weiterhin ist es für ein professionelles Erscheinungsbild wichtig, dass Webseiten oder Webanwendungen (WebApps) in verschiedenen Browsern möglichst gleich dargestellt werden. Konsistenz ist hierbei nicht immer leicht zu erreichen, da sich die gängigen Webbrowser in manchen Punkten unterscheiden: Abstände können variieren, Schriftgrößen und Zeilenhöhen fallen unterschiedlich aus – oder aber Effekte wie Schatten und abgerundete Ecken werden anders dargestellt.

Einer für alle

Mehrere Browser auf einmal vergleichen

Mit PixelZoomer haben Webentwickler die verschiedenen Browser im Griff. Ein Klick genügt, um einen Schnappschuss des Desktops inklusive geöffnetem Browser zu erstellen und Abstände zu messen. Wenn die verschiedenen Browserfenster nebeneinander angeordnet sind, können mit einem Screenshot gleich alle erforderlichen Browser überprüft werden.

Die Einsatzgebiete reichen natürlich weiter: Auch native Anwendungen oder plattformübergreifende Apps, die mit JavaScript, HTML und CSS umgesetzt werden, lassen sich analysieren und vermessen.

Interaktive Elemente analysieren

Webanwendungen und Programme beinhalten oft kontextsensitive Bedienelemente. Dazu zählen beispielsweise Flyout-Menüs, Icon-Overlays, Tooltips oder Kontextmenüs. Diese Art von Elementen wird erst eingeblendet, sobald der Mauszeiger des Benutzers über ein entsprechendes Element bewegt wird. Auch MouseOver- oder Hover-Effekte zählen hierzu.

Nicht bewegen

Ist ein solches Element bereits umgesetzt und soll vermessen werden, ist ein Kunstgriff erforderlich – denn das interaktive Element verschwindet wieder, sobald der Mauszeiger den zugehörigen Bereich verlässt. Für diesen Zweck bietet PixelZoomer das Einfügen von Grafiken aus der Zwischenablage an. So kann das gewünschte Element in den ausgeklappten Zustand gebracht werden, um dann einen Screenshot mit der DRUCK-Taste zu erzeugen. Anschließend kann PixelZoomer gestartet werden und der Screenshot aus der Zwischenablage kann per Knopfdruck eingefügt werden.

Tooltip-Beispiel

Zum Anpassen

Anpassbarkeit darf in keiner Software fehlen: So können in PixelZoomer die Tastenbelegungen für die verschiedenen Werkzeuge nach Belieben angepasst werden. Zudem gibt es Einstellungen für das Zoomwerkzeug, das Messwerkzeug und die Pipette. Das vorstehende Nummernzeichen des HEX-Farbwerts kann so beispielsweise abgestellt werden. Oder aber der Auswahlbereich des Messwerkzeugs kann mit einer Hintergrundfarbe versehen werden.

PixelZoomer unterstützt zudem mehrere Monitore: Ist mehr als ein Bildschirm vorhanden, kann ausgewählt werden, von welchem Bildschirm der Screenshot erstellt werden soll.