Share
Was Sie erstellen werdenHeute werden wir einen Blick auf die verschiedenen Arten des Exportierens von Symbolen mit einem Werkzeug werfen, das häufig befürchtet wird, aber Ihre Produktivität auf eine andere Ebene bringen wird, sobald Sie es beherrschen. Dieses Werkzeug ist nichts anderes als das Schneidewerkzeug, Und glauben Sie mir, wenn Sie es noch nie verwendet haben, möchten Sie diesen Artikel lesen, da ich Ihnen alles erklären werde, was es zu wissen gibt, wenn es um den Export von Symbolen geht.
Egal, ob Sie sich für ein vorgefertigtes Icon-Pack entscheiden oder von vorne anfangen - wir werden Ihnen heute einige wichtige Überlegungen beim Exportieren Ihrer wertvollen Assets zeigen.
Bevor wir uns technisch auskennen, möchte ich ein paar Sekunden dauern und den Grund für das Schreiben dieses bestimmten Stücks erläutern.
In einem vorherigen Tutorial habe ich also über die Verwendung gesprochen Zeichenbretter und Schichten Als Methoden zum Exportieren unserer wertvollen Symbole. Um ehrlich zu sein, können diese Methoden Sie jedoch verlangsamen, wenn Sie ein größeres Pack haben. Die Idee war, dass ich ein für Anfänger geeignetes Verfahren vorlegen wollte / musste, das leicht zu verstehen ist, vorausgesetzt, sie wussten, wie sie die grundlegendsten Werkzeuge von Illustrator verwenden.
Obwohl diese Methoden in Bezug auf die Produktivität möglicherweise nicht die Besten der Besten waren, waren sie ziemlich einfach zu befolgen und anzuwenden, sodass Sie genau das gleiche Ergebnis erzielen.
Da einige von Ihnen dachten, der Prozess sei zu langsam und schmerzhaft, entschied ich mich, mein Spiel zu verbessern und Ihnen den schnellsten Weg zu zeigen, ein Icon-Pack mit einer etwas fortgeschritteneren Methode zu exportieren.
Nun, ich hätte vielleicht fortgeschritten gesagt, aber um ehrlich zu sein, ist es nicht so schwer, wenn man ein paar Mal damit herumspielt.
Lassen Sie uns an dieser Stelle noch einmal auf unser Hauptthema zurückkommen und ein wenig über Slices und deren Verwendung mit Illustrator sprechen.
Sie können sich ein „Slice“ als einen definierten Abschnitt eines Kunstwerks vorstellen, das Sie erstellen können, um einzeln zu exportieren, anstatt das gesamte Stück zu exportieren.
Ursprünglich wurden Slices für Webdesigner erstellt. Wie bei den meisten Werkzeugen von Illustrator wurde auch hier schnell eine neue Verwendung gefunden: das Exportieren von Symbolen.
Es ist eigentlich ganz einfach. Lassen Sie uns zunächst das Artboard als ein Stück Papier betrachten, auf dem Sie Ihr Kunstwerk ablegen. Wenn Sie nun ein "Slice" erstellen, begrenzen Sie tatsächlich ein Segment dieses Papiers, indem Sie einen Ausschnitt erstellen, den Sie dann frei aus der größeren Komposition entfernen können.
Ich stelle mir gerne vor, dass der Prozess dem Vorgang ähnlich ist, einen Fräser zu nehmen und die nachgezeichneten Ränder dieses Segments zu durchtrennen und es vom Papierstück zu trennen.
Mit jedem erstellten Slice weist Illustrator eine Nummer zu, beginnend von der oberen linken Ecke bis zur rechten unteren. Anfangs mag es Ihnen vielleicht nicht allzu sehr darum gehen, aber Sie werden es mit der Zeit zu schätzen wissen, da Sie ein besseres Verständnis dafür haben, was mit Ihrem Kunstwerk los ist.
Wenn Sie noch nie ein Slice erstellt haben, machen Sie sich keine Sorgen, denn das ist ziemlich einfach. Es gibt drei Möglichkeiten, Slices zu erstellen, die Sie kennen sollten:
Diese erste Option ist sehr einfach zu verstehen, da Sie damit Slices um die Grenzen eines oder mehrerer Objekte erstellen können.
Nehmen wir also an, wir haben ein paar Icons, und wir wollen das erste herausschneiden.
Dazu wählen wir das Symbol aus und gehen dann zu Object> Slice> Make.
Dadurch wird dieses Symbol sofort vom Rest getrennt, indem eine Begrenzungslinie um das Symbol herum erstellt wird.
Obwohl wir ein Segment für nur ein Symbol erstellt haben, hat Illustrator die verbleibenden Abschnitte des Artboards in größere Segmente unterteilt, und zwar einen für jede Seite des Symbols. Wir haben einen großen für die Oberseite, einen schmaleren für die linke Seite, einen ziemlich breiten für die rechte Seite und einen noch schmaleren für die Unterseite.
Wenn Sie sich nun Ihr Artboard genauer ansehen, werden Sie möglicherweise feststellen, dass diese Schnitte auf recht einfache Weise von oben links nach rechts unten nummeriert sind. Illustrator weist den Slices Nummern zu, damit Sie auswählen können, welche der Slices Sie exportieren möchten und welche nicht. Ich werde im Export mehr darüber sprechen.
Kurzer Tipp: Wie Sie sehen, hat die erstellte Slice-Grenze eine rechteckige Form, da Illustrator die Abgrenzung erstellt, indem er die Gesamtbreite und -höhe des Symbols und nicht die Form betrachtet. Das ist ziemlich verständlich, denn wenn Sie eine Webseite entwerfen, ist es ziemlich schwierig, Ihre Komposition mit organischen Linien aufzuschlüsseln und sie dann wieder perfekt zusammenzusetzen.
Es gibt einige Dinge, die Sie beachten sollten, wenn Sie diese Methode verwenden. Wenn Sie das öffnen Objekt> Schnitt Menü, Sie werden sehen, dass Sie die haben Machen Option, die wir zuvor verwendet haben und a Aus Auswahl erstellen ein paar Reihen tiefer. Während die beiden dasselbe tun, wenn Sie nur ein Objekt ausgewählt haben, verhalten sie sich völlig anders, wenn Sie mehrere Objekte ausgewählt haben.
Der Hauptunterschied zwischen den beiden ist der mit Machen Sie können um jedes der ausgewählten Objekte Slices erstellen, während Sie die Aus Auswahl erstellen Mit dieser Option weisen Sie Illustrator an, Slices um die Gesamtoberfläche aller ausgewählten Objekte zu erstellen.
Wenn Sie nun ein Webprojekt (Webseite) erstellen, wird die Aus Auswahl erstellen Diese Option wäre völlig in Ordnung, aber wenn Sie ein Icon-Pack erstellen, möchten Sie immer mit Machen da Sie jedes einzelne Symbol einzeln exportieren möchten.
Verglichen mit der bisherigen Methode wird die Führungen Eine ist akribischer, da Sie für jede Seite des Bildausschnitts, den Sie abgrenzen möchten, vertikale und horizontale Hilfslinien manuell hinzufügen müssen.
Zuerst müssen Sie die Lineale aktivieren, indem Sie drücken Control-R (Rechtsklick> Lineale anzeigen) Ziehen Sie dann die Hilfslinien und positionieren Sie sie an der Stelle, an der die Schnittlinien liegen sollen. Wenn Sie Ihren Abschnitt mit Hilfe der Hilfslinien abgegrenzt haben, können Sie zu gehen Objekt> Schnitt> Aus Hilfslinien erstellen um die tatsächlichen Scheiben zu erstellen.
Wenn Sie sich genau anschauen, wie Illustrator den Slices Zahlen hinzugefügt hat, werden Sie feststellen, dass ein Abschnitt, sobald er abgegrenzt und zugewiesen ist, die anderen zwingt, den folgenden Zahlenwert zu verwenden, unabhängig von der Größe, die er hat. Es ist auch sehr interessant zu sehen, dass die Schnitte um die begrenzte Oberfläche der Objekte und nicht um den Schnittpunkt der Hilfslinien erstellt werden.
Diese dritte Methode ist wahrscheinlich der "Top-Dog", wenn es um Genauigkeit geht, da Sie hier klicken und ziehen können, um eine 100% manuelle Slice-Auswahl zu erstellen. Um ehrlich zu sein, gibt es Situationen, in denen Sie mehr Kontrolle über Ihre Slices haben möchten, aber ich finde es nicht besonders hilfreich, wenn Sie ein großes Icon-Pack in Scheiben schneiden, da dies lange dauern würde.
Aber nur für den Fall, dass Sie es jemals brauchen müssen, sollten Sie wissen, wie es geht. Zuerst musst du die Schneidewerkzeug, Diese befindet sich standardmäßig in der linken Seitenleiste im unteren Bereich, direkt über dem Handwerkzeug. Wenn Sie das Werkzeug ausgewählt haben, können Sie sich über dem Bereich Ihres Kunstwerks positionieren, den Sie begrenzen möchten, und dann einfach klicken und ziehen, um eine Auswahl zu erstellen, die automatisch in ein Slice umgewandelt wird, sobald Sie die Maustaste loslassen.
Im Vergleich zu einer regulären Auswahl wird die Schneidewerkzeug können Sie die gedrückt halten Platz Taste, um Ihre Auswahl zu verschieben / neu zu positionieren, was sehr hilfreich ist, da Sie manchmal den falschen Weg eingeschlagen haben.
Das Coole an dieser Methode ist nun, dass die Slices sofort erstellt werden, ohne dass auf die Objekt> Schnitt Untermenü um Machen oder Erstellen Eine Scheibe von ein Auswahl.
Der einzige Nachteil, den ich mir vorstellen kann, ist, dass Sie möglicherweise keine 100% ige Genauigkeit haben, bevor Sie das Gerät einschalten Pixelvorschau Modus (Ansicht> Pixelvorschau oder Alt-Control-Y), mit dem Sie pixelgenaue Auswahlmöglichkeiten erstellen können, was für heutige Designer ein Muss ist.
Bis jetzt habe ich über die drei verschiedenen Methoden gesprochen, mit denen Sie Slices erstellen können. Nun ist es Zeit zu sehen, welche Methode die beste ist, wenn es darum geht, unsere wertvollen kleinen Icons zu exportieren.
Beginnen wir mit der ersten Methode. Wie Sie sich erinnern, ist dieses Objekt auf die Verwendung von einem oder mehreren Objekten angewiesen, um die Slices zu erstellen.
Nehmen wir an, wir haben das gleiche kleine Icon-Pack wie zuvor, nur diesmal wollen wir alle zusammengesetzten Icons schneiden und exportieren, nicht nur eines.
Normalerweise würden Sie einfach alle Assets durch Drücken von auswählen Steuerung-A und dann zu Object> Slice> Make.
Dann würden Sie zu gehen Datei> Speichern Sie für Web, wählen PNG als ihr gewünschtes format,setze deine Export Option zu Ausgewählte Scheiben und endlich getroffen sparen.
Die Sache ist, dass Sie zunächst denken, dass alles gut gelaufen ist, aber sobald Sie sich Ihre Icons (genauer ihre Größe) ansehen, stellen Sie möglicherweise fest, dass etwas schief gelaufen ist.
Das liegt daran, auch wenn Sie einen Zoll verwendet haben Gitter Um die Größe der Symbole zu ändern, sind die Assets in Bezug auf Breite und Höhe möglicherweise nicht vollständig. Da Sie die Symbole als ausgewählte Objekte und nicht als eigentliche Raster verwendet haben, sollte dies keine Überraschung sein.
Der Trick besteht darin, die eigentlichen Raster anstelle der Symbole zu verwenden und die Scheiben um sie herum zu erstellen. Auf diese Weise werden Ihre exportierten Symbole genau so sein, wie Sie es möchten.
In meinem Fall verwende ich beispielsweise eine 48 x 48 px Gitter, aber ich habe ein Allround 2 px Polsterung hinzugefügt. Ganz zu schweigen davon, dass meine Icons etwas kürzer sind und nur eine Höhe haben 40 px. Das heißt, wenn ich die Slices mit den Icons selbst erstellen und dann exportieren würde, wären meine Icons etwas kleiner (44 x 40 px), da Illustrator die Breite und Höhe meiner Vermögenswerte statt meiner Netze (48 x 48 px).
Davon abgesehen, sollten Sie immer eine zweite Ebene mit nur Ihren Rastern haben und diese zum Erstellen der Segmente verwenden, um Ihre Assets korrekt zu exportieren.
Nun, das Coole ist, dass sobald Sie die Slices erstellt haben und zu gehen Datei> Für Web speichern, In Illustrator können Sie auswählen, welche Symbole Sie exportieren möchten. Wenn ich beispielsweise beschließe, dass ich nicht das letzte Symbol auswählen möchte, kann ich einfach darüber gehen und bei gedrückter Maustaste einmal klicken Verschiebung, und damit aus meinem endgültigen Export entfernen.
Wenn Sie alle Ihre Symbole auswählen und anschließend speichern, behält Illustrator die Auswahl aller Segmente bei. Sie können sehen, ob ein Slice ausgewählt ist, indem Sie seine Begrenzung betrachten. Wenn die Linie um Ihr Asset rot ist (alle außer dem ersten Symbol), wird Ihr Objekt zur endgültigen Auswahl hinzugefügt. Wenn es blau ist und etwas verblasst ist, ist es nicht (das erste Symbol)..
Sie können Teile Ihres Icon-Packs deaktivieren, indem Sie die Taste gedrückt halten Verschiebung Taste und Linksklick auf sie. Sie fragen sich vielleicht, warum wir das verwenden Verschiebung Schlüssel. Der Grund hierfür ist, dass Illustrator alle bereits ausgewählt hat. Sie müssen die Taste gedrückt halten, um den Rest der Assets ausgewählt zu halten. Andernfalls wird nur ein Symbol aktiviert.
Um ehrlich zu sein, verstehe ich nicht, warum Sie das tun würden, denn wenn Sie mit Ihrem Pack fertig sind, bin ich mir ziemlich sicher, dass Sie alle Assets exportieren möchten, nicht nur einige, aber ich dachte, es wäre schön, darauf hinzuweisen aus.
Sobald Sie auf die sparen Wenn Sie auf die Schaltfläche klicken, werden Sie von Illustrator nach einem Speicherort für Ihre Dateien gefragt, sodass Sie die Assets benennen können. Dieser Teil ist etwas kompliziert, da der von Ihnen zugewiesene Name auf alle Symbole übertragen wird, was wir wollten, aber die Assets selbst tragen die Anzahl ihrer Slices.
Sie können die Dateien einfach exportieren und dann umbenennen, oder Sie können es direkt in der Speichern Sie für Web Popup durch Doppelklick auf jedes Symbol und geben Sie den gewünschten Namen.
Unabhängig von der von Ihnen gewählten Methode müssen Sie sich trotzdem Zeit nehmen und alle durchgehen, um sie richtig zu benennen.
Um ehrlich zu sein, finde ich, dass diese Option die beste von den dreien ist, da sie superschnell ist und nur Ihre Icons exportiert, sodass keine leeren Artboard-Slices hinterher gelöscht werden müssen.
Wie bei der vorherigen Methode sind die Dinge ziemlich unkompliziert. Zuerst erstellen Sie die Slices mit Hilfe der Hilfslinien (Objekt> Schnitt> Aus Hilfslinien erstellen) und dann gehst du zu Datei> Für Web speichern.
Hier gibt es einige Dinge, die Sie beachten sollten. Wenn Sie die verlassen Export Option eingestellt auf Ausgewählte Scheiben Wie bei der ersten Methode exportiert Illustrator Ihre Symbole, aber auch die leeren Segmente zwischen ihnen. Wenn Sie kein großes Set haben, können Sie die Auswahl der Slices einfach aufheben. Wenn Sie jedoch etwas Größeres haben, kann sich dies als sehr schmerzhaft erweisen.
Andererseits können Sie einfach die Symbole exportieren und dann die unerwünschten Segmente löschen. Dies wiederum kann einige Zeit dauern.
Wenn Sie nun berücksichtigen, dass Sie die Hilfslinien manuell auf jeder Seite Ihrer Symbole hinzufügen müssen, ist es offensichtlich, dass die erste Methode besser geeignet ist, da sie problemlos und viel schneller ist.
Wenn Sie der Meinung waren, dass die Guides-Methode langsam und schmerzhaft ist, dann wird diese den letzten Nagel in Ihren Sarg legen, da es einige Zeit dauert, bis der Vorgang abgeschlossen ist.
Inzwischen wissen Sie wahrscheinlich, dass Sie die Slices für jedes Ihrer Icons manuell erstellen müssen und dann direkt zu Datei> Für Web speichern.
Hier werden Sie versucht sein, die Ausgewählte Scheiben exportieren Option, aber im Vergleich zu den beiden anderen Methoden wird nur das letzte Segment aus Ihrem Artboard exportiert. Das bedeutet, dass Sie das verwenden müssen Alle Scheiben Option, die natürlich alle Segmente exportiert, egal ob sie mit Symbolen oder nur mit leerem Platz gefüllt sind.
Zum Schluss müssen Sie den gesamten Ordner durchgehen, alle nicht benötigten Symbole löschen und sie bei Bedarf umbenennen.
Also empfehle ich diese Methode überhaupt? Nein, warum habe ich es überhaupt erwähnt? Nun, ich möchte so explizit wie möglich sein, wenn ich über diese Art von Werkzeugen und Methoden spreche.
An diesem Punkt hoffe ich wirklich, dass Sie wissen, was Scheiben sind und was noch wichtiger ist, wie sie hergestellt werden, damit Sie dieses Werkzeug nutzen können und den Export Ihrer Symbole schnell und schmerzlos durchführen können.
Normalerweise überlasse ich normalerweise die Entscheidung für Sie, aber dieses Mal muss ich grob sein und Ihnen sagen, dass Sie mit der ersten Methode, dem Objekt (den Objekten), gehen sollten, da es ziemlich offensichtlich ist, dass es die einzige ist weiter so.
Trotzdem möchte ich mich bei Ihnen für Ihre Zeit und Aufmerksamkeit bedanken, und wie immer werde ich das nächste Mal mit Ihnen sprechen.
Accentsconagua