Share
In diesem Tutorial möchte ich Ihnen einige Tricks zeigen, wie Sie beim Arbeiten mit dem flachen Designtrend in Adobe Illustrator klare Linien und Kanten erstellen. Einfache Ebenenstile und die Wiederverwendung von Grafikstilen zur Unterstützung Ihres Workflows sind am effizientesten. Daher sollten Sie in der Lage sein, innerhalb kürzester Zeit einen Satz zusammenpassender Symbole zu erstellen.
Beginnen wir mit dem Erstellen einer Art-Tafel 500 x 500 px. Da unsere Symbole eher modulartig sind und viele gerade Linien aufweisen, ist es am besten, mit einem Gitter zu arbeiten, um perfekte Pixelschärfe zu gewährleisten. Erstellen wir also ein Raster, das ist 1px und dann zeigen und Am Raster ausrichten wie unten beschrieben.
Achten Sie beim Erstellen Ihrer Symbole darauf, dass das Symbol selbst verwendet wird und wo es platziert wird. Für diese Symbole bleibe ich bei einer allgemeinen Größe von 128 x 12 px was in der Ikonenwelt ziemlich üblich ist. Da wir dem flachen Designtrend folgen, bleiben wir bei Grundfarben und scharfen 45º-Winkeln mit übertriebenen Schatten.
Ich werde das Drahtgitter dieser Symbole mit grundlegenden Formen erstellen und dann den Stil der Formen mit einer Handvoll anpassen Grafische Stile. Wählen Sie also zunächst die Abgerundetes Rechteckwerkzeug und ein Rechteck erstellen, das ist 20 x 80 px und schnappen Sie es auf der Kunsttafel.
Als nächstes wählen Sie die Ellipsenwerkzeug (L) und erstellen Sie mehrere konzentrische Kreise. Das erste ist 70 x 70 px, dann 55 x 55 px, dann 40 x 40 px, und schlussendlich 15 x 15 px. Ordne sie jetzt wie unten beschrieben an.
Wähle aus Rechteckwerkzeug (M) und zeichnen Sie einige, die die Hälfte der Formen bedecken, die wir gerade erstellt haben. Wir werden diese verwenden, um Formen abzuschneiden, die später zu Schattenbereichen werden. Die Höhe / Breite spielt keine Rolle, stellen Sie nur sicher, dass sie genau auf die Mitte der anderen Formen ausgerichtet sind. Wir erstellen auch einen Schattenwurf, zeichnen Sie also ein Quadrat und drehen Sie es 45º und platzieren Sie es so, dass die Kante der Diagonale auf den unteren Rand des äußersten Kreises und das untere abgerundete Rechteck trifft.
Verwendung der Pfadfinder Panel verwenden wir eine Kombination aus Vereinen, Minus Front, und Sich schneiden um diese Rechteckformen in unsere Schattenüberlagerungen zu ändern. Denken Sie bei der Verwendung dieser Werkzeuge daran, dass sie die Form beeinflusst, sodass Sie diese Objekte duplizieren müssen, um das gewünschte Ergebnis zu erzielen. In der Abbildung unten habe ich die Farbe Rot auf das Objekt angewendet und die weiße Ebene wird später unsere Schatten sein.
Wir müssen jetzt den Wurfschatten machen. Beginnen Sie mit dem Duplizieren des untersten Griffs und der größten Kreisformen Vereinen sie in einem Objekt. Dupliziere diese neue Form und drücke sie nach links 15px. Besuch Objekt> Überblenden> Überblendoptionen… und geben Sie genug Schritte ein, damit ein fließender Übergang entsteht (ich bin dabei geblieben 50), dann Machen Die Mischung. Jetzt Erweitern das Objekt und Vereinen sie bilden eine einzige Form. Vergrößern Sie die Form, um das zu aktivieren Direktauswahl-Tool (A) und wählen Sie die zusätzlichen Punkte aus, die nicht benötigt werden, und entfernen Sie sie. Achten Sie darauf, die Pfade zu schließen (Befehl + J) Sobald Sie fertig sind. Richten Sie das Objekt an der Rückseite aller anderen Formen aus, falls Sie dies noch nicht getan haben.
Da unsere Symbole nur "Sorta Flat" sind, lassen Sie uns einige Highlights hervorheben. Wählen Sie die Hauptelementformen (die roten Elemente) und duplizieren Sie sie zweimal. Verschieben Sie das oberste Duplikat mithilfe der Pfeile auf der Tastatur 1px. Die Richtung, in die Sie das oberste Element verschieben, hängt von der Richtung ab, in der die Farbe ist. Für die Form des unteren Griffs drückst du ihn nach links, für die innere runde Form drückst du ihn nach rechts in Richtung des roten Bereichs. Wählen Sie die zwei Duplikationen und verwenden Sie Minus Front eine Spur von Highlight verlassen. Sie können dies in der folgenden Abbildung grün anzeigen.
Mit unseren Hauptformen lassen wir sie stilisieren. Wählen Sie alle Elemente aus, aus denen die Lupe besteht, und drehen Sie sie 45º gegen den Uhrzeigersinn.
Wählen Sie nun alle Elemente aus, aus denen die Schatten bestehen sollen. Dies sind die weißen Teile am Griff und den äußeren Ringen sowie der Schattenwurf. Füllen Sie diese mit flachem Schwarz und lassen Sie die Opazität zu fünfzehn% und stellen Sie sicher, dass Sie eventuell vorhandene Ränder entfernen. Sobald das erledigt ist, gehe zu Fenster> Grafikstile und wenn dieses Fenster erscheint, klicken Sie auf die Schaltfläche Neu Elementschaltfläche unten rechts neben dem Papierkorbsymbol, um aus diesem Effekt einen Grafikstil zu erstellen.
Wählen Sie den Griffbereich aus und navigieren Sie zu Ihrem Aussehen (Fenster> Aussehen) und geben Sie die unten angezeigten Informationen ein. Die Grundfarbe ist eine flache graue Farbe. Dann fügen wir eine weitere Ebene hinzu, die mit einem Schwarz-Weiß-Verlauf gefüllt ist 45º mit einem Opazität von 25% und Mischmodus einstellen Überlagerung. Wenn Sie fertig sind, speichern Sie dies als Grafikstil auch.
Wählen Sie den untersten Kreis aus, und wir werden fast denselben Stil anwenden, nur verwenden wir einen helleren Grauton. Speichern Sie dies erneut als Grafikstil.
Wählen Sie den inneren Kreis aus und wenden Sie den gleichen helleren Stil an, den Sie gerade erstellt haben, und kehren Sie den Verlauf um, so dass er von hell nach dunkel ist.
Wählen Sie den innersten Kreis aus, der unsere Linse sein wird. Der gleiche Stil wird auch für diese Form verwendet, nur anstelle von Grau verwenden wir eine Akzentfarbe Blau. Stellen Sie sicher, dass Sie auch eine erstellen Grafikstil auch davon.
Zum Schluss werden wir unsere Highlights hinzufügen. Wählen Sie alle grünen Elemente aus und füllen Sie sie mit flachem Weiß Opazität bis zu 25%. Stellen Sie sicher, dass Sie dies als speichern Grafikstil auch. Der letzte Kreis auf der Form ist ein harter Höhepunkt, sodass wir ihn als weiß belassen 100%, Stellen Sie einfach sicher, und entfernen Sie die Grenze.
Lassen Sie uns die Kerben für unsere Zahnradform erstellen. Wähle aus Abgerundetes Rechteckwerkzeug und ein Rechteck erstellen, das ist 20 x 110 px und schnappen Sie es auf der Kunsttafel. Duplizieren Sie diese Form nun noch dreimal und drehen Sie sie um 45º Winkel, um eine Blütenform zu machen.
Als nächstes wählen Sie die Ellipsenwerkzeug (L) und erstellen Sie mehrere konzentrische Kreise. Das erste ist 90 x 90 px, dann 60 x 60 px, und schlussendlich 30 x 30 px. Ordne sie jetzt wie unten beschrieben an.
Wählen Sie die Blütenform und den untersten Kreis und Vereinen Sie. Wählen Sie dann den kleinsten Kreis aus und duplizieren Sie ihn. Wählen Sie nun einen der kleinen duplizierten Kreise und die größeren Formen und aus Minus Front ein Ganzes in der Mitte lassen.
Jetzt machen wir wieder Schatten. Erstellen Sie zunächst Rechtecke, die die Hälfte der Formen abdecken. Da wir die zusätzlichen Ausrüstungsenden haben, fügen wir diesen auch einige Schatten hinzu. Richten Sie die Ecken der Zahnradschatten an der Stelle aus, an der der Kreis auf das Zahnradende trifft.
Erstellen Sie nun den Schlagschatten. Duplizieren Sie die untere Zahnradform und stoßen Sie sie an 15px wie unser vorheriges Symbol. Mischung die zwei formen dann Erweitern und Vereinen Sie.
Erstellen Sie nun die Highlights. Denken Sie daran, auf die rote Farbe zu schieben
Zum Schluss drehen Sie die Formen 45º und wenden Sie sich an unsere Grafikstil von früher. Dieses Symbol ist relativ einfach. Wir verwenden also nur den dunkleren grauen Stil, um sicherzustellen, dass der Verlauf des inneren Kreises umgekehrt wird.
Unser Augensymbol verwendet viele Kreise. Wählen Sie also das aus Ellipsenwerkzeug (L) und erstellen Sie mehrere konzentrische Kreise. Das erste ist 120 x 120 px, dann 50 x 50 px, und schlussendlich 20 x 20 px. Ordne sie jetzt wie unten beschrieben an.
Wählen Sie den größten Kreis und wechseln Sie zu Ankerpunkt-Werkzeug konvertieren (Umschalttaste + C). Wählen Sie die beiden Punkte links und rechts aus und klicken Sie, um sie scharf zu stellen. Wählen Sie nun das Direktauswahl-Werkzeug (A) Schieben Sie den oberen gebogenen Anker nach unten 20px. Wiederholen Sie dies auch für den unteren Bereich, und schieben Sie ihn stattdessen nach oben.
Wählen Sie nun alle diese Formen zusammen aus und drehen Sie sie 45º im Uhrzeigersinn. Nachdem wir unsere Schatten und Lichter in Position gebracht haben, drehen wir sie zurück, damit sie in der richtigen Perspektive sind.
Wähle aus Ellipsenwerkzeug (L) und ein Oval erstellen, das ist 15 x 20 px und richten Sie es wie unten gezeigt aus.
Erstellen Sie die Schatten und Lichter wie zuvor. Teilen Sie die Formen mit Rechtecken in zwei Hälften und verwenden Sie die Pfadfinder Panel.
Wählen Sie noch einmal alle unsere Formen aus und drehen Sie sie zurück 45º, Dann wenden Sie unsere Grafikstile an. Wir verwenden unser hellstes Grau für den Hauptteil des Auges, das Blau mit der Neigung für die Iris und ein Dunkelgrau, das wir jetzt für die Pupille einführen.
Mit unserem Icon-Set sind wir halb fertig! Lassen Sie uns einen Chat erstellen, der Chat oder Kommentare darstellt. Mit dem Abgerundetes Rechteckwerkzeug Erstellen Sie ein Rechteck 80 x 75 px
Jetzt mit dem Rechteckwerkzeug (M) Erstellen Sie ein Rechteck 25 x 15 px Richten Sie ihn dann nach unten und aus 15px von rechts.
Mit dem Ellipsenwerkzeug (L) Erstellen Sie drei Kreise, die sind 15 x 15 px und richten Sie sie wie unten gezeigt auf die Mitte des abgerundeten Rechtecks aus.
Aktivieren Sie die Direktauswahl-Tool (A) Wählen Sie den unteren linken Punkt aus, aus dem sich das untere Rechteck zusammensetzt, und entfernen Sie es, um ein rechtwinkliges Dreieck zu bilden. Achten Sie darauf, den Pfad zu schließen, wenn Sie fertig sind.
Wählen Sie das abgerundete Rechteck und das Dreieck und Vereinen Sie machen eine volle Form. Sobald die Einheit vereint ist, duplizieren Sie diese Sprechblasenform, drehen Sie sie horizontal und bewegen Sie sie nach unten und nach rechts 15px unter den anderen Formen.
Wählen Sie wie beim Augensymbol alle Formen aus und drehen Sie sie 45º. Wir werden in diesem Winkel an den Schatten und Spitzlichtern arbeiten, damit sie beim Zurückdrehen richtig geworfen werden.
Wie in den vorherigen Symbolen erstellen wir scharfe Kanten, um Schatten und Lichter anzuzeigen. Sei dir deiner Schatten bewusst. Sie möchten die Illusion erzeugen, dass die Kreise einen wirklich langen Schatten über die Blase werfen und dass die obere Blase einen Schatten über die untere Blase wirft. Für die Schlagschatten der Kreise verwende ich einfach ein Rechteck, das dieselbe Höhe wie der Kreis hat und breit genug ist, um über die Blase zu passen, und dann den Überschuss entfernen.
Drehen Sie nun die Formen zurück und wenden Sie Ihre Grafikstile an. Die untere Blase wird unser dunkleres Grau sein, während die obere Blase unser helleres Grau ist und die Punkte unsere blauen Akzente sein sollen
Lass uns zu unserer Uhr weitergehen. Mit dem Ellipsenwerkzeug (L) Erstellen Sie mehrere konzentrische Kreise. Das erste ist 100 x 100 px, dann 75 x 75 px, und schlussendlich 10 x 10px. Ordne sie jetzt wie unten beschrieben an.
Jetzt erstellen wir die Uhrzeiger. Wähle aus Rechteckwerkzeug (M) Erstellen Sie ein Rechteck 10 x 30 px, ein anderes das ist 10 x 20px, und noch eines ist das 2 x 30 px. Richten Sie sie jetzt so aus, dass die Unterseite der Rechtecke auf die Mitte der Kreise trifft.
Wechseln Sie zu Werkzeug drehen (R) und wählen Sie das lange dünne Rechteck aus. Positionieren Sie den Mauszeiger über dem Mittelpunkt der Form, klicken Sie dann auf den Punkt und ziehen Sie ihn an den unteren Rand des Rechtecks. Stellen Sie dabei sicher, dass er ganz im Zentrum bleibt und am unteren Rand einrastet. Drehen Sie nun die Form 135º im Uhrzeigersinn. Wiederholen Sie diesen Schritt für das gekürzte Rechteckstück, und drehen Sie es nur gegen den Uhrzeigersinn.
Wähle den kleinsten Kreis in der Mitte und die lange dünne Hand und Vereinen sie zusammen und platzieren sie über den anderen Händen. Jetzt alle Formen auswählen und drehen 45º
Schneiden Sie die Formen wie zuvor in zwei Hälften und erstellen Sie unseren Schattenwurf sowie die Highlights. Für das Highlight jedoch gefiel mir die Idee, ein Highlight innerhalb des dunklen Bereichs zu haben, das auf den unteren Bereich fallen würde. Dies gibt ihm eine Dimension von Dimensionalität, die nicht so sein würde, wie wir es gemacht haben.
Drehen Sie die Formen zurück und wenden Sie Ihre an Grafische Stile. Das Gesicht ist hellgrau, der äußere Rand und Minuten- und Stundenzeiger werden unser dunkleres Grau sein, und der Sekundenzeiger wird unsere Akzentfarbe
Für unser letztes Symbol erstellen wir einen Kalender. Wähle aus Abgerundetes Rechteckwerkzeug und ein Rechteck erstellen, das ist 90 x 80 px.
Duplizieren Sie dieses abgerundete Rechteck und richten Sie es an der rechten unteren Ecke aus. Es gibt keine Punkte, an denen es nicht genau ausgerichtet ist, aber die Fangfunktion sollte Sie wissen lassen, wenn Sie sich in der Nähe befinden. Dort angekommen, schieben Sie das Duplikat nach oben und nach links 20px. Jetzt in der Pfadfinder Panel auswählen Teilen aus der Liste der Symbole am unteren Rand. Dann wechseln Sie zu Direktauswahl-Tool (A) und wählen Sie die äußere untere Form aus und entfernen Sie sie. Entfernen Sie dann die gekrümmte untere rechte Ecke, so dass Sie eine gerade Straße haben 45º Kante.
Wähle aus Rechteckwerkzeug (M) Erstellen Sie ein Rechteck 90 x 25 px und richten Sie es an der Oberseite der Form aus. Wählen Sie nach dem Duplizieren des unteren großen abgerundeten Rechtecks sowohl das obere gerade Rechteck als auch das abgerundete Rechteck aus und verwenden Sie Sich schneiden von dem Pfadfinder Panel.
Als nächstes erstellen Sie zwei Abgerundete Rechtecke das sind stark 15 x 30 px und die Ecken sind abgerundet genug, um eine Pillenform zu bilden. Richten Sie sie dann wie oben gezeigt an der Oberseite des Elements aus.
Wechseln Sie zu Schreibwerkzeug (T) und geben Sie eine Nummer ein. Jeden, den Sie wünschen, werde ich "9" verwenden, da es die erste ist, die mir in den Sinn kam. Als Schrift verwenden wir "Helvetica" mit einer Größe von 50px. Nein, gehe zu Objekt> Erweitern und konvertieren Sie den Typ in einen Pfad.
Wählen Sie alle Formen aus und drehen Sie sie 45º. Fügen Sie jetzt wie zuvor Ihre Schatten und Lichter hinzu. Denken Sie daran, dass die Falte, die wir in der unteren Ecke erstellt haben, einen Schatten wirft. Dazu erstellen wir einfach ein Rechteck, das die gleiche Höhe wie die Falte und hat Sich schneiden es aus einer Vervielfältigung des unteren Rechtecks.
Drehen Sie schließlich die Formen zurück und wenden Sie Ihre Grafikstile an. Das untere abgerundete Rechteck ist unser Hellgrau, die Falte ist ein flaches Weiß, die Pillenformen sind unser Dunkelgrau, das obere Rechteck ist unsere Akzentfarbe, und die Zahl ist die gleiche Dunkelgrau von unserer Pupille im Augensymbol, das wir erstellt haben.
Damit ist unser Icon-Set komplett. Ich habe einen flachen Hintergrund mit dunklem Grau hinzugefügt, um die Symbole hervorzuheben. Fühlen Sie sich frei, diese auf Ihrem Art Board zu platzieren.
Ich hoffe, ich konnte Ihnen zeigen, dass flache Icons zwar "flach" sind, aber nicht ohne Stil sein müssen. Mit welchen anderen Symbolen können Sie auftauchen?
Accentsconagua