Webdesign: Bilder und Webseiten mit Pixel-Lineal messen

Wer viel mit Webseiten arbeitet, muss häufig die Platzierung von Bildern und Objekten und deren Größe genau bestimmen. Oftmals ist eine kleine Ungenauigkeit nicht mehr mit dem bloßen Auge zu erkennen oder minimale Verschiebungen nicht exakt zu bestimmen.

Um Objekte auf Webseiten schnell und genau zu vermessen, ist ein kleines kostenloses Tool sehr hilfreich – das Pixel-Lineal. In diesem Tipp wollen wir kurz vorstellen, wie man mit dem Pixel-Lineal arbeitet und wo es zum Download verfügbar ist.

Kostenloses Bildschirmlineal

Das Pixel-Lineal ist ein kostenloses Bildschirmlineal, mit dem Sie Abstände pixelgenau messen können. Es eignet sich gut, um beispielsweise optischen Täuschungen beim Design auf die Schliche zu kommen: Wer kennt das nicht – sitzt das jetzt „auf Linie“ – oder nicht?

Ist die „1“, hier rechts im Bild, wirklich etwas weiter rechts, als die „2“ oder täuscht das nur? Das Pixellineal bringt es zutage. Der „1“ fehlt ein Pixel, um links auf einer vertikalen Linie abzuschließen. Der Punkt hinter den Zahlen sitzt jedoch exakt auf einer vertikalen Linie.

Mit dem Pixellineal können Sie dies und vieles mehr ganz einfach selbst prüfen.

Das Lineal bleibt auf dem Bildschirm immer im Vordergrund und ist gleichzeitig frei bewegbar. Sie können also zwischen verschiedenen Programmen hin- und herschalten und gleichzeitig das Lineal immer sehen. Webdesigner können damit beispielsweise Textpostitionierungen in den verschiedenen Browsern vergleichen.

Maximieren Sie beide Browser, damit sie auf derselben Bildschirmposition sind. Starten Sie das Lineal und schalten Sie zwischen den Browsern hin- und her. Für einen vertikalen Vergleich müssen Sie die Webseite an dieselbe Position scrollen, da die Browserleisten unterschiedlich groß sind.

Kontextmenü

Das Lineal hat ein Kontextmenü, das Ihnen über einen Rechtsklick auf das Lineal angezeigt wird. Darüber können Sie zwischen vertikaler und horizontaler Ausrichtung des Lineals wählen. Mit einem Doppelklick auf das Lineal ändert sich ebenfalls die Ausrichtung.

Über das Kontextmenü können Sie die Farben des Lineals ändern, das Lineal beenden oder über „Aufräumen“ in die Taskleiste verschieben.

Die Bildschirmlupe ist ebenfalls über dieses Kontextmenü aufrufbar. Die Auflösung, sowie die Größe der Lupe können Sie wählen.

Abstände messen

Das Pixel-Lineal paßt sich beim Start automatisch an den Bildschirm an. Meine Bildschirmauflösung ist 1280×800. Starte ich das Lineal, dann „mißt“ es 1280px in der Breite – nach einem Doppelklick darauf zeigt es mir 800px in der Höhe an.

So können Sie jede Breite und Höhe in Pixeln ablesen. Manchmal ist es einfacher eine Breite zu messen, wenn das Lineal beispielsweise direkt am Anfang einer Box liegt. Hierzu plazieren Sie die Maus über dem Lineal, halten die linke Maustaste gedrückt und ziehen es an die gewünschte Position.

Farben ermitteln

Für Designer sind Farben von Bedeutung. Auch hierfür stellt das Pixel-Lineal eine Funktion zur Verfügung. Bei der Bildschirmlupe können Sie zwischen der HMTL Farbanzeige und der Visual Basic Farbanzeige (VB-HEX-Wert) wählen. In der Statuszeile der Lupe werden die Farbwerte angezeigt. Die Position Ihres Mauszeigers sehen Sie als Fadenkreuz in der Lupe. Mit der Tastenkombination Strg+Alt+C können Sie den Farbwert kopieren und beispielsweise in Ihre CSS-Datei einfügen.

Voraussetzungen – Installation

Ab Windows 2000 können Sie dieses Programm verwenden. Die WW-Anwendungsentwicklung, die Urheber, empfehlen unter „Eigenschaften von Anzeige -> Effekte“ die Funktion „Fensterinhalt beim Ziehen anzeigen“ zu aktivieren. Ich habe diese Option nicht aktiviert und es funktioniert bestens. Falls Sie Probleme mit dem Lineal haben, dann prüfen Sie bitte, ob Sie diese Funktion aktiviert haben.

Das Pixel-Lineal ist Freeware. Sie dürfen das Tool also beliebig nutzen. Das Urheberrecht verbleibt natürlich bei der WW-Anwendungsentwicklung.

Die Installation des Lineals ist denkbar einfach: laden Sie sich von „Download Pixellineal“ die neueste Version herunter und starten Sie die pixlin.exe – fertig.

Petra Sütterlin