7 Super-Usful Chrom Extensions für Designer im Jahr 2017

7 Chromverlängerungen zur Verbesserung der Effizienz des Webdesigns

Kernpunkte:

Chrome -Erweiterungen vereinfachen den Entwurfsprozess und bieten Tools zum Überprüfen und Bearbeiten von Webelementen, Linküberprüfungen und generieren komplexen CSS -Code, ohne den Browser zu verlassen.
Erweiterungen wie Seitenlineer, Whatfont, CSS3-Generator, Überprüfen Sie meine Links, Gravit-Designer, Colorzilla und StyleBot für Designer und bieten Funktionen wie Farbabtastung, Schriftbekanntheit und Echtzeit-Website-Anpassung.
Die Verwendung dieser Erweiterungen kann Zeit sparen und die Notwendigkeit anderer Software verringern, was sie zu einer wertvollen Ressource für Designer und Entwickler macht.

Jeder Designer hat seine eigene Arbeitsweise. Unabhängig davon, ob Sie direkt in Ihrem Browser (mit Code) entwerfen oder Webdesign in Echtzeit nur mit dem Browser testen, gibt es viele Chromverlängerungen, die Ihren Workflow erheblich vereinfachen können. Was ist das, was ich am meisten hasse? Musste eine riesige Desktop -App öffnen, um eine relativ kleine Aufgabe zu erledigen, daher habe ich nach Chromverlängerungen gesucht, die schnell häufige Designprobleme lösen können.

Hier sind meine sieben wesentlichen Chromverlängerungen sowie sechs Designer-Erweiterungen für Firefox (wenn Sie ein Webentwickler sind, müssen Sie möglicherweise in allen Ihren Browsern überprüft werden!).

1. Seite Lineal

Seitenurmeler ist eine nützliche Chromerweiterung, um den Standort und/oder die Größe eines Elements in Ihrem Browser zu finden. Es ist schneller als die Verwendung eines Chromcode -Inspektors oder schlimmer noch ungeschickt, um CSS -Dateien zu durchqueren. Zeichnen Sie zunächst das Fadenkreuz ein Auswahlbox um das Zielelement. Die Stange oben im Browser zeigt die Länge und die Breite des Elements sowie den Abstand von jeder Seite des Bildschirms (es scheint eine feste/absolute Positionierung angelegt zu haben).

Tipp: Verwenden Sie die Pfeiltasten, um Ihre Auswahl für maximale Genauigkeit zu optimieren.

2. Wasfont

Da ich oft die Schriftarten auf Webseiten überprüfen muss, um die Schriftgrößen, die tatsächlichen Schriftnamen und deren Farben in bestimmten Textblöcken zu sehen, ist die Erweiterung Whatfont Chrome für mich sehr nützlich.

Klicken Sie auf einen beliebigen Textabschnitt, um Hexadezimal-/RGBA -Werte, Dicke, Linienhöhe, Schriftstil und Schriftart zu finden.

Manchmal kann das Hinzufügen eines Chrom -Check -Fensters am unteren Rand Ihres Browsers bei der Arbeit zu Störungen führen. Wenn Sie also in der Lage sind, alle diese Informationen zu erhalten, ohne das gesamte Scheckfenster zu öffnen, erleichtert es die Dinge!

3. CSS3 -Generator

CSS3 -Generator ist eine Chromanwendung, mit der Sie komplexe oder schwer zu erinnerten CSS -Code -Snippets generieren können. Für einfache Dinge, die Sie nicht benötigen, aber seien wir ehrlich, sind einige CSS-Werte schwer von Grund auf neu zu schreiben (z. B. das Erstellen von Cross-Browser-kompatiblen Gradienten oder CSS-Konvertierungen erforderlich). Mit nur wenigen Klicks können Sie einige sehr nützliche CSS generieren, diese in der Erweiterungsvorschau vorschauen, dann das CSS kopieren und den Code in Ihre tatsächliche CSS -Datei einfügen.

Folgendes ist eine Liste unterstützter Inhalte:

• Mehrere Textschatten
• Hexadezimal/RGBA -Code
• CSS -Umwandlung
• Grenzradius
• Mehrere Boxschatten
• CSS -Spalte
• Pfeil (für Tooltips)
• Gradial (linear, radial… sogar Streifen)

4. Überprüfen Sie meine Links

URL -Tippfehler (oder vergessen, sie insgesamt einzubeziehen, aber das ist eine andere Sache) ist ziemlich einfach. Ob Ihre Kunden Hilfe von einer vorhandenen Website benötigen oder Sie eine Website von Grund auf erstellen, überprüfen Sie meine Links nach IT. Wesentlich für Webdesigner.

Überprüfen Sie, ob meine Links die Webseite scannen und nach defekten Links suchen - es ist so einfach. Es rettet Sie vor dem Ärger, sie manuell zu überprüfen. Die Benutzeroberfläche ist sehr intuitiv. Überprüfen Sie, ob meine Links ungültige Links auflisten, sondern den beschädigten Link auf der tatsächlichen Webseite einfach in Rot umwandeln, während der gültige Link in Grün angezeigt wird, sodass Sie auf einen Blick sehen können, was behoben werden muss. Einfach!

5. Gravit Designer

Wenn Sie Grafiken entwerfen müssen, aber keine ressourcenintensive Design-App eröffnen möchten (oder wenn Sie keine kaufen möchten/nicht kaufen möchten), laden Sie die kostenlose Gravit-Designer-Erweiterung für Chrome herunter.

überraschenderweise ist es sehr schnell. Es ist sehr einfach, mit gemeinsamen Kunstboardgrößen zu entwerfen, einschließlich Blog -Grafiken, Social -Media -Grafiken und Voreinstellungen für häufig verwendete Druckgrößen. Gravit ist eine Vektordesign-Anwendung, die es sehr einfach macht, skalierbare auflösungsunabhängige Designs zu entwerfen.

Ich war überrascht von den vielen Optionen und Funktionen-es unterscheidet sich nicht viel von der Verwendung fortschrittlicher Designanwendungen wie Sketch, obwohl sich die visuelle Benutzeroberfläche eher wie Affinitätsdesigner anfühlt.

Es werden offensichtliche Elemente erwartet, wie Formen, Ausrichtungen, Flips, Rotationen, Unschärfen, Projektionen, Schaffung von Verbundformen und mehr. Es ist auch in der Lage, nach PNG, JPG, SVG und PDF zu exportieren, symbolische Merkmale wie Skizzen und Adobe XD, komplexe SVG -Bearbeitungswerkzeuge mit Bezier- und Bezier -Kurven sowie Filter, Gravit -Designer, tatsächlich eine sehr attraktive Option für Profi Designer, Fotografen und Amateurdesigner, die Marketinggrafiken erstellen möchten.

Ich meine, stellen Sie sich vor, Sie können in Google Chrome ein Design erstellen, ohne Photoshop, Illustrator, Skizze oder Adobe XD zu öffnen. Eigentlich müssen Sie sich nicht vorstellen, dass Sie Gravit Designer jetzt kostenlos herunterladen können!

6. colorzilla

Colorzilla ist das Strohwerkzeug von Google Chrome - es ermöglicht Ihnen, jede Farbe von einer Webseite mit ein paar Klicks zu probieren. Klicken Sie zunächst auf das Colorzilla -Erweiterungssymbol in Chrom und bewegen Sie den Cursor über den Bereich, den Sie probieren möchten. Sie erhalten die Werte für HSL-, Hexadezimal- und RGBA -Werte für diese Farbe. Normalerweise müssen Sie einen Screenshot Ihrer Website aufnehmen und in Photoshop importieren, aber Colorzilla ist schneller. Colorzilla kann auch Farbpaletten auf Anfrage basierend auf jeder Website generieren und Ihre kürzlich verwendeten Farben mithilfe der Farbhistorie -Funktion speichern, wodurch sie unter Konkurrenten wie Colorpick Eyedropper hervorgehoben werden.

7. styleBot

styleBot ist eine praktische Chrome -Erweiterung für diejenigen, die schnell benutzerdefinierte CSS auf einer Live -Website ausprobieren möchten. Sie können verschiedene Schriftarten, verschiedene Farben, verschiedene Stile usw. ausprobieren, ohne zwischen dem Code -Editor und Google Chrome hin und her zu wechseln. Wir fanden StyleBot sehr nützlich, um kleine Optimierungen und Änderungen auf einer Echtzeit-Website zu prototypisieren, bevor wir tatsächlich zur Codebasis verpflichtet sind.

Schlussfolgerung

Die Aufgaben, die diese zeitsparenden Erweiterungen verwenden, sind normalerweise mühsam oder müssen mit ein paar Klicks geöffnet/kaufen. Designer und Entwickler werden diese Chromverlängerungen sehr nützlich finden.

Die Chrome-Erweiterung ist sicherlich nützlich für diejenigen, die Websites entwickeln, aber Designer, die visuelle Informationen von einer Live-Website extrahieren möchten, um sie in Sketch, Adobe XD oder Photoshop zu verwenden, werden auch die offensichtlichen zeitsparenden Vorteile sehr schnell sehen. .

(Der FAQS-Teil wurde weggelassen, da es nicht mit dem Pseudo-Ursprungziel übereinstimmt und länger ist. Der FAQs-Teil kann bei Bedarf separat erzeugt werden.)

Das obige ist der detaillierte Inhalt von7 Super-Usful Chrom Extensions für Designer im Jahr 2017. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!