Das virtuelle Pixel-Lineal für Webentwickler

Virtuelles Lineal für pixelgenaues Messen

Jeder Abstand zählt

Mit HTML und CSS stehen Entwicklern ausgereifte Layout-Werkzeuge für die Umsetzung von Webdesigns zur Verfügung. Dennoch können Elemente nicht immer automatisch ausgerichtet werden. Bei manuellen Positionierungen oder platzierten Texten kann es zu Verschiebungen kommen, die den visuellen Gesamteindruck einer Webpräsenz stören können. Daher ist die pixelgenaue Kontrolle in diesem Bereich fast schon unerlässlich.

Raster und Größen

Visuelle Harmonie auf dem Bildschirm unterliegt Gesetzen der Gestaltung. Moderne Webseiten und Webanwendungen basieren daher nicht ohne Grund auf bestimmten Rastern und Einteilungen. Im Optimalfall basieren die Abstände einer grafischen Anwendung auf einer bestimmten Zahlenfolge oder lassen sich durch eine festgelegte Zahl teilen. Zudem sorgen wiederkehrende Abstände für Ruhe und ein ausgeglichenes Erscheinungsbild.

Mit dem Auswahlwerkzeug von PixelZoomer lassen sich rechteckige Rahmen erstellen, deren Pixelgrößen dann abgelesen werden können. Dadurch können in kürzester Zeit verschiedene Abstände einer Website gemessen werden. So lässt sich also auch schnell kontrollieren, ob Abweichungen vorliegen oder Räume angepasst werden müssen.

Dynamisches Messwerkzeug

Abstände pixelgenau messen mit virtuellem Lineal

Das virtuelle Lineal in PixelZoomer wird durch eine selbst erstellbare Auswahlfläche aktiviert: In der Mitte der oberen Werkzeugleiste lassen sich so schnell Pixelmaße ablesen. Eine Auswahl ist natürlich auch im vergrößerten Zustand möglich, wodurch schließlich pixelgenaue Messungen möglich sind. Eine begonnene Auswahl kann auch über den Fensterrand hinaus gezogen werden – die Anwendung verschiebt den vergrößerten Bildausschnitt automatisch mit. Zudem können durch das Drücken und Halten der SHIFT-Taste quadratische Auswahlbereiche erzeugt werden.

Schließlich lässt sich die aktuelle Auswahl auch in Echtzeit verschieben: Durch das Drücken der Leertaste und gleichzeitigem Bewegen der Maus wird das Auswahlrechteck in die gewünschte Position gebracht. Somit muss die Auswahl nicht neu erzeugt werden, falls ein Pixel nicht genau getroffen wurde.

Zusammen mit der integrierten Bildschirmlupe stellt das Auswahlwerkzeug den Kern von PixelZoomer dar. Mit diesen Funktionen können in kurzer Zeit Abstände oder auch Effekte kontrolliert werden. Besonders zentrierte Elemente lassen sich mit CSS auf verschiedene Arten realisieren. Umso wichtiger ist eine finale Kontrolle, ob ein Element auch wirklich zentriert ist.

Rückgängig und wiederholen

Beim Umgang mit Programmen kommt es ab und an vor, Fehler zu machen. Abhilfe schaffen hier die bekannten Rückgängig/Wiederholen-Funktionen, die in keiner Software fehlen sollten. Auch in PixelZoomer sind diese Funktionalitäten enthalten: So kann die letzte Aktion, die mit dem Messwerkzeug getätigt wurde, einfach per Knopfdruck rückgängig gemacht werden. Die entsprechende Funktion befindet sich in der Werkzeugleiste, kann aber auch über die Tastenkombination STRG+Z ausgeführt werden.

Vermessen, verschieben, ablesen

Höhe und Breite

Ein pixelgenauer Auswahlrahmen ist schnell erstellt in PixelZoomer. Sowohl als Tooltip am Mauszeiger als auch in der Werkzeugleiste werden in Echtzeit Höhe und Breite des aktiven Auswahlrechtecks angezeigt. Abstände können so ohne großen Aufwand bestimmt werden.

Auswahl verschieben

Eine erstellte Auswahl ist natürlich nicht in Stein gemeißelt: Sie kann nachträglich noch verschoben werden, um beispielsweise einen wiederkehrenden Abstand zu kontrollieren. Und per Klick ist ganz einfach eine neue Auswahl erstellt, falls ein weiterer Abstand vermessen werden soll.