Webbrowser bieten in der Regel unzählige Erweiterungen an, die man installieren und direkt im Browser nutzen kann. Im Alltag eines Designers ist alles, was die Arbeit schnell voranbringt und nicht lange aufhält, sehr erwünscht! Daher empfiehlt es sich, in den Stores des jeweiligen genutzten Browsers zu stöbern und nach hilfreichen Erweiterungen zu suchen.
Wer sich einmal auf die Suche begibt, wird von einer riesigen Auswahl unterschiedlichster Add-Ons überschüttet. In einem älteren Blogartikel haben wir bereits einige nützliche Firefox Erweiterungen gezeigt. Aber da die Neu- und Weiterentwicklungen stetig voranschreiten, ist ein aktueller Blick in die Browser Stores ratsam.
Wir stellen euch nun fünf praktische Browsererweiterungen für Designer vor, die wir im Praxis-Alltag erprobt haben und selbst intensiv nutzen. Alle Erweiterungen sind kostenfrei und werden von uns im Google Chrome Browser genutzt.
Fontface Ninja
Eine der besten Browsererweiterungen für Schriften ist Fontface Ninja. Die Anwendung ist einfach zu bedienen und liest aus Webseiten präzise die wichtigsten Infos raus.
Wie das Ganze funktioniert? Man klickt im Browser auf die Anwendung, führt die Maus über den Text und schon erscheint ein Fenster mit den wichtigsten Infos: Schriftart und Schriftschnitt. Dazu außerdem weitere Feinheiten, wie Schriftgröße, Zeilenabstand, Laufweite und Schriftfarbe.
Die Anwendung hat aber noch weitere Funktionen: Wenn man auf den Text klickt, ploppt ein Fenster auf, in welchen man beispielhaften Text eintippen kann und diesen sofort im jeweiligen Font sieht. Hier kann man sogar die Schriftgröße und Laufweite einstellen.
Besonders praktisch ist, dass Fontface Ninja die Bezugsquelle der Schrift erkennt. Über ein Symbol wird der Preis angezeigt und über einen Klick darauf gelangt man zur jeweiligen Webseite. Ist eine Schrift kostenfrei, so kann man sie direkt ohne weitere Umleitung runterladen. Wer sich eine Schrift merken möchte, kann sich diese als Lesezeichen speichern, wofür man sich aber einloggen muss.
Tatsächlich kann die Anwendung auch Fonts aus Bildern auslesen. Dies geschieht mit Hilfe von WhatTheFont, funktioniert aber nach unseren Versuchen noch nicht so optimal.
Die Anwendung ist in den Browsern Google Chrome, Mozilla Firefox und Safari verwendbar.
Page Ruler
Die Anwendung Page Ruler misst Abstände auf Webseiten. Dazu muss man im Browser auf die Erweiterung klicken und ein Feld auf der Webseite aufziehen. In diesem Augenblick erscheint auch schon das blau hinterlegte Feld, welches man verschieben oder mithilfe der markierten Ecken größer und kleiner ziehen kann, bis es den gewünschten Bereich umfasst. Die Pfeiltasten der Tastatur können dazu genutzt werden, das Feld Pixel um Pixel zu bewegen. Im Fenster des Browsers befindet sich oben eine Leiste, welche Breite und Höhe, sowie die Position des festgelegten Bereichs angibt. Um die Auswahl der Fläche zu optimieren, lässt sich hier auch ein Wert eingeben und die Farbe der Auswahl ändern. Wer Flächen auf einer Webseite automatisch erkennen lassen will, hat mit Page Ruler ebenfalls eine gute Erweiterung gefunden. Mit einem Klick auf </> Elements kann man die Maus über die Webseite bewegen, während das Tool Bilder, Textfelder und andere Abstände erkennt. Ein Klick auf den Bereich fixiert die Fläche, welche man optional noch ändern kann. Auf diese Weise lassen sich Abmessungen einfach und exakt durchführen.
Leider haben wir die Anwendung nur im Store von Google Chrome gefunden.
Dimensions
In Erweiterung zu Page Ruler kann man außerdem die Anwendung Dimensions nutzen. Dieses Mess-Tool ist um Einiges simpler aufgebaut und hilft, Abstände automatisch und schnell zu erfassen. Ein Klick auf Dimensions genügt und man kann mit dem Mauszeiger über die Webseite fahren. Sofort werden Abstände erkannt, wobei die horizontale und vertikale Entfernung angezeigt wird. So muss man lediglich an die Stelle der Webseite navigieren, deren Abstand man messen möchte. Wer die Anwendung vor dem Download testen will, kann dies auf der Webseite des Entwicklers tun. In dem Header der Seite wird die Erweiterung ohne vorangehende Installation demonstriert.
Probleme gibt es allerdings, wenn man das Maß eines Bildes auslesen möchte, da das Tool auch innerhalb eines Bildes Begrenzungen erkennt. Hier hat der Entwickler reagiert und mit gehaltener ALT-Taste lässt sich die Abmessung des gesamten Bildes anzeigen. Allerdings funktioniert das bei manchen Bildern trotz Verbesserung immer noch nicht. Für ein schnelles Erfassen der Abstände ist Dimensions aber dennoch zu empfehlen!
Auf der Webseite wird die Erweiterung als Chrome Browser Extension angegeben, sie wird aber auch bei Firefox Add-Ons angezeigt.
ColorZilla
ColorZilla ist nach wie vor eines der besten Tools für Farben. Es verfügt über umfangreiche Funktionen, die im Alltag eines Designers sehr hilfreich sind.
Sobald man die Anwendung startet, erscheint ein Fadenkreuz, welches beim Bewegen der Maus über die Webseite in einem Feld oben die entsprechende Farbe, sowie den RGB Wert und HEX Code anzeigt.
Links in der Leiste kann man auswählen, wie groß die Pipette sein soll oder eine eigene Größe festlegen. Mithilfe einer großen Pipette lässt sich der durchschnittliche Farbwert einer Bildfläche ermitteln. Wer den Hex Code der Farbauswahl für weitere Zwecke braucht, klickt einmal auf den ausgewählten Bereich direkt auf der Webseite und der Wert wird automatisch kopiert. Über das Symbol für ColorZilla im Browserfenster gibt es noch weitere Möglichkeiten, mit dem Tool umzugehen. Man kann sich hier etwa die Farbpalette und Farbauswahl-Historie anzeigen lassen.
Die Erweiterung wird derzeit für Google Chrome und Mozilla Firefox angeboten.
Nimbus Screenshot & Screen Video Recorder
Wer einen Screenshot bequem erstellen will, sollte die Erweiterung Nimbus Screenshot & Screen Video Recorder hinzufügen. Das Aufnahme-Tool ist übersichtlich und einfach zu bedienen.
Zunächst klickt man auf das dazugehörige Symbol im Browser, woraufhin ein Fenster aufploppt, welches eine große Auswahl an unterschiedlichen Aufnahmen bietet. Die Zeiten, als entweder nur der gesamte Monitor oder ein Teilbereich gespeichert werden konnte, sind nämlich längst vorbei. Die klassischen Möglichkeiten (der sichtbare Teil der Webseite oder nur ein Fragment) werden um folgende Optionen ergänzt: Es kann ein Fragment automatisch erkannt, ein ausgewählter Bereich während des Scrollens aufgenommen oder die gesamte Webseite in ihrer Länge gespeichert werden. Es gibt die Möglichkeit, wie bei einem Selbstauslöser den Screenshot nach einigen Sekunden zu erstellen oder die Webseite mit Ansicht des Browserfensters zu speichern. Sogar Videos lassen sich erstellen, welche im Gegensatz zu vielen anderen Add-Ons mit vielen professionellen Einstellungen hervorstechen.
Sobald man eine Option anklickt, wird der Screenshot erstellt und ein neuer Tab erscheint mit dem Bildausschnitt. Wenn alles passt, kann man flink auf Done klicken und im nächsten Fenster das Bild speichern. Wer aber den Screenshot bearbeiten will, kann dies mithilfe der Leiste oben noch vor dem Speichern tun. Hier lässt sich nämlich die Bildgröße ändern, das Bild eventuell nochmal zuschneiden oder zusätzliche Infos mit Pinsel, Text und allerlei anderen Werkzeugen ergänzen. Man kann den Bearbeitungsmodus aber auch überspringen, indem man beim Klick auf das Anwendungs-Symbol unten das sofortige Herunterladen oder Speichern auswählt. So lässt sich die Anwendung besonders gut an die Bedürfnisse des Users zuschneiden.
Wer sich also helfen lassen will, sollte unbedingt in den Erweiterungen des genutzten Browsers stöbern. Uns unterstützen die Add-ons jeden Tag bei den unterschiedlichsten Design-Arbeiten.
Julia Sinner
Neueste Artikel von Julia Sinner (alle ansehen)
- Umweltfreundlich Drucken – Tipps für Agenturen - 18. Juni 2019
- Objekte aus Videos entfernen: Die inhaltsbasierte Füllung in After Effects - 2. Mai 2019
- Tipps fürs Corporate-Design-Manual - 23. April 2019
