Adobe Illustrator
Beste Software für Icon-Design: Photoshop vs. Illustrator
Als Designer haben Sie sich wahrscheinlich gefragt, welches Adobe-Produkt beim Erstellen von Symbolen besser abschneidet.
Einige lieben Photoshop, während andere sich ausschließlich auf Illustrator verlassen, aber wenn Sie im Internet suchen, werden Sie feststellen, dass es keinen wirklich umfassenden Vergleich zwischen den beiden gibt.
Aus diesem Grund habe ich getan, was ich immer tue, und mir die Zeit genommen, die beiden auf die Probe zu stellen, um es herauszufinden.
Wenn Sie lernen möchten, wie man Icons erstellt, sei es ein Line-Icon-Pack, eine Reihe von Social-Media-Icons oder vielleicht sogar ein paar Mac-Icon-Sets, müssen Sie zuerst herausfinden, welche Software besser zu Ihnen passt.
Heutzutage, mit dem ganzen minimalen Icon-Stil-Trend, wird Icon-Design 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 dafür Arbeit.
Von einem einfachen Hilfe-Icon bis hin zu einem Entwicklungs-Icon-Set kann und wird die Software die Art und Weise beeinflussen, wie Sie Ihre Assets entwerfen, weshalb ich Ihnen zeigen möchte, wie sich die beiden in diesem kreativen Prozess verhalten.
Lassen Sie uns gleich darauf einsteigen!
1. Was ist der beabsichtigte kreative Zweck jeder Software?
1.
Obwohl sowohl Photoshop als auch Illustrator Teil derselben Creative Cloud-Produktfamilie sind, erfüllen sie tatsächlich unterschiedliche kreative Anforderungen oder zumindest, bis Photoshop von einem dedizierten Fotobearbeitungs- / -manipulationswerkzeug zu einem Allround-Kreativwerkzeug umgestaltet wurde. in der Lage, noch viel mehr zu tun.
Was sind also die Hauptunterschiede zwischen den beiden?
Nun, wenn wir einen kurzen Blick auf die offizielle Webseite von Photoshop werfen, werden wir feststellen, dass Adobe das Produkt wie folgt bewirbt:
Auf den ersten Blick scheint das eine ziemlich gute Produktbeschreibung zu sein, da man eine klare Vorstellung davon bekommt, was die Software kann.
Kommen wir nun zu Illustrator und sehen, wie Adobe sein anderes Produkt beschreibt:
Nun, wie Sie sehen können, sind sich die beiden in Bezug auf ihre beabsichtigten Anwendungsfälle ziemlich ähnlich, insbesondere wenn es um Icon-Design geht, da beide als in der Lage beworben werden, diesen kreativen Prozess zu bewältigen.
Wie also entscheiden Sie eigentlich, welche Software beim Erstellen von Icons besser sein könnte?
Nun, die Antwort ist etwas komplizierter als Sie vielleicht denken, wie wir in den folgenden Momenten sehen werden, da es auf einige Schlüsselfaktoren ankommt.
2. Wie ist die Artboard-Unterstützung?
2.
Das erste, was einem Icon-Designer wirklich wichtig ist, ist die Unterstützung von Zeichenflächen.
Hier unterscheiden sich die beiden, da Illustrator Ihnen die Möglichkeit bietet, von Anfang an mehrere Zeichenflächen einzurichten, indem Sie die Eingabeaufforderung im Fenster "Neues Dokument" verwenden, was den gesamten Vorgang wirklich einfach und intuitiv macht.
Mit dem neuesten Update ist die Software jetzt in der Lage, satte 1.000 Zeichenflächen zu erstellen, was für einen Icon-Designer… wirklich erstaunlich ist.
Photoshop hingegen scheint Ihnen diese Möglichkeit nicht zu geben, unabhängig davon, ob Sie die neue, schick aussehende Fensteraufforderung oder die ältere verwenden.
Mit der moderneren Benutzeroberfläche haben Sie die Möglichkeit, Zeichenflächen zu verwenden, aber es gibt keine Möglichkeit, eine bestimmte Anzahl festzulegen oder einfache Dinge wie Abstände, die Anzahl der Spalten oder die Verteilungsmethode anzupassen.
Natürlich können Sie diesen kleinen Einrichtungsfehler umgehen, indem Sie zum Artboard-Tool wechseln und die gewünschte Anzahl von Artboards manuell hinzufügen, indem Sie auf eines der Pluszeichen klicken, je nachdem, wo die Software sie positionieren soll, aber das ist noch viel mehr zeitaufwendig, als es sein sollte.
Was die maximale Anzahl von Artboards angeht, die Sie einrichten können, konnte ich keine offiziellen Informationen finden, aber ich bin mir ziemlich sicher, dass es bei Illustrator so weit ist, also 1.000 – ich habe nach Artboard Nummer 500 aufgegeben.
3. Wie funktioniert die grundlegende Formauswahl?
3.
Nachdem wir nun gesehen haben, wie die beiden den Prozess der Einrichtung von Zeichenflächen handhaben, werfen wir einen genauen Blick auf die Formauswahl.
Um in Photoshop eine Form auszuwählen, sollten Sie zunächst sicherstellen, dass das Verschiebewerkzeug (V) derzeit das aktive Werkzeug ist. Anschließend können Sie einfach auf die Oberfläche der gewünschten Form klicken oder sie ziehen, um eine Auswahl zu treffen .
Das Problem ist nun, dass es nach der Auswahl einer Form keine Möglichkeit gibt, festzustellen, ob die Auswahl getroffen wurde oder nicht, was ehrlich gesagt ziemlich nervig ist.
Die einzige Möglichkeit, um sicherzustellen, dass tatsächlich eine Auswahl getroffen wurde, besteht darin, sich das Ebenenbedienfeld genau anzusehen, wo Sie einen dunkleren Hintergrund unter der Formebene selbst erhalten.
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 wechseln, werden wir schnell feststellen, dass die Software bei der Auswahl besser abschneidet, 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 ganz einfach tun, indem Sie zuerst zum Auswahlwerkzeug wechseln und dann mit der linken Maustaste klicken oder über ihre Oberfläche ziehen. Dadurch wird sofort der Begrenzungsrahmen angezeigt, der uns mitteilt, 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.
Wählen Sie dazu einfach eine der Formen aus, gehen Sie dann zu Auswählen > Gleich und wählen Sie eine der 12 verfügbaren Optionen aus.
4. Wie funktioniert die grundlegende Formanpassung?
4.
Nachdem wir nun gesehen haben, wie die beiden Griffformauswahlen aussehen, lassen Sie uns etwas tiefer eintauchen und sehen, wie sie sich bei der Formanpassung verhalten.
Definitionsgemäß 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 ganz einfach anpassen, indem Sie zuerst den/die Ankerpunkt(e) mit dem Direktauswahl-Tool (A) auswählen und dann in die gewünschte Richtung ziehen.
Illustrator verwendet die gleichen Grundlagen, wobei Sie das spezielle Direktauswahl-Werkzeug (A) verwenden, um den Ankerpunkt einer Form für die Komposition auszuwählen und dann darauf zu klicken und in die gewünschte Richtung zu ziehen, um die Form des Objekts anzupassen.
Im Vergleich zu Photoshop bietet Illustrator Ihnen jetzt ein kleines Infofenster, in dem Sie die Anzahl der Pixel sehen können, die der Ankerpunkt beim Ziehen zurücklegt.
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> . gehen Verschieben, wodurch ein neues Fenster geöffnet werden sollte, in dem Sie seine Position auf den horizontalen und vertikalen Achsen individuell anpassen können.
Das Anpassen der Position eines Ankerpunkts macht eigentlich Spaß und ist einfach, aber was ist mit den Situationen, in denen Sie einen vollständig aus dem Pfad einer Form entfernen müssen?
Nun, in Photoshop können Sie einen Anker ganz einfach entfernen, indem Sie ihn mit dem Direktauswahlwerkzeug (A) auswählen und dann die Entf-Taste drücken, wodurch der Pfad der Form geöffnet wird, wie Sie sehen können.
Um den resultierenden Pfad zu schließen, müssen wir das Stiftwerkzeug (P) greifen, auf einen der getrennten Ankerpunkte klicken und dann die Linie schließen, indem wir auf den verbleibenden klicken.
Wenn wir zu Illustrator wechseln, verwendet die Software den gleichen Vorgang, bei dem Sie zum Entfernen eines Ankerpunkts ihn zuerst mit dem Direktauswahl-Werkzeug (A) auswählen und dann durch Drücken der Entf-Taste löschen müssen.
Wenn es darum geht, den resultierenden Pfad zu schließen, ist es diesmal etwas einfacher, da Sie nur die Tastenkombination Control-J verwenden müssen, die die getrennten Anker über ein gerades Pfadsegment wieder miteinander verbindet.
5. Wie funktioniert die erweiterte Formanpassung?
5.
An dieser Stelle haben wir gesehen, was die beiden in Bezug auf grundlegende Formanpassungen tun können, also lass uns die Dinge ein wenig aufdrehen und mit fortgeschritteneren Anpassungen spielen.
Im Vergleich zu Illustrator fehlen Photoshop die Formmodi von Pathfinder, mit denen Sie eine Form mit einer anderen anpassen können, aber warten Sie, keine Panik, da in einem seiner Menüs eine Reihe ähnlicher Funktionen versteckt sind.
Bevor wir fortfahren, möchte ich darauf hinweisen, dass das Bedienfeld „Pfad“ zwar mir bekannt ist, aber glauben Sie mir, es funktioniert so seltsam, dass Sie sich besser davon fernhalten sollten.
Nehmen wir an, wir haben ein recht einfaches 32 x 32 Pixel großes Quadrat, das wir anpassen möchten, indem wir einen 20 x 20 Pixel großen Kreis aus der oberen rechten Ecke entfernen.
Sobald wir unsere Formen an Ort und Stelle haben, können wir sie beide auswählen und zu Ebenen> Formen kombinieren> Vordere Form subtrahieren gehen.
Nun, obwohl die Subtraktion korrekt durchgeführt wurde, wurde der Pfad des Kreises mit dem des Quadrats verbunden, was wir beheben möchten, indem wir das Bedienfeld „Pfadoperationen“ öffnen und dann die Funktion „Formkomponenten zusammenführen“ verwenden.
Auf die verbleibenden drei Pfadvorgänge werde ich nicht eingehen, da sie ziemlich selbsterklärend sind. Denken Sie daran, dass Sie, solange Sie den obigen Vorgang befolgen, völlig in Ordnung sein sollten.
Wenn wir zu Illustrator wechseln, werden wir feststellen, dass es eine andere Implementierung der in Photoshop verfügbaren Pfadanpassungen gibt, die ehrlich gesagt etwas einfacher zu verwenden sind.
Standardmäßig ist das Bedienfeld ausgeblendet, sodass Sie mehrere Formen auswählen müssen, damit es im rechten Werkzeugbedienfeld angezeigt wird.
Sobald das Panel 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 Front Shape Mode verwenden. So einfach ist das.
Illustrator wird die Operation sofort durchfü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 ermutige Sie wirklich, sie auszuprobieren, insbesondere wenn Sie Illustrator zum ersten Mal verwenden.
6. Wie nutzen die beiden das Pixel Grid?
6.
Wenn Sie kleine Assets wie Symbole erstellen, befinden Sie sich immer in der Position, in der Sie sehen müssen, wie sich ihre verschiedenen Kompositionsformen im Verhältnis zueinander und vor allem zu ihrer zugrunde liegenden Zeichenfläche verhalten.
Hier ist die Möglichkeit, ein Pixel Grid zu verwenden, praktisch, da Sie das tatsächlich darunter liegende Gewebe sehen und somit ein höheres Maß an Kontrolle über Ihre Formen haben, wenn es um die Ankerpositionierung und vor allem die Artboard-Positionierung geht.
Photoshop wird standardmäßig mit aktiviertem Raster geliefert, aber wie Sie sehen, ist es nur innerhalb der tatsächlichen Oberfläche einer Form sichtbar, was nicht der beste Ansatz ist, den Adobe hätte wählen können.
Wenn es um grundlegende Formanpassungen geht, ermöglicht uns die Software, die Anzahl der Pixel zu verfolgen, die unsere Ankerpunkte zurücklegen, zwingt uns jedoch dazu, die Pixel selbst zu zählen, was nur mit Klick-und-Ziehen möglich ist Methode.
Wenn Sie eine Form relativ zu einer anderen positionieren müssen, leistet Photoshop dieses Mal einen besseren Job, da Sie mit seinen intelligenten Hilfslinien und dem Info-Panel sowohl die horizontalen als auch die vertikalen Bewegungen der Form perfekt verfolgen können, solange Sie re mit der Click-and-Drag-Methode.
Soweit so gut, aber hier kommt der Teil, der das Werkzeug irgendwie nutzlos macht, denn wenn Sie das Stiftwerkzeug (P) verwenden möchten, um eine Form mit bestimmten Werten zu zeichnen, gibt es keine Möglichkeit, dies zu tun, da das Raster t außerhalb der Oberfläche einer Form sichtbar.
Soweit ich sehen konnte, liegt dies hauptsächlich an der Farbe der Gitterlinien, 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 dunkler wie ein Grau einzustellen, was wiederum zusätzliche Schritte erfordert.
Wechseln wir nun zu Illustrator und sehen wir, wie es mit solchen Situationen umgeht.
Ähnlich wie Photoshop wird die Software mit einer eigenen dedizierten Version des Pixel Grid geliefert, die aktiviert werden kann, indem Sie zu Ansicht > Pixelvorschau gehen 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, hier das Raster auf das gesamte Dokument angewendet wird.
Durch diesen anderen Ansatz hilft Ihnen die Software besser, den Überblick über die Pixelzahl zu behalten, wie wir in den folgenden Momenten sehen werden.
Wie bei Photoshop können wir die Position eines Ankerpunkts einfach anpassen und die Anzahl der zurückgelegten Pixel perfekt verfolgen. Diesmal ist der gesamte Vorgang jedoch einfacher, da er mit einem eigenen Infofeld ausgestattet ist.
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 die Pixelanzahl mit dem kleinen Infofeld verfolgen können.
Jetzt kommt der Teil, der Illustrator wirklich von anderen unterscheidet, denn wenn wir eine Form mit dem Stiftwerkzeug (P) zeichnen müssen, können wir den Abstand zwischen den Ankerpunkten mit dem kleinen Infofeld leicht verfolgen.
An dieser Stelle haben wir die meisten grundlegenden Aspekte behandelt, die Sie bei der Auswahl der „richtigen“ Software berücksichtigen müssen, sodass wir nun endlich zum Abschlussteil kommen können.
Abschluss
Die vielen Vorteile, die Illustrator hat, machen ihn hier zum klaren Gewinner:
bessere Unterstützung für Zeichenflächen
Die Formauswahl ist schneller und intuitiver
Sowohl grundlegende als auch erweiterte Formanpassungen sind einfacher durchzuführen
ein insgesamt besseres Pixel Grid-Erlebnis
Davon abgesehen hoffe ich wirklich, dass diese Informationen nützlich sind, und wenn Sie Fragen haben, können Sie diese gerne im Kommentarbereich posten, und ich werde mich so schnell wie möglich bei Ihnen melden.
Entwickeln Sie Ihre Fähigkeiten zum Erstellen von Symbolen weiter
Sie haben gerade diesen ausführlichen Artikel durchgearbeitet und möchten mehr erfahren? Nun, 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 begleiten sollte!
Wie man Icons erstellt Wollten Sie schon immer wissen, was es braucht, um Ihr eigenes Icon zu erstellen, wussten aber nie genau, wo Sie anfangen sollen? Nun, mit diesem Artikel wird sich das ändern. Du wirst...
Andrei Stefan
19.07.2019
Icon-Design
Die Do's and Don'ts beim Erstellen von LiniensymbolenErfahren Sie, wie Sie Liniensymbole sowohl in Adobe Illustrator als auch in Affinity Designer erstellen, und erfahren Sie, wie Sie mit einigen Grundformen ein brauchbares Endprodukt erstellen können.
Andrei Stefan
17.09.2018
Icon-Design
10 Stile, die das Gesicht des Icon-Designs verändert habenLassen Sie uns die Geschichte und Entwicklung von Icons untersuchen, indem wir uns zehn Stile ansehen, die das Gesicht des Icon-Designs verändert haben.
Andrei Stefan
07.09.2017
Icon-Design
10 Top-Tipps zum Erstellen fantastischer Icons Heute werde ich mit Ihnen zehn Tipps zum Icon-Design teilen, die ich nach einigen Recherchen in meinen beiden Ländern isoliert und in digitaler Tinte niedergeschrieben habe.
Andrei Stefan
13. Januar 2016
Icon-Design
So skalieren Sie Symbole in Adobe Illustrator In letzter Zeit bin ich viel technischer geworden und habe angefangen, Lösungen für die verschiedenen Herausforderungen zu suchen, denen Sie während Ihrer kreativen Arbeit begegnen könnten ...
Andrei Stefan
09. Dezember 2015
Icon-Design
So erstellen Sie pixelgenaue Grafiken mit Adobe IllustratorAls Anfänger kann die Erstellung digitaler Grafiken für die Webnutzung manchmal etwas frustrierend sein, besonders wenn Sie viel Zeit in ein Stück investieren (sei es...
Andrei Stefan
19. Mai 2015
Adobe Illustrator
Wie Apple die Designtrends von Icons anführteHaben Sie sich jemals gefragt, wie Apple tatsächlich die Designtrends in Bezug auf Icons anführte? Nun, im heutigen Artikel werden wir untersuchen, wie es ...
Andrei Stefan
18. Dezember 2018
Icon-Design
So erstellen Sie ein Blog-SymbolErfahren Sie, wie Sie ein Blog-Symbol erstellen, indem Sie nur einige grundlegende geometrische Formen verwenden, die wir anpassen werden. Wenn Sie lernen möchten, wie man Symbole erstellt, ist dies...
Andrei Stefan
19. Februar 2019
Icon-Design
Illustrator in 60 Sekunden: So erstellen Sie ein Emoji-SymbolErfahren Sie, wie Sie ein süßes kleines Emoji-Symbol erstellen, indem Sie nur einige grundlegende Formen verwenden, die wir in Adobe Illustrator anpassen werden.
Andrei Stefan
12. Juli 2018
Adobe Illustrator
So erstellen Sie einen Texteditor-Symbolsatz in Adobe IllustratorIm heutigen Tutorial werden wir ein weiteres Symbolprojekt angehen, in dem wir nach und nach lernen, wie Sie mithilfe von...
Andrei Stefan
07. März 2018
Icon-Design
So erstellen Sie einen Satz von Musikplayer-UI-Schaltflächen in Adobe IllustratorErfahren Sie, wie Sie Ihren eigenen Satz von Musiksteuerungs-UI-Schaltflächen erstellen, indem Sie einige der grundlegendsten Formen und Werkzeuge verwenden, die Adobe Illustrator zu bieten hat.
Andrei Stefan
01. Nov. 2017
UI-Design
So erstellen Sie 10 gängige Symbole und ihre Variationen in Adobe Illustrator Um unseren zehnten Geburtstag zu feiern, lernen Sie, wie Sie mit den grundlegendsten Formen und Werkzeugen, die Illustrator zu bieten hat, einen Satz von zehn unverzichtbaren UI-Symbolen erstellen.
Andrei Stefan
04.09.2017
Icon-Design
So erstellen Sie ein Handy-Icon-Paket in Adobe IllustratorErfahren Sie, wie Sie drei der ikonischsten Kommunikationsgeräte aller Zeiten mit einfachen geometrischen Formen und Werkzeugen in Adobe Illustrator erstellen.
Andrei Stefan
27.07.2017
Icon-Design
So erstellen Sie ein Transport-Themen-Symbolpaket in Adobe IllustratorIm heutigen Tutorial werden wir uns eingehend mit dem Erstellen eines Transport-Themen-Symbolpakets mit einfachen Formen und Werkzeugen befassen.
Andrei Stefan
12. Juli 2017
Icon-Design
So erstellen Sie ein stilvolles Zubehör-Symbolpaket in Adobe IllustratorIm heutigen Tutorial werden wir uns in die Mode bringen und lernen, wie Sie mit den einfachsten Formen und Werkzeugen ein stilisiertes Zubehör-Symbolpaket erstellen ...
Andrei Stefan
21. Juni 2017
Icon-Design
Your comment