Share
„Pixel-perfekt“ zu sein, wurde für Webdesigner weniger wichtig, als wir alle diese Websites akzeptierten können unterscheiden sich auf verschiedenen Bildschirmen und Geräten. Das bedeutet jedoch nicht, dass die Liebe zum Detail weniger wünschenswert ist. In diesem Tutorial werde ich Ihnen ein Tool (eine Chrome-Erweiterung) vorstellen, mit dem Sie die Pixel-Perfektion in Ihren Webdesigns erreichen können.
Laden Sie zunächst die Chrome-Erweiterung unter www.canvasflip.com/visual-inspector herunter. Nach der Installation werden Sie aufgefordert, sich für ein Konto anzumelden (kostenlos, aber Upgrades sind ab 5 USD pro Benutzer und Monat erhältlich). Du bist am Laufen!
Visual Inspector Chrome-ErweiterungMit dem Inspektor können Sie ein beliebiges Element auf der Seite auswählen und dessen Eigenschaften überprüfen. Was zeigt der Inspector beispielsweise, wenn wir das Logo auf der Tuts + -Homepage auswählen, zum Beispiel:
Wir sehen das verwendete Markup und die verschiedenen Klassen, die dem Element zugeordnet sind. Wir können auch Auffüllung, Rahmen und andere angewandte Stile sehen. In diesem Fall können wir die Bildquelle sehen, und wenn Sie nach unten scrollen, sehen Sie noch viel mehr.
In dieser Phase können wir alle Assets exportieren, die wir sehen können. Bilddateien, die nicht im SVG-Format vorliegen, sind leicht verfügbar. Sogar Text und andere Stile können in JPG oder PNG exportiert und in die Designanwendung Ihrer Wahl übernommen werden, was wirklich nützlich ist.
Wenn Sie mit der Maus im Browser navigieren und auf verschiedene Elemente klicken, werden Maße und Ausrichtung angezeigt, angegeben und impliziert. So können Sie eine genaue Vorstellung davon bekommen, wo alles in Relation zu allem anderen steht - und die Pixel-Perfektion erreichen.
Wie bei vielen anderen Prüfwerkzeugen für den Browser können Sie Eigenschaften und Stile beliebiger Elemente ändern. Mit Visual Inspector können Sie, wie Sie vielleicht prüfen, alle Stile mit visuellen Werkzeugen (Schieberegler, Farbauswahl usw.) ändern..
Nach dem Ändern können Sie die CSS-Ausgabe Schaltfläche, um die neuen von Ihnen erstellten Stile anzuzeigen.
Alternativ können Sie schlagen Änderungen synchronisieren auf der Info Tab und Ihre Änderungen werden in Ihrem Konto gespeichert. Auf diese Weise können Sie diese Änderungen in der Zukunft erneut anzeigen. Dies ist bei normalen Browser-Inspektoren standardmäßig nicht zulässig.
Visual Inspector ist ein großartiges Werkzeug für alle, die es mögen verfeinern im Browser. Überprüfen Sie, was bereits vorhanden ist, nehmen Sie die gewünschten Änderungen vor, exportieren Sie sie oder speichern Sie sie für später. Und wenn Sie ein Upgrade durchführen, können Sie auch mit Teammitgliedern zusammenarbeiten. Schauen Sie sich das an und lassen Sie uns wissen, was Sie in den Kommentaren denken!
Accentsconagua