Beste Software für das Symbol-Design: Photoshop vs. Illustrator
German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)



Als Designer haben Sie sich wahrscheinlich gefragt, welches Adobe-Produkt beim Erstellen von Symbolen bessere Arbeit leistet.
Einige lieben Photoshop, während andere sich ausschließlich auf Illustrator verlassen. Wenn Sie jedoch im Internet suchen, werden Sie feststellen, dass es keinen wirklich umfassenden Vergleich zwischen beiden gibt.
In diesem Fall habe ich das getan, was ich immer getan habe, und mir die Zeit genommen, die beiden auf die Probe zu stellen, um es herauszufinden.
Wenn Sie lernen möchten, wie Sie Symbole erstellen, ob es sich um ein Linien-Symbolpaket, eine Reihe von Social-Media-Symbolen oder sogar ein paar Mac-Symbolsätze handelt, müssen Sie zunächst herausfinden, welche Software besser zu Ihnen passt.
Heutzutage wird das Symbol-Design mit dem gesamten Trend des minimalen Symbol-Stils immer zugänglicher, was bedeutet, dass Sie, solange Sie Zeit und Energie investieren, in der Lage sein sollten, Ihr Handwerk zu erweitern, vorausgesetzt, Sie haben das richtige Werkzeug für das Job.
Von einem einfachen Hilfesymbol bis zu einem Entwicklungssymbolsatz kann und wird die Software die Art und Weise beeinflussen, wie Sie Ihre Assets entwerfen. Deshalb möchte ich Ihnen zeigen, wie sich die beiden bei diesem kreativen Prozess verhalten.
Davon abgesehen, lasst uns gleich hineinspringen!
1. Was ist der beabsichtigte kreative Zweck jeder Software?
Obwohl sowohl Photoshop als auch Illustrator Teil derselben Creative Cloud-Produktfamilie sind, erfüllen sie tatsächlich unterschiedliche kreative Anforderungen, oder zumindest früher, bis Photoshop von einem speziellen Fotobearbeitungs- / -bearbeitungswerkzeug in ein umfassendes kreatives Werkzeug umgewandelt wurde. fähig, viel mehr zu tun.
Was sind dann die Hauptunterschiede zwischen den beiden?
Wenn wir uns die offizielle Webseite von Photoshop genauer ansehen, werden wir feststellen, dass Adobe das Produkt wie folgt bewirbt:
Die weltweit beste Imaging- und Grafikdesign-Software. Erstellen und verbessern Sie Fotos, Illustrationen und 3D-Grafiken. Entwerfen Sie Websites und mobile Apps. Bearbeiten Sie Videos, simulieren Sie reale Bilder und vieles mehr. Es ist alles, was Sie brauchen, um eine Idee Wirklichkeit werden zu lassen.
Auf den ersten Blick scheint dies eine ziemlich gute Produktbeschreibung zu sein, da Sie eine klare Vorstellung davon bekommen, wozu die Software in der Lage ist.
Gehen wir nun zu Illustrator über und sehen, wie Adobe das andere Produkt beschreibt:
Mit der branchenüblichen Vektorgrafiksoftware können Sie Logos, Symbole, Zeichnungen, Typografien und Illustrationen für Druck, Web, Video und Mobilgeräte erstellen.
Wie Sie sehen, sind sich die beiden in Bezug auf ihre beabsichtigten Anwendungsfälle ziemlich ähnlich, insbesondere wenn es um das Design von Symbolen geht, da beide als fähig beworben werden, diese Art von kreativem Prozess zu handhaben.
Wie entscheiden Sie eigentlich, welche Software beim Erstellen von Symbolen besser sein könnte?
Nun, die Antwort ist etwas komplizierter als Sie vielleicht denken, wie wir in den folgenden Augenblicken sehen werden, da alles auf einige Schlüsselfaktoren hinausläuft.
2. Wie ist die Zeichenflächen-Unterstützung?
Das erste, was einen Symbol-Designer wirklich interessieren sollte, ist die Zeichenflächen-Unterstützung.
Hier zeichnen sich die beiden aus, da Illustrator Ihnen die Möglichkeit bietet, von Anfang an mehrere Zeichenflächen mithilfe der Eingabeaufforderung für das Fenster Neues Dokument einzurichten, wodurch der gesamte Vorgang wirklich einfach und intuitiv wird.



Mit dem neuesten Update kann die Software jetzt satte 1.000 Zeichenflächen erstellen, was für einen Symbol-Designer… wirklich erstaunlich ist.
Photoshop hingegen scheint Ihnen diese Funktion nicht zu bieten, unabhängig davon, ob Sie die neue Eingabeaufforderung für ein schickes oder das ältere Fenster verwenden.
Mit der moderneren Benutzeroberfläche haben Sie die Möglichkeit, Zeichenflächen zu verwenden. Es gibt jedoch keine Möglichkeit, eine bestimmte Anzahl festzulegen oder einfache Dinge wie den Abstand, die Anzahl der Spalten oder die Verteilungsmethode anzupassen.



Natürlich können Sie diesen kleinen Einrichtungsfehler umgehen, indem Sie zum Zeichenflächen-Werkzeug wechseln und die gewünschte Anzahl von Zeichenflächen manuell hinzufügen, indem Sie auf eines der Pluszeichen klicken, je nachdem, wo die Software sie positionieren soll, aber das ist noch viel mehr zeitaufwändig als es sein sollte.



Wenn es um die maximale Anzahl von Zeichenflächen geht, die Sie einrichten können, konnte ich keine offiziellen Informationen finden, aber ich bin mir ziemlich sicher, dass es mit Illustrator dort oben ist, also 1.000 - ich habe nach Zeichenfläche Nummer 500 aufgegeben.
3. Wie funktioniert die grundlegende Formauswahl?
Nachdem wir gesehen haben, wie die beiden mit dem Einrichten von Zeichenflächen umgehen, schauen wir uns die Formauswahl genauer an.
Um in Photoshop eine Form auszuwählen, müssen Sie zunächst sicherstellen, dass das Verschieben-Werkzeug (V) derzeit das aktive Werkzeug ist. Anschließend können Sie einfach auf die Oberfläche der gewünschten Form klicken oder diese ziehen, um eine Auswahl zu treffen .



Das Problem ist nun, dass es nach Auswahl einer Form keine Möglichkeit gibt, festzustellen, ob die Auswahl getroffen wurde oder nicht, was ehrlich gesagt ziemlich ärgerlich ist.
Die einzige Möglichkeit, um sicherzustellen, dass tatsächlich eine Auswahl getroffen wurde, besteht darin, das Ebenenbedienfeld genau zu betrachten, in dem unter der Formebene selbst ein dunklerer Hintergrund angezeigt wird.



Glücklicherweise können wir dieses Verhalten tatsächlich ändern, indem wir zuerst die Form auswählen, dann zur oberen Anwendungsleiste wechseln und dann die Option Transformationssteuerelemente anzeigen aktivieren.



Wenn wir zu Illustrator übergehen, werden wir schnell feststellen, dass die Software bei der Auswahl einen besseren Job macht, da sie sich von Anfang an intuitiver anfühlt, ohne dass Sie Anpassungen vornehmen müssen.
Um eine einzelne Form auszuwählen, können Sie dies einfach tun, indem Sie zuerst zum Auswahl-Werkzeug wechseln und dann mit der linken Maustaste klicken oder über die Oberfläche ziehen. Dadurch wird sofort der Begrenzungsrahmen angezeigt, sodass wir wissen, dass tatsächlich eine Auswahl getroffen wurde.



Im Vergleich zu Photoshop hat Illustrator bei der Auswahl ein Ass im Ärmel, da Sie die Möglichkeit haben, mehrere Formen basierend auf ähnlichen Merkmalen wie Aussehen, Füllfarbe, Deckkraft, Strichfarbe usw. auszurichten und auszuwählen.
Wählen Sie dazu einfach eine der Formen aus und gehen Sie dann zu Auswählen > Gleich und wählen Sie eine der 12 verfügbaren Optionen.
4. Wie funktioniert die grundlegende Formanpassung?
Nachdem wir gesehen haben, wie die beiden die Formauswahl handhaben, wollen wir etwas tiefer gehen und sehen, wie sie sich bei der Formanpassung verhalten.
Per Definition besteht eine Vektorform aus einem geschlossenen oder offenen Pfad, der durch einen Satz von zwei oder mehr Ankerpunkten definiert wird.
In Photoshop können Sie eine Form einfach anpassen, indem Sie zuerst ihre Ankerpunkte mit dem Direktauswahl-Werkzeug (A) auswählen und dann in die gewünschte Richtung ziehen.



Illustrator verwendet dieselben Grundlagen, bei denen Sie mit dem speziellen Direktauswahl-Werkzeug (A) den zusammensetzenden Ankerpunkt einer Form auswählen und dann in die gewünschte Richtung klicken und ziehen, um die Form des Objekts anzupassen.
Im Vergleich zu Photoshop bietet Illustrator jetzt ein kleines Infofenster, in dem Sie die Anzahl der Pixel sehen können, die der Ankerpunkt beim Ziehen bewegt.



Wenn Sie hohe Präzision mit einem schnellen Workflow kombinieren müssen, werden Sie feststellen, dass Illustrator eine bessere Arbeit leistet, da Sie den Anker auswählen und dann das Verschieben-Werkzeug verwenden können, indem Sie mit der rechten Maustaste klicken und dann zu Transformieren > Verschieben gehen, wodurch ein neues Fenster geöffnet wird, in dem Sie die Position auf der horizontalen und vertikalen Achse individuell anpassen können.



Das Anpassen der Position eines Ankerpunkts macht tatsächlich Spaß und ist einfach, aber was ist mit den Situationen, in denen Sie einen Punkt vollständig aus dem Pfad einer Form entfernen müssen?
In Photoshop können Sie einen Anker einfach entfernen, indem Sie ihn mit dem Direktauswahl-Werkzeug (A) auswählen und dann die Entf-Taste drücken, um den Pfad der Form zu öffnen, wie Sie sehen können.



Um den resultierenden Pfad zu schließen, müssen wir das Zeichenstift-Werkzeug (P) greifen, auf einen der nicht verbundenen Ankerpunkte klicken und dann die Linie schließen, indem wir auf den verbleibenden klicken.



Wenn wir zu Illustrator wechseln, verwendet die Software denselben Vorgang. Um einen Ankerpunkt zu entfernen, müssen Sie ihn zuerst mit dem Direktauswahl-Werkzeug (A) auswählen und dann durch Drücken von Löschen.



Wenn es darum geht, den resultierenden Pfad zu schließen, sind die Dinge dieses Mal ein wenig einfacher, da alles, was Sie tun müssen, ist die Strg-J-Tastaturverknüpfung zu verwenden, die die getrennten Anker über ein gerades Pfadsegment wieder miteinander verbinden wird.



5. Wie funktioniert die erweiterte Formanpassung?
An diesem Punkt haben wir gesehen, was die beiden tun können, wenn es um grundlegende Formanpassungen geht. Lassen Sie uns also die Dinge ein wenig aufdrehen und mit erweiterten Anpassungen spielen.
Im Vergleich zu Illustrator fehlen in Photoshop die Formmodi von Pathfinder, mit denen Sie eine Form mithilfe einer anderen anpassen können. Halten Sie jedoch in Panik, da in einem der Menüs eine Reihe ähnlicher Funktionen verborgen sind.
Bevor wir fortfahren, wollte ich darauf hinweisen, dass, ja, ich bin mir des Bedienfelder für Pfadoperationen bewusst, aber glauben Sie mir, es funktioniert so seltsam, dass Sie besser davon entfernt sind.
Nehmen wir also an, wir haben ein ziemlich einfaches Quadrat mit 32 x 32 Pixel, das wir anpassen möchten, indem wir einen Kreis mit 20 x 20 Pixel aus der oberen rechten Ecke entfernen.



Sobald wir unsere Formen eingerichtet haben, können wir beide auswählen und zu Ebenen > Formen kombinieren > Vordere Form subtrahieren gehen.



Obwohl die Subtraktion korrekt durchgeführt wurde, wurde der Pfad des Kreises nun an den des Quadrats angehängt, den wir korrigieren möchten, indem wir das Bedienfeld Pfadoperationen öffnen und dann die Funktion Formkomponenten zusammenführen verwenden.



Ich werde die verbleibenden drei Pfadoperationen nicht durchgehen, da sie ziemlich selbsterklärend sind. Denken Sie daran, dass es Ihnen vollkommen gut gehen sollte, solange Sie den oben beschriebenen Vorgang ausführen.
Wenn wir zu Illustrator wechseln, werden wir feststellen, dass die in Photoshop verfügbaren Pfadanpassungen anders implementiert sind, was, um ehrlich zu sein, etwas einfacher zu verwenden ist.
Standardmäßig ist das Bedienfeld ausgeblendet, sodass Sie mehrere Formen auswählen müssen, damit es im rechten Werkzeugbedienfeld angezeigt wird.
Sobald das Bedienfeld sichtbar wird, können wir das gleiche Ergebnis wie in Photoshop erzielen, indem wir die beiden erstellten Formen auswählen und dann einfach den Minus-Frontformmodus verwenden. So einfach ist das.



Illustrator wird die Operation sofort ausführen und uns einen schönen, sauberen Weg geben.



Auch hier werde ich nicht alle verbleibenden Formmodi durchgehen, da sie ziemlich beschreibend sind, aber ich empfehle Ihnen wirklich, sie auszuprobieren, insbesondere wenn Sie Illustrator zum ersten Mal verwenden.
6. Wie nutzen die beiden das Pixelraster?
Wenn Sie kleine Elemente wie Symbole erstellen, befinden Sie sich immer in der Position, in der Sie sehen müssen, wie sich die verschiedenen Kompositionsformen im Verhältnis zueinander und vor allem zur zugrunde liegenden Zeichenfläche verhalten.
Hier bietet sich die Möglichkeit an, ein Pixelraster zu verwenden, da Sie so den tatsächlichen Grundstoff sehen und somit ein höheres Maß an Kontrolle über Ihre Formen haben können, wenn es um die Positionierung von Ankern und vor allem die Positionierung von Zeichenflächen geht.
In Photoshop ist das Raster standardmäßig aktiviert. Wie Sie sehen, ist es jedoch nur auf der tatsächlichen Oberfläche einer Form sichtbar. Dies ist nicht der beste Ansatz, den Adobe hätte verfolgen können.



Wenn es darum geht, grundlegende Formanpassungen vorzunehmen, können wir mit der Software die Anzahl der Pixel verfolgen, die unsere Ankerpunkte zurücklegen. Sie müssen jedoch die Pixel selbst zählen, was nur durch Klicken und Ziehen möglich ist Methode.



Wenn Sie eine Form in Bezug auf eine andere positionieren müssen, ist Photoshop diesmal besser geeignet, da Sie mithilfe der intelligenten Hilfslinien und des Infofensters die horizontalen und vertikalen Bewegungen der Form perfekt verfolgen können, solange Sie Verwenden Sie die Click-and-Drag-Methode.



So weit so gut, aber jetzt kommt der Teil, der das Werkzeug irgendwie unbrauchbar macht, denn wenn Sie mit dem Zeichenstift-Werkzeug (P) eine Form mit bestimmten Werten zeichnen wollen, gibt es keine Möglichkeit, dies zu tun, da das Raster außerhalb der Oberfläche einer Form nicht sichtbar ist.



Soweit ich sehen konnte, liegt dies hauptsächlich an der Farbe der Linien des Gitters, die nicht geändert werden kann. Die einzige Lösung für das Problem besteht derzeit darin, eine Form zu erstellen, die die gesamte Oberfläche der Zeichenfläche ausfüllt, und ihre Farbe auf etwas Dunkleres wie Grau einzustellen, was wiederum zusätzliche Schritte erforderlich machen würde.
Wechseln wir nun zu Illustrator und sehen, wie diese Art von Situationen behandelt werden.
Ähnlich wie in Photoshop wird die Software mit einer eigenen Version des Pixelrasters geliefert, die aktiviert werden kann, indem Sie zu Ansicht > Pixelvorschau wechseln oder die Tastenkombination Alt-Strg-Y verwenden.
Sobald wir es einschalten, werden wir schnell feststellen, dass im Vergleich zu Photoshop, wo das Raster nur innerhalb der Oberfläche seiner Formen sichtbar war, das Raster hier auf das gesamte Dokument angewendet wird.



Durch diesen anderen Ansatz hilft Ihnen die Software besser dabei, die Pixelanzahl zu verfolgen, wie wir in den folgenden Augenblicken sehen werden.
Wie bei Photoshop können wir die Position eines Ankerpunkts einfach anpassen und die Anzahl der zurückgelegten Pixel perfekt verfolgen. Nur diesmal ist der gesamte Vorgang einfacher, da es über ein eigenes Infofenster verfügt.



Wenn es darum geht, eine Form relativ zueinander zu positionieren, können wir dies problemlos tun, solange wir die Click-and-Drag-Methode verwenden, da wir so die Pixelanzahl über das kleine Infofenster verfolgen können.



Jetzt kommt der Teil, der Illustrator wirklich auszeichnet, denn wenn wir eine Form mit dem Zeichenstift-Werkzeug (P) zeichnen müssen, können wir mithilfe des kleinen Infofensters leicht den Abstand zwischen den zusammengesetzten Ankerpunkten verfolgen.



An dieser Stelle haben wir die meisten grundlegenden Aspekte behandelt, die Sie bei der Auswahl der „richtigen“ Software berücksichtigen müssen. Dies bedeutet, dass wir nun endlich zum Abschlussteil übergehen können.
Abschluss
Die Anzahl der Vorteile, die Illustrator hat, macht es hier zum klaren Gewinner:
- bessere Zeichenflächenunterstützung
- Die Formauswahl ist schneller und intuitiver
- Sowohl grundlegende als auch erweiterte Formanpassungen sind einfacher durchzuführen
- ein insgesamt besseres Pixel Raster-Erlebnis
Abgesehen davon hoffe ich wirklich, dass diese Informationen nützlich sind. Wenn Sie Fragen haben, können Sie diese gerne im Kommentarbereich veröffentlichen. Ich werde mich so schnell wie möglich bei Ihnen melden.
Entwickeln Sie Ihre Fähigkeiten zum Aufbau von Symbolen weiter
Sie haben gerade diesen ausführlichen Artikel durchgearbeitet und möchten mehr erfahren? Wenn das der Fall ist, haben Sie Glück, denn ich habe mir die Zeit genommen, diese kleine Liste zusammenzustellen, die Sie für die nächsten Tage am Laufen halten sollte!



Wie erstellt man Symbole?



Die Vor- und Nachteile des Erstellens von Liniensymbolen



10 Stile, die das Gesicht des Symbol-Designs verändert haben



10 Top-Tipps zum Erstellen fantastischer Symbole



Wie skaliert man Symbole in Adobe Illustrator richtig?



Wie erstellt man pixelgenaue Grafiken mit Adobe Illustrator?



Wie führt Apple die Symbol-Design-Trends an?



Wie erstellt man ein Blog-Symbol?



Illustrator in 60 Sekunden: Wie erstellt man ein Emoji-Symbol?



Wie erstellt man einen Texteditor-Symbolsatz in Adobe Illustrator?



Wie erstellt man eine Reihe von Music Player-Benutzeroberflächen-Schaltflächen in Adobe Illustrator?



Wie erstellt man 10 allgemeine Symbole und ihre Variationen in Adobe Illustrator?



Wie erstellt man ein Handy-Symbolpaket in Adobe Illustrator?



Wie erstellt man ein Symbolpaket zum Thema Transport in Adobe Illustrator?



Wie erstellt man ein stilvolles Zubehör-Symbolpaket in Adobe Illustrator?