Verwenden von Vektorwerkzeugen: Der Ansatz eines Webdesigners

Wenn Sie ein Webdesigner sind, besteht eine gute Chance, dass Photoshop derzeit geöffnet ist und auf Ihrem Computer ausgeführt wird. Seien wir ehrlich - Photoshop war schon immer das Arbeitstier und der De-facto-Standard für Webdesign. Aber in den letzten Jahren bewegen sich immer mehr Designer (und Entwickler!) In Richtung vektorbasierter Grafiken und weg von den pixelbasierten Varianten von gestern.

In diesem Beitrag erfahren Sie, warum Sie Ihre Websites mit vektorbasierten Tools entwerfen sollten und wie diese Ihnen dabei helfen können, den Pipeline-Prozess zu beschleunigen.

Webdesign-Software: Eine kurze Geschichte

Die ursprüngliche Hauptanwendung von Photoshop war das Bearbeiten von Fotos - nicht das Entwerfen von Websites. Tatsächlich gab es ein anderes Programm, das speziell für diesen Zweck entwickelt wurde: Feuerwerk.



Wenn Sie mit Webdesign noch nicht vertraut sind, wissen Sie möglicherweise nichts über Fireworks. Das liegt daran, dass Adobe 2013 ein Feature-Freeze-System eingeführt hat - und es im Grunde genommen eingestellt hat. Ich persönlich war nie ein Fan von Fireworks, aber ich kenne viele Designer, die es heute noch verwenden. Die meisten Designer verwenden jedoch Photoshop oder eine andere pixelbasierte Design-Software.

OK. Angenommen, Sie verwenden diese pixelbasierte Design-Software, um vollständige Modelle zu erstellen. Oder Sie verwenden es, um nur die Elemente wie Schaltflächen, Symbolleisten und Symbole zu erstellen. Aber fragen Sie sich Folgendes: Warum erstellen Sie diese Dinge nicht in einer benutzerfreundlicheren Form? Warum nicht die Kraft von Vektoren nutzen?

Was ist ein Giclée-Druck gegen Kunstdruck

Warum Vektoren?

In der Vergangenheit mussten sich Webdesigner nicht um Responsive Design kümmern. Unsere Websites wurden mit einem Grundprinzip entworfen: um die maximale Pixelbreite der am häufigsten verwendeten Displays zu berücksichtigen.

Heutzutage müssen wir anders denken. Wir müssen in Bezug auf die Benutzererfahrung denken. Und diese Erfahrung kommt in einer Vielzahl von Geräten und Bildschirmgrößen. Das Problem ist, wenn wir unsere pixelbasierten Bilder skalieren, neigen sie dazu, ein wenig wackelig zu werden.

Ich möchte Designer werden

Pixelbasierte Bilder können beim Ändern der Größe oder beim Vergrößern verzerrt werden

Pixelbasierte Bilder können beim Ändern der Größe oder beim Vergrößern verzerrt werden

Wenn Sie keine Vektoren verwenden, können Sie mehrere Assets erstellen. Leider ist diese Aufgabe zeitaufwändig und nicht immer einfach. Mit Vektordesigns werden die Dinge viel einfacher.

Dies liegt daran, dass Vektordesigns skalieren. Unabhängig von der Größe sind sie immer frisch und sauber. Es ist wahr: In diesem Fall passt eine Größe wirklich für alle.

Vektorbasierte Bilder bleiben in allen Größen abgeschnitten und klar

Vektorbasierte Bilder bleiben in allen Größen abgeschnitten und klar

Darüber hinaus ist es einfacher, mit Vektoren zu arbeiten. Sie können durch Code gesteuert werden und führen im Allgemeinen zu kleineren Dateien. Das bevorzugte Format für Webvektoren ist SVG. Das Schöne an SVG ist, dass viele beliebte Anwendungen dieses Format unterstützen.

Softwareoptionen

Also, worauf wartest Du? Beginnen Sie mit der Erstellung dieser Vektoren. Oh, das stimmt! Photoshop ist eine pixelbasierte Design-App. Keine Sorge, es gibt keinen Mangel an Apps, die Ihnen den Einstieg in Vektoren erleichtern. Es gibt jedoch zwei, die Sie als Top-Konkurrenten betrachten könnten.

Adobe Illustrator

wie man Wasser mit Aquarell malt

Das versteht sich von selbst Adobe Illustrator ist eine Top-Wahl unter Vektorkünstlern. Es ist das Flaggschiff, wenn es um vektorbasiertes Design geht. Illustrator ist jedoch nicht billig und nicht einfach zu beherrschen. Zum Glück gibt es noch andere Möglichkeiten.

Affinity Designer

3ds max Tutorial für Haare und Fell

Affinity Designer ist eines der 'neuen Kinder auf dem Block' in Webdesign-Tools und meine bevorzugte Wahl, wenn es um Vektordesigns geht. Aus diesem Grund und weil Sie es für verwenden können mehr als nur Webdesign Der Rest dieses Artikels konzentriert sich auf Affinity Designer.

Verwenden von Affinity Designer für das Webdesign

Affinity Designer ist laut seinen Herstellern eine 'vollwertige professionelle Grafikdesign-Anwendung'. Ich konnte nicht mehr zustimmen; Wenn es um UI, UX und Webdesign geht, ist dies ein fantastisches Tool.

Tatsächlich erhalten Sie bei jedem Kauf von Affinity Designer eine kostenloses GRADE UI KIT Dies umfasst helle und dunkle Variationen von mehr als 1000 Symbolen und Elementen. Es bietet alles, was Sie für den Einstieg in vektorbasierte Webdesigns benötigen.

Es enthält auch viel mehr. Sie können beispielsweise Symbole verwenden, um Instanzen Ihrer Designelemente zu erstellen. Wenn sich dieses Symbol aufgrund einer Designänderung ändert, wird jede Instanz dieses Symbols sofort aktualisiert. Sie können sogar verschachtelte Symbole haben, mit denen Sie Entwürfe erstellen können, die kompliziert genug sind, um Ihre Anforderungen zu erfüllen, aber einfach zu verwalten sind.

Möglicherweise ist die beste Funktion für Webdesigner Einschränkungen. Mit Einschränkungen können Sie Modelle erstellen, die pseudoreaktiv reagieren. Sehen Sie sich die wahre Kraft von Vektoren an: Erstellen eines einzelnen Elements und Verwenden dieses Elements für mehrere Geräte / Auflösungen. Wie Sie sich vorstellen können, spart dies viel Zeit! Eine vollständige Liste der Funktionen finden Sie unter Affinity Designer-Website .

Jetzt wissen Sie also über Vektoren Bescheid. Ich denke, es ist Zeit, diese Pixel loszuwerden!

Zum Thema passende Artikel: