Share
In letzter Zeit bin ich viel technischer geworden und habe nach Lösungen für die verschiedenen Herausforderungen gesucht, denen Sie auf Ihrer kreativen Reise begegnen könnten. Eine besondere Herausforderung, die wir heute besprechen werden, ist das Skalieren von Symbolen, was für viele Menschen ein schwieriger Prozess sein kann.
Berücksichtigen Sie dabei, dass ich, wenn ich Symbole sage, eigentlich von denen spricht, die mit einem pixelgenauen Workflow erstellt wurden, da diese am empfindlichsten sind, wenn es um die Größenänderung geht.
Bevor wir in den eigentlichen Prozess einsteigen, werde ich mir ein paar Momente nehmen und über ein paar ikonbezogene Begriffe sprechen, die wir bei der Größenänderung unserer wertvollen Ikonen berücksichtigen sollten.
Unabhängig davon, ob Sie Ihre eigenen oder von Envato Market erworbenen Symbole skalieren, sollte der Prozess nach dem Lesen dieses kurzen Lernprogramms recht einfach zu verstehen und zu verwenden sein.
Wenn Sie ein Icon-Pack erstellen, ist es sehr wichtig, dass Sie bei der Auswahl der Basisgröße die richtige Entscheidung treffen. Die Basisgröße ist die kleinste Größe, die Sie erstellen und dann verwenden, um alle anderen Größenvariationen in Ihrem Pack zu erzeugen.
Darüber hinaus fungiert Ihre Basisgröße auch als benutzerdefiniertes Raster, das Sie zum Erstellen eines zusammenhängenden Symbolpakets verwenden, da Sie damit Ihre Elemente innerhalb einer begrenzten Fläche erstellen können.
Davon abgesehen, gibt es ein paar Dinge, die Sie tun sollten, um die Basisgröße richtig zu bestimmen.
Bevor Sie mit der Arbeit beginnen, sollten Sie sich erst ein paar Minuten Zeit nehmen und darüber nachdenken, wie viele Größen Sie für die Lieferung des Icon-Packs benötigen oder benötigen. Möchten Sie zwei Größen erstellen, drei, fünf? Versuchen Sie immer, im Voraus zu denken und Ihre Schritte so zu planen, dass der Prozess so reibungslos und zukunftsorientiert wie möglich verläuft.
Glauben Sie mir, es ist viel einfacher, Ihre Variationen von Anfang an festzustellen, als Ihr Projekt abzuschließen und dann zu erkennen, dass Sie möglicherweise eine zusätzliche Größe hinzufügen müssen, was, wie Sie später sehen werden, Probleme verursachen kann.
Wenn Sie eine klare Vorstellung von der Anzahl der Größen haben, die das Projekt benötigen wird, nehmen Sie die kleinste Variation von allen und verwenden Sie diese als Basisgröße. Zum Beispiel, wenn Sie drei Größenvariationen für Ihr Symbol erstellen möchten 32 x 32 px, 64 x 64 px und 128 x 128 px, Sie möchten Ihr Basisraster auf die kleinste Größe einstellen, was in diesem Fall der Fall ist 32 x 32 px.
Es mag seltsam erscheinen, aber wenn Sie mit einem pixelgenauen Workflow erstellen, sollten Sie immer mit der kleinsten möglichen Größe beginnen, da der Größenänderungsprozess eng mit den Werten für Breite und Höhe der Elemente Ihres Symbols verknüpft ist. In den folgenden Abschnitten werde ich darauf näher eingehen.
Die Werte für Breite und Höhe Ihrer Symbole sind sehr wichtig, da sie direkt mit dem Verhalten Ihrer Symbole verknüpft sind, sobald Sie ihre Größe ändern. Es gibt einige Dinge, die Sie beim Start des eigentlichen Bauprozesses berücksichtigen sollten.
Wenn Sie sich bisher noch nicht mit den Breiten- und Höhenwerten der komponierenden Abschnitte Ihres Symbols befasst haben, ist jetzt der richtige Zeitpunkt, dies zu ändern, da Zahlen eine wesentliche Rolle beim Erstellen und Ändern der Größe von Symbolen spielen.
Der Grund dafür ist recht einfach: Icons sind digitale Formen von Kunstwerken, die normalerweise auf digitalen Bildschirmen angezeigt werden, die bekanntlich auf Pixel angewiesen sind, um jede Art von Bildmaterial zu reproduzieren. Das bedeutet, dass alles, was Sie erstellen, eine bestimmte Anzahl von Pixeln im Raster des Monitors einnehmen muss, damit das Bildmaterial so scharf wie möglich ist.
Nun werde ich nicht den Prozess des Erstellens von pixelgenauen Kunstwerken durchgehen, da ich bereits einen Artikel zum Thema habe, aber ich werde ein wenig darüber sprechen, wie sich Zahlen verhalten, wenn Sie die Größe der Icons ändern und ich werde es tun Tun Sie das, indem Sie Ihnen ein einfaches Beispiel geben.
Nehmen wir also an, wir haben eine 32 x 32 px Basisraster, auf dem wir ein erstellt haben 29,49 x 29,45 px Rechteck (rot hervorgehoben) durch einfaches Ziehen mit der Taste Rechteckwerkzeug, Das wäre der erste Abschnitt einer theoretischen Ikone. Wie einige von Ihnen wahrscheinlich bereits vermutet haben, belegt die Form selbst nicht die Pixel des darunterliegenden Gitters. Das heißt, wenn wir die Größe ändern würden, würde alles schief gehen.
Glaub mir nicht Nun, wählen wir die Form aus und ändern Sie ihre Größe mit Rahmen Werkzeug durch Verdoppeln der Oberfläche mit einem 200% Wert erhöhen.
Wie Sie sehen, hat die resultierende Form jetzt eine Breite von 58,98 x 58,9 px Dies bedeutet, dass Illustrator einen Antialiasing-Effekt anwenden muss, um den Pixeln, die nicht vollständig von der Oberfläche des Rechtecks belegt sind, Alphakanäle hinzuzufügen, die letztendlich die Schärfe der Form beeinträchtigen.
Wenn Sie nicht im Hinblick auf die Pixel-Perfektion arbeiten, stellt dies möglicherweise kein Problem dar, aber für alle Pixel-Junkies ist es etwas, das behoben werden muss, da auf diesem Weg nur neue Probleme entstehen.
Die Lösung ist sehr einfach: Sie müssen lediglich die Form auswählen und dann zwingen, sie durch Aktivieren des Pixelrasters richtig einrasten zu lassen Auf Pixelraster ausrichten Option unter der Verwandeln Panel.
Dann müssen Sie nur sicherstellen, dass für jeden kleinen Symbolabschnitt, den Sie als Nächstes erstellen, Rundenzahlenwerte verwendet werden. Dafür möchten Sie vielleicht die Am Raster ausrichten Option unter der Aussicht Menü in Kombination mit dem Pixelvorschau Modus, der Ihnen die vollständige Kontrolle über die Größe Ihrer Objekte geben soll.
Dieses Prinzip ist eng mit dem Raster der Basisgröße des Symbols verbunden, mit dem Sie arbeiten möchten. Wenn Sie sich erinnern, habe ich Ihnen vor ein paar Momenten gesagt, dass Sie immer versuchen sollten, die kleinste Größe herauszufinden, die Sie für Ihre Icons benötigen, und die größeren Varianten mit dem Baustein als Baustein zu erstellen.
Auf diese Weise stellen Sie immer sicher, dass Ihre Symbole "anatomisch korrekt" sind, da Ihr Bildmaterial korrekt skaliert wird, ohne dass es zu Verformungen kommt.
Nun, wie Sie wissen, werden sowohl gerade als auch ungerade Zahlen korrekt vergrößert, da ungerade Zahlen, wenn sie verdoppelt werden, immer gerade werden. Das Problem bei der Verwendung von ungeraden Zahlenwerten tritt auf, wenn Sie mit der Reduzierung Ihrer Assets konfrontiert werden, da eine Halbierung dieser Werte immer Dezimalwerte zur Folge hat, die Ihr Design zwangsläufig beeinträchtigen.
Wenn Sie Ihre Recherche durchgeführt und das richtige Basisraster ausgewählt haben, sollte dies kein Problem darstellen. Wenn Sie jedoch aus irgendeinem Grund eine kleinere Größenvariation hinzufügen müssen, müssen Sie es nur verkleinern und dann die Größe anpassen verschiedene Abschnitte nach Bedarf.
Bis zu diesem Punkt haben wir also über ein paar Vorkenntnisse gesprochen, die Sie jedes Mal bedenken sollten, wenn Sie Größenvariationen für Ihre Icons erstellen.
In diesem Abschnitt werde ich Sie durch den eigentlichen Prozess der korrekten Größenänderung Ihrer Symbole mithilfe von führen Rahmen Werkzeug, aber zuerst möchte ich kurz über eine bestimmte Methode sprechen, die zwar weit verbreitet ist, aber meiner Meinung nach vermieden werden sollte.
In letzter Zeit ist mir aufgefallen, dass viele Leute, darunter auch einige meiner Kollegen, die Größe ihrer Symbole mit der Methode zum Auswählen und Ziehen ändern.
Lassen Sie mich es einfach und klar machen: Verändern Sie niemals die Größe eines Symbols, indem Sie eine seiner Seiten oder Ecken auswählen und dann ziehen. Dieser Wille immer brechen Sie Ihr Symbol, wenn Sie es mit einem pixelgenauen Fundament erstellt haben, da Ihre Formen aus dem Pixelraster herausschnappen werden, da ihre Zahlenwerte als Dezimalzahlen dargestellt werden, die nicht korrekt belegt werden können das darunterliegende Gitter.
Der Grund ist ziemlich einfach: Beim Ziehen muss Illustrator die Oberfläche Ihres Bildmaterials erweitern, indem er der Gesamtzahl Pixel hinzufügt Breite und Höhe Ihrer Formen, Pfade und sogar die leeren Räume. Dies kann jedoch nicht immer korrekt durchgeführt werden, da einige Objekte möglicherweise perfekt skaliert werden können, während andere durch das Dehnen und Hinzufügen von Pixeln beschädigt werden.
Da ich gerne durch Beispiele unterrichte, nehmen wir an, dass wir ein kleines Symbol haben, das mit einem erstellt wurde 48 x 48 px Basisraster, mit einem Allround 2 px Polsterung. Das Symbol wurde mithilfe eines pixelgenauen Workflows erstellt, bei dem jede Form perfekt an das darunterliegende Pixelraster angepasst wurde, es werden jedoch sowohl ungeradzahlige als auch geradzahlige Werte in den einzelnen Elementen verwendet.
Jetzt schalten wir das ein Pixelvorschau Modus (Ansicht> Pixelvorschau oder Alt-Control-Y) und lassen Sie uns die rechte untere Ecke des Begrenzungsrahmens des Symbols auswählen und diagonal nach außen ziehen 2 px.
Wie Sie sehen, ist es einigen Formen (den Textzeilen, dem inneren Fensterrahmen, der unteren Fensterbegrenzungslinie usw.) tatsächlich gelungen, zu skalieren, ohne vom Raster zu fallen, während andere nicht so gut waren (das Fenster kreisförmig) Schaltflächen, der Umriss des Symbols, der Bildlaufleiste usw.).
Das liegt daran, dass Illustrator beim Ziehen versucht hat, das hinzuzufügen 2 px Wert für jedes der ausgewählten Objekte, aber aufgrund der Anordnung und des Raums zwischen den einzelnen Formen konnte es nicht mithalten. Dies führte zu Formen, bei denen sowohl die Breite als auch die Höhe zugenommen haben, andere nur in der Breite (den Textzeilen), während einige überhaupt nicht vergrößert wurden (die vertikale Linie unter dem unteren horizontalen Trennzeichen)..
Die Sache, die wir im Hinterkopf behalten sollten, ist, dass wir tatsächlich den Änderungsprozess mit durchgemacht haben Pixelvorschau Modus an, wodurch wir ein genaues Zahlenwertinkrement sehen und anwenden konnten. Wenn wir denselben Vorgang wiederholen würden, diesmal jedoch im normalen Vorschaumodus, würden Sie sehen, dass die Ergebnisse ziemlich schmerzhaft sein würden.
Da ich an dieser Stelle hoffe, dass ich meinen Fall klargestellt habe, gehen wir weiter und schauen uns genauer an, wie ein Symbol mit Hilfe der Mächtigkeit richtig skaliert wird Rahmen Werkzeug.
Also verkleinere deine Icons, die du willst, junger Jedi. Nachdem Sie diesen kleinen Abschnitt gelesen haben, werden Sie ein Meister darin sein.
Ich muss ehrlich sein: Als ich mit dem Erstellen von Icons anfing, tat ich es im Wesentlichen mit verbundenen Augen, da ich nicht viel über die verschiedenen Aspekte des Prozesses wusste, insbesondere über die Größenänderung. Ich habe immer gute Arbeit geleistet, als ich die erste Größe erstellt habe, aber wenn es um die Größenänderung ging, sagen wir einfach, die Dinge wurden frustrierend, da die meisten von ihnen auseinanderfallen würden.
Wie Sie wahrscheinlich bereits vermutet hatten, musste ich sie manuell reparieren, was am Ende zu einem ziemlich zeitaufwändigen Prozess führte, der im Grunde die ganze Energie aus mir zog. Glücklicherweise lerne ich gerne aus meinen Fehlern, also begann ich mit der Erkundung und es dauerte nicht lange, bis ich herausfand, dass die Lösung vor mir lag: der Allmächtige Rahmen Werkzeug.
Wenn Sie das Tool noch nie verwendet haben, machen Sie sich keine Sorgen, seit wann Rahmen Werkzeug sind die Dinge ziemlich unkompliziert.
Zuerst müssen Sie das Objekt oder die Gruppe von Objekten auswählen, deren Größe Sie ändern möchten, und dann Rechtsklick und gehe zu Transformieren> Skalieren.
Illustrator öffnet ein kleines Fenster mit einer Reihe von Optionen.
Wie Sie im obigen Beispiel sehen können, werden wir mit zwei verschiedenen Skalierungsmethoden begrüßt.
Der erste ist Uniform was, wie der Name schon sagt, beide Formen skalieren wird Horizontal und Vertikal, was bedeutet, dass beide Pixel hinzugefügt werden Breite und Höhe Ihrer Auswahl.
Der zweite ist Nicht einheitlich, Damit können Sie Ihr individuell skalierenObjekt ist Breite und Höhe Verwenden Sie unterschiedliche Werte oder skalieren Sie auch nur einen von beiden. Nun würde ich diese spezielle Option nicht verwenden, wenn Sie die Größe eines Symbols ändern. Dies kann sich jedoch in Situationen als nützlich erweisen, in denen Sie das Symbol schnell anpassen möchten Breite oder Höhe eines Objekts mit einfachen Prozentsätzen.
Wir haben also über die zwei verschiedenen Optionen des Tools gesprochen. Die eigentliche Magie geschieht jedoch nur, wenn Sie wissen, welche Prozentsätze auf Ihre Objekte angewendet werden sollen.
Wie ich schon erwähnt habe, die Rahmen Das Tool ist ein wirklich mächtiger Verbündeter, aber nur, wenn Sie genau wissen, wie es verwendet wird, da nicht alle Prozentwerte zu einem scharf aussehenden Symbol führen. Glauben Sie mir, ich habe es auf die harte Tour gelernt.
Der Grund dafür liegt in der Breite und Höhe Werte der komponierenden Elemente des Symbols. Ja, wir sind wieder da. Wie ich bereits gesagt habe, verhalten sich ungerade Zahlen anders als gerade, wenn sie verdoppelt werden. Dasselbe gilt, wenn Sie sie mit Dezimalwerten wie 1,5 multiplizieren.
Dies ist wichtig, da wir bei der Größenänderung die richtigen Prozentsätze in Abhängigkeit von den Werten unserer Formen auswählen müssen, da es sich bei den Prozentsätzen tatsächlich um Multiplikatoren handelt. Glaub mir nicht Lassen Sie uns ein wenig darüber nachdenken, wie Illustrator sie aus mathematischer Sicht verwendet.
So wie ihr alle wisst, 100% ist 100 geteilt durch 100, was uns 1 gibt. Illustrator verwendet diesen Wert und multipliziert ihn mit dem Breite und Höhe Werte für jede ausgewählte Form. Wenn Sie also 1 mit etwas (außer 0) multiplizieren, erhalten Sie immer noch die gleiche Zahl. Dies ist nicht das beste Beispiel.
Aber wenn wir uns einen Wert wie 200% Welches ist 200 durch 100 geteilt, erhalten wir eine 2x Multiplikator, Dadurch wird die Pixelanzahl eines ausgewählten Objekts verdoppelt.
Auf der anderen Seite, wenn wir die Größe eines Symbols mithilfe von a ändern würden 50% Wert, der 50 geteilt durch 100 ist, so a 0,5-facher Multiplikator, Dadurch werden die Abmessungen des ausgewählten Objekts tatsächlich halbiert.
Der Trick besteht nun darin, zu wissen, welche Multiplikatoren zu verwenden sind, wenn es sich um Symbole handelt, die nur gerade Zahlenwerte haben, und solche, die sowohl gerade als auch ungerade Werte haben.
Wenn wir ein Symbol haben, das nur aus geraden Zahlen besteht, können Sie beliebige Prozentsätze anwenden, solange sie vorhanden sind 100% Inkremente von der Standardeinstellung 100% Wert. Also Multiplikatoren wie 200%, 300%, 400%¸ 500%, 600%… Du verstehst den Punkt. Das liegt daran, dass gerade Zahlen (2, 4, 6, 8) diese Multiplizierschritte immer in gerade Werte umwandeln (2 x 2 = 4, 2 x 3 = 6, 2 x 4 = 8, 2 x 5 = 10, 2 x 6 = 12 usw.).
Sie können auch Multiplikatoren wie verwenden 150%, 250%¸ 350%, 450%, usw., aber Sie sollten ihre Verwendung auf nur ein Mal beschränken, da diese Werte eine gerade Zahl in eine ungerade Zahl umwandeln.
Um zu verstehen warum, nehmen wir an, wir haben eine 20 x 20 px Quadrat.
Wir wollen es mit einem skalieren 150% Multiplikator.
Wenn wir es einmal verwenden, erhalten wir eine Form, die ist 30 x 30 px.
Verwenden Sie es zweimal und am Ende erhalten Sie eine 45 x 45 px ein.
Wenn wir eine verwenden würden 300% Multiplikator stattdessen wäre die resultierende Form 60 x 60 px.
Wenn Sie sich fragen, warum? 20 x 1,5 = 30 was sich wieder mit multiplizierte 150% (1,5) ist 45. Während 150% + 150% = 300%¸ Die Ergebnisse, wenn derselbe Multiplikator zweimal verwendet wird, verglichen mit seinem Mehrwert, sind ziemlich unterschiedlich, da 20 x 3 = 60.
Zu beachten ist auch, dass einige gerade Zahlen zu ungeraden Zahlen werden, auch wenn Sie die Multiplikatoren nur einmal anwenden, z. 2 x 1,5 = 3; 6 x 1,5 = 9; 2 × 2,5 = 5; 6 x 2,5 = 15; usw. während 4 x 1,5 = 6; 8 x 1,5 = 12; 4 x 2,5 = 10; 8 x 2,5 = 20; usw.
Abhängig von der Komplexität Ihrer Symbole möchten Sie vielleicht diese Art von Multiplikatoren ausprobieren. Sie sollten jedoch immer überprüfen, ob die Größe der Elemente so geändert wurde, wie Sie es wollten.
Nun, wenn es um Symbole geht, die sowohl gerade als auch ungerade sind Breite und Höhe Werte sollten Sie immer verwenden 200% Schrittschritte, also Werte wie 200%, 400%, 600%, 800%, usw., da auf diese Weise die Größe der Symbole genau so geändert wird, wie Sie es wünschen.
Verwenden Sie niemals die 50% Multiplikator, da dadurch jedes pixelgenaue Symbol zerstört wird, da das Schneiden ungerader Zahlen in die Hälfte zu Dezimalwerten führt, die aus dem Pixelraster herausschnappen.
Nun, da wir gesehen haben, welche Multiplikatoren je nach Fall am besten funktionieren, wollen wir ein schnelles Beispiel nehmen und sehen, wie ein Symbol von Anfang bis Ende skaliert wird.
Wir haben also dasselbe Symbol, das wir vor einigen Minuten als Beispiel verwendet haben, das, wie Sie wissen, sowohl seltsame als auch gerade Werte in seinen zusammengesetzten Formen hat. Das bedeutet, dass wir nur verwenden können 200% Schrittschritte bei der Entscheidung für den Multiplikatorwert, aber das ist völlig in Ordnung, da wir für dieses Beispiel die Größe unseres Vermögenswertes verdoppeln wollen 48 x 48 px zu 96 x 96 px.
Dazu muss ich einfach mein Symbol auswählen und dann Rechtsklick und gehe zu Transformieren> Skalieren. In wenigen Sekunden werde ich mit dem Kleinen begrüßt Rahmen Tool-Popup-Fenster, in dem ich mich entscheiden kann Uniform und eintreten 200 in das Wertfeld, das standardmäßig auf gesetzt ist 100%.
Sobald ich auf das klicke OK Klicken Sie auf die Schaltfläche, wird Illustrator die Berechnungen durchführen und die Größe des Symbols ändern, indem Sie die Pixelanzahl verdoppeln, sodass alles perfekt auf dem Pixelrahmen fixiert bleibt Pixelraster.
So einfach ist das.
Schneller Tipp: Auch wenn Illustrator normalerweise die Rechteck-Ecken und Maßstäbe und Effekte Wenn Sie die Optionen aktiviert haben, sollten Sie sie immer überprüfen, um sicherzustellen, dass alles gut läuft.
So wie du wahrscheinlich schon gesehen hast, das Rahmen Das Tool ist eine wirklich wertvolle Option, wenn es um die Größenänderung Ihrer Symbole geht. Wenn Sie wissen, wie und wann Sie Ihre Multiplikatoren einsetzen, sollten Sie in der Lage sein, Größenvariationen für Ihr Icon-Pack in kürzester Zeit zu erstellen.
Es gibt jedoch eine geringfügige Einschränkung beim Erstellen der Größenänderungen, die Sie beachten sollten, insbesondere wenn Sie Symbole mit kleinen Schritten erstellen möchten (z. B. 16 x 16 px; 24 x 24 px; 32 x 32 px; 48 x 48 Pixel; 64 x 64 Pixel; 72 x 72 Pixel; 96 x 96 Pixel; 128 x 128 Pixel; usw.).
Die Sache ist, um diese kleine Beule in der Größenvariation zu erhalten (z. B. 24 x 24 px; 48 x 48 px; 72 x 72 px; 96 x 96 px), müssen Sie die 150% Multiplikator (seit 16 x 1,5 = 24; 32 x 1,5 = 48; 48 x 1,5 = 72; 64 x 1,5 = 96; usw.), was, wie Sie wissen, Probleme verursachen kann, vor allem wenn Sie ungerade Zahlenwerte in Ihrem Icon haben Formen.
Das bedeutet, dass Sie wahrscheinlich hier und da einige Formen anpassen müssen, um die Symbole konsistent zu machen. Das ist bei einem kleinen Icon-Pack vielleicht nicht allzu schwer, aber wenn Sie an etwas Größerem arbeiten, sind Sie lange dabei.
Ein guter Weg, dies zu tun, wäre die erste zu erstellen 150% Größeninkrement-Symbol (z. B. 24 x 24 px), passen Sie es gegebenenfalls an und verwenden Sie dann 200% Schritte, um den Rest zu erhalten, wenn Sie können (48 x 48 px; 96 x 96 px).
Je nach den Anforderungen Ihres Projekts müssen Sie möglicherweise mit Ihren Symbolen basteln und nach der richtigen Lösung für Sie suchen. Ist es jedoch nicht das, was ein Designer an erster Stelle macht, um Probleme zu lösen?
Da haben Sie es: eine ausführliche Darstellung, wie Sie die Größe eines Symbols mit einer ziemlich einfachen Methode ändern sollten. Versuchen Sie wie immer, mit dem Tool herumzuspielen, nachdem Sie dieses Tutorial gelesen haben, und ich bin mir sicher, dass Sie in kürzester Zeit den Dreh raus haben werden.
Accentsconagua