Eine Schritt-für-Schritt-Anleitung zum Entwerfen benutzerdefinierter Illustrationen ohne Zeichenkenntnisse

Ich sehe, dass viele Unternehmen heute Stockillustrationen oder Bilder verwenden. Obwohl diese Optionen billig sind, wird die Markenbotschaft verwässert, da die Optik nicht exklusiv für das Produkt ist.

In einer Welt, in der 74 Prozent der Social-Media- und B2B-Vermarkter visuelle Elemente in ihren Werbeaktionen verwenden, ist es entscheidend, wie Sie sich visuell von anderen abheben.

Wenn Ihre Marke erfolgreich ist, lernen die Menschen die visuelle Sprache, die mit Ihrer Marke verbunden ist. Sobald sie die gleichen Stock-Illustrationen in Verbindung mit einem anderen Produkt sehen, wird Ihre Markenidentität geschwächt.

Mit benutzerdefinierten Illustrationen können die Elemente der Identität einer Marke um eine gemeinsame Perspektive und Persönlichkeit herum verschmelzen. Sie kommunizieren auf intuitiver Ebene mit Kunden und helfen Marken, ihre Geschichte nachhaltig zu erzählen.

Viele Designer scheuen sich jedoch davor, als Illustrator zu arbeiten, weil sie befürchten, dass sie keine zeichnerischen Fähigkeiten haben. Wir sind hier, um Ihnen zu zeigen, wie jeder Designer wunderschöne Illustrationen entwickeln kann, ohne dass eine Zeichnung erforderlich ist.

Wir werden uns drei beliebte Illustrationsstile ansehen und sehr einfache Schritte anwenden, um Ihre eigene Grafik von Grund auf neu zu entwickeln. Sie können mitmachen und das Gelernte anwenden, um großartig aussehende Teile für Ihr nächstes Projekt zu erstellen.

Stellen Sie die berühmte Weltraumillustration nach.

Die Designerin und Illustratorin Nina Georgieva ist die Wegbereiterin hinter diesem berüchtigten Dribbble-Stück, und jetzt ist der Stil zu einem eigenen Trend geworden.

Wir lassen uns von Georgieva inspirieren und erstellen in wenigen einfachen Schritten unsere eigene Raumillustration.

Das bekommst du am Ende.

1. Beginnen Sie mit den Sternen.

Erstellen Sie mit dem „Stern-Werkzeug“ von Illustrator einen vierzackigen Stern. Dann machen Sie es zu 75 Prozent transparent.

Während Sie ausgewählt sind, duplizieren Sie es an Ort und Stelle, indem Sie Strg+C und dann Strg+F drücken.

Verkleinern Sie die Form vorne.

Als nächstes fügen Sie einen leuchtenden Effekt hinzu; wählen Sie die größere Form; und wenden Sie einen „Gaußschen Weichzeichner“-Effekt aus dem „Darstellung“-Bedienfeld an.

Schließlich können Sie Ihre Sternform im Bedienfeld „Symbole“ speichern, um sie später in der Komposition zu verwenden.

2. Erstellen Sie die Form der Wolke.

Stapeln Sie Rechtecke mit verschiedenen Breiten zusammen.

Führen Sie sie mit dem „Pathfinder“-Panel zusammen.

Geben Sie zum Schluss der gesamten Form einen hohen „Eckenradius“-Wert.

3. Machen Sie die Planetentextur aus den Wolken

Beginnen Sie mit der Wolkenform und erstellen Sie den Planetentextureffekt wie oben gezeigt.

Stapeln Sie viele Wolkenformen übereinander und stellen Sie sicher, dass Sie eine Reihe von nach außen und innen gerichteten Kurven haben, um ein wellenförmiges Muster zu erstellen.

4. Optimieren Sie die Textur.

Vereinfachen Sie das Wellenmuster, bevor Sie es auf die Planetenform anwenden.

Entfernen Sie zusätzliche Punkte auf einer Seite der Textur und glätten Sie sie.

5. Erstellen Sie einen texturierten Planeten.

Überlappen Sie das Wellenmuster mit einem Kreis und erstellen Sie eine Teilung, indem Sie die Option „Teilen“ im Bedienfeld „Pathfinder“ verwenden.

Löschen Sie die zusätzliche Form, die außerhalb des Kreises erstellt wurde, und erzeugen Sie einen Lichteffekt, indem Sie unterschiedliche Grauwerte auf jede Seite des Planeten anwenden.

6. Fügen Sie dem Planeten eine Atmosphäre hinzu.

Erstellen Sie zwei größere Kreise und fügen Sie sie mit Strg + X und dann Strg + B hinter dem Planeten ein.

Richten Sie sie richtig aus.

Fügen Sie den neuen Kreisen Transparenz und dem dritten Kreis einen Unschärfeeffekt hinzu (im Bedienfeld „Aussehen“).

Gruppieren (Strg+G) und speichern Sie das Ergebnis im Bedienfeld „Symbol“.

7. Duplizieren und färben Sie die Planeten.

Kopieren Sie mehrere Planetenformen aus dem Bedienfeld „Symbole“ und färben Sie sie mit zwei verschiedenen Farben für jede Seite neu.

Verwenden Sie das „Direktauswahl-Werkzeug (A)“ zum Auswählen und das „Pipettenwerkzeug (I)“, um eine Farbe auszuwählen und anzuwenden.

8. Skaliere und positioniere deine Planeten

Verschieben Sie die Planeten mit dem „Auswahlwerkzeug (V)“ in verschiedene Positionen und geben Sie ihnen verschiedene Größen, indem Sie an den weißen Ecken ziehen, die bei der Auswahl erscheinen (halten Sie die „Umschalt“-Taste für eine proportionale Skalierung gedrückt).

9. Fügen Sie die Ringe hinzu.

Zeichne ein paar Linienkreise um die Planeten, um die Ringe zu machen.

Um kleinere Planeten vor den Ringen einzufügen, wählen Sie sie aus und drücken Sie dann Strg+X (Ausschneiden) und Strg+F (Vorne einfügen).

10. Fügen Sie einige Wolken und Sterne am Himmel hinzu.

Kehren Sie zum Bedienfeld „Symbol“ zurück und ziehen Sie einige Wolken- und Sternformen per Drag-and-Drop.

Duplizieren, skalieren und positionieren Sie sie nach Belieben in Ihrem Raum.

Hier ist das Endergebnis.

Spielen Sie mit Maßstab, Position und Farben herum, um es wirklich zu Ihrem eigenen zu machen.

Fügen Sie etwas Typografie hinzu und voila, Sie haben einen neuen, angepassten Desktop-Hintergrund.

Erstellen Sie den Illustrationsstil des Toptal-Blogs neu

Der Toptal-Blog ist eine wertvolle Quelle für Erkenntnisse und Inspirationen, die von Top-Talenten auf der ganzen Welt erstellt wurden. Genau wie der, den Sie gerade lesen, enthalten die meisten Artikel Illustrationen zur Unterstützung des Inhalts. Wir verwenden einfache geometrische Formen und leuchtende Farben, um Objekte darzustellen.

Sehen wir uns an, wie Sie diesen Stil anwenden können, um eigene Lebensmittelillustrationen zu erstellen.

Das bekommst du am Ende.

1. Zeichne einen einfachen Braten.

Beginnen Sie zum Erstellen eines Bratens mit einem langen Rechteck und fügen Sie mit dem „Stiftwerkzeug (P)“ mehrere Punkte über die Kanten hinzu.

Passen Sie die Form an, indem Sie die Punkte mit dem „Direktauswahl-Werkzeug (A)“ verschieben.

2. Erstellen Sie den Mayonnaisebehälter.

Erstellen Sie drei Kreise mit abnehmender Größe, von hinten nach vorne.

Der äußere Kreis ist der Behälter, der mittlere (in Weiß) ist die Mayonnaise und der innere, kleinere Kreis (mit farbigem Strich) ist für den Lichteffekt.

Schneiden Sie den inneren Kreis in zwei Hälften und stellen Sie sicher, dass die „Kappe“ und die „Ecke“ aus dem „Strich“-Feld rund sind.

3. Ketchup und Senf zubereiten.

Duplizieren Sie die Mayo-Tasse, um Senf und Ketchup herzustellen.

Tragen Sie einfach verschiedene Farben auf die Sauce auf und zünden Sie sie an, wie oben vorgeschlagen.

4. Fügen Sie den wellenförmigen Salat hinzu.

Verfolgen Sie mit dem „Stiftwerkzeug (P)“ eine gerade Linie und fügen Sie mehrere Punkte hinzu.

Verteilen Sie ihren horizontalen Abstand vom Bedienfeld „Ausrichten“.

Ziehen Sie die Änderungspunkte nach unten und runden Sie jede Ecke maximal ab, bis sie vollständig glatt ist.

5. Erstellen Sie eine Brotscheibe.

Erstellen Sie ein langes Oval; Überlappen Sie es mit der Wellenform und erstellen Sie eine Teilung, indem Sie die Option „Teilen“ im Bedienfeld „Pathfinder“ verwenden.

Entfernen Sie die zusätzliche Form, die Sie mit dem Werkzeug „Teilen“ erhalten, und färben Sie dann die Brotscheibe neu.

6. Machen Sie das Burgerbrot.

Spiegeln Sie die Brotscheibe vertikal und fügen Sie der obersten Schicht einen Kipppunkt hinzu.

Runden Sie diese Kante ab, um ein glattes Burgerbrötchen zu erhalten.

7. Beenden Sie den Burger.

Den Salat grün färben.

Erstellen Sie dann verschiedene „Abgerundete Rechtecke“ für Fleisch, Käse und Tomaten, indem Sie jeweils braune, gelbe und rote Farben verwenden.

Bewegen Sie die Dinge herum, um Ihren Burger richtig zu schichten.

8. Machen Sie aus dem Burger einen Hot Dog.

Beginnen Sie mit Ihrer Burger-Illustration, entfernen Sie die Tomaten und den Käse, färben Sie den Salat in Mayo und Senf um und duplizieren Sie das untere Brot für einen symmetrischeren Hot Dog.

9. Entwerfen Sie die Pizzaform.

Beginnen Sie mit der obersten Schicht des Burgers, verschieben Sie die unteren Punkte nach unten und bringen Sie sie näher zusammen.

Duplizieren Sie die Dreiecksform, verkleinern Sie sie und machen Sie sie für eine käsige Basis gelb.

10. Fügen Sie die Tomatenformen hinzu.

Überlappen Sie einen großen roten Kreis mit kleineren inneren Kreisen und verwenden Sie die Option „Minus Front“ im Bedienfeld „Pathfinder“.

Legen Sie mehrere Tomatenscheiben mit unterschiedlichen Größen und Positionen auf die Pizzaform.

11. Erstellen Sie einige Fleischscheiben.

Zeichnen Sie mit dem „Stiftwerkzeug (P)“ eine organische braune Form, duplizieren Sie sie und skalieren Sie sie auf Ihrer Pizza.

12. Fügen Sie zusätzliche Beläge hinzu.

Fügen Sie kleinere, farbige, abgerundete Striche in leeren Räumen hinzu, um Ihre Pizzabeläge fertigzustellen.

13. Erstellen Sie den Strohhalm.

Stern mit einem langen weißen Rechteck.

Fügen Sie mit dem „Stiftwerkzeug (P)“ zwei Punkte hinzu und verschieben Sie die oberen Kanten, um den Strohhalm zu biegen.

Kopieren Sie den Mittelpunkt am rechten Rand und fügen Sie ihn ein. Wenden Sie dann einen roten Strich und keine Füllung darauf an.

Bewegen Sie die rote Linie in der Mitte des weißen Rechtecks.

14. Erstellen Sie die Getränkedosenform.

Zeichne ein achtseitiges Polygon; füge die Dose hinzu; bewege die oberen vier Punkte nach oben; und skaliere (S) die oberen und unteren Kanten nach außen, damit es mehr wie eine Dose aussieht.

Fügen Sie oben und unten abgerundete Rechtecke hinzu, um die Ränder zu erstellen.

15. Optimieren Sie die Dosenform und skalieren Sie den Strohhalm.

Bewegen Sie die Punkte, um die Formen zu optimieren, und skalieren Sie dann die Dose und den Strohhalm in vergleichbare Proportionen.

16. Beenden Sie mit dem Wellendesign auf der Dose.

Zeichnen Sie eine organische und wellige Form für das Design auf der Dose.

Erstellen Sie dann eine Teilung mit dem „Pathfinder“-Bedienfeld und löschen Sie die zusätzlichen äußeren Formen.

Hier ist das Endergebnis.

Erstellen Sie eine vom Spiel Monument Valley inspirierte Illustration nach

Monument Valley ist ein meistverkauftes Spiel, das von UsTwo Studio entwickelt wurde. Es hat Dutzende von Preisen gewonnen, darunter Apples bestes iPad-Spiel des Jahres 2014, und sein Illustrationsstil ist von Eschers wunderschönen geometrischen Kunstwerken inspiriert.

Jetzt lernen Sie, wie Sie auf einfache Weise denselben visuellen Stil erstellen, der dieses Spiel zu einem so großen Erfolg gemacht hat.

Das bekommst du am Ende.

Sie verwenden nur Ebenen und Würfel als Bausteine ​​für die gesamte Illustration.

Die Farbpalette umfasst vier Farben für Wasser, Gras, Holz und Gebäude – jeweils in drei Farbtönen, um natürliches Licht zu simulieren.

1. Erstellen Sie eine isometrische Ebene.

Beginnen Sie mit einem Quadrat und folgen Sie dann diesen drei Schritten, um eine isometrische Form zu erstellen. Achten Sie darauf, dass Sie diesen Vorgang jedes Mal wiederholen, wenn Sie eine andere isometrische Form benötigen.

Wir nennen es den „isometrischen Effekt“:

Gehen Sie zu Effekt > 3D > Extrudieren und Abschrägen. Wählen Sie „Isometrische Oberseite“ im Dropdown-Menü „Position“ – im angezeigten Optionsfeld. Setzen Sie „Extrude Depth“ unter der ersten Option „Extrude & Bevel“ auf Null.

Sie haben jetzt eine isometrische Ebene.

Um besser mit der Form herumzuspielen, gehen Sie zu Objekt > Darstellung erweitern.

Dadurch können Sie die Farbe der Ebene ändern und Punkte frei verschieben.

Wir nennen es den „Expand-Effekt“.

2. Verfolgen Sie die Flächen für die Insel.

Um die drei Flächen der Inselform zu erstellen, erstellen Sie ein Quadrat und zwei längliche Rechtecke.

Wiederholen Sie den „Isometrischen Effekt“ bei jedem.

Wenden Sie für Schritt zwei jeweils „Isometric Top“, „Isometric Left“ und „Isometric Right“ an.

3. Vervollständigen und färben Sie die Inselbasis.

Wenden Sie den „Erweitern-Effekt“ an und färben Sie jedes Gesicht mit verschiedenen Grüntönen, wobei der hellste immer oben liegt.

4. Erstellen Sie perspektivisch Würfelflächen.

Wenden Sie den „Isometrischen Effekt“ auf drei Quadrate an, mit isometrischen links, oben und rechts in Schritt zwei. Dies gibt Ihnen die drei Flächen, die Sie benötigen, um einen isometrischen Würfel zu erhalten.

Beachten Sie, dass jedes Objekt in Ihrer Illustration nur drei Flächen verwendet. Das ist das Schöne an der isometrischen Perspektive.

5. Erstellen Sie einen Würfel.

Lösen Sie die Formen mit dem „Erweitern-Effekt“, bringen Sie die Flächen zusammen und wenden Sie drei Grauschattierungen an, um die Beleuchtung zu simulieren.

Tipp: Der hellste Farbton ist immer oben; die dunkelste rechts; und der Mittelton nach links. Wenn Sie dies auf jede Form in Ihrer Illustration anwenden, wird ein Eindruck von natürlichem Licht erzeugt.

6. Starten Sie die Baumbasis.

Befolgen Sie die gleichen Schritte wie beim isometrischen Würfel, und verlängern Sie diesmal die linke und rechte Seite, bevor Sie das Ganze verbinden.

Tragen Sie dann drei Brauntöne auf, um Holz darzustellen.

7. Beende den Baum.

Verkleinern Sie die Baumrinde; einen Würfel duplizieren; und färben Sie seine Gesichter genau wie die Landform in Grün.

8. Verwenden Sie einen Würfel, um die Bausteine ​​zu erstellen

Duplizieren Sie einen Würfel und färben Sie ihn als Baumaterial rosa.

Spielen Sie mit der Waage; Bewegen Sie die unteren Punkte nach unten, um eine Turmbasis zu erstellen. und verkleinern Sie es, um eine Säule zu erstellen.

9. Bauen Sie die Türme zusammen.

Richten Sie die Turmbasis und den rosa Würfel aus.

Lassen Sie etwas Platz zwischen ihnen und positionieren Sie drei Säulen in dieser Lücke.

Stellen Sie für eine perfekte Ausrichtung sicher, dass Sie „An Punkt ausrichten“ und „Intelligente Hilfslinien“ in der Menüoption „Ansicht“ eingestellt haben.

10. Überbrücken Sie die Türme.

Wählen Sie den oberen und rechten Punkt einer oberen Ebene aus und fangen Sie Punkte mit der entsprechenden Ebene im Zwillingsturm.

Duplizieren Sie einfach eine Ebene auf der rechten Seite und ändern Sie deren Größe, um eine Kante für die Tower Bridge zu erstellen.

11. Erstellen Sie Treppen.

Kopieren Sie drei Gesichter von einem Turm und fügen Sie sie ein; Richten Sie die Kanten aus, um einen Block zu erstellen. und verschieben Sie dann die unteren Punkte, um eine Stufe mit einer Stufe zu erstellen.

Duplizieren und positionieren Sie die Schritte mehrmals.

12. Schließen Sie die Treppe.

Richten Sie die Punkte von der linken Seite aus, um die Lücken von der Treppe zu schließen.

13. Drehen Sie die Treppe um.

Wählen Sie Ihre fertige Treppe aus und verwenden Sie das „Reflexionswerkzeug (O)“, um einen zweiten Block zu erstellen, der nach links zeigt.

Stellen Sie sicher, dass Sie die Farben der linken und rechten Seite ändern, um den Lichteffekt zu respektieren – dunklere Schattierung nach rechts, mittlere Schattierung nach links und hellere Schattierung oben.

14. Verbinden Sie die Treppe.

Befestigen Sie einige Würfel an der Treppe, um Trittsteine ​​zu erstellen, und verbinden Sie sie mit den Türmen.

15. Erstellen Sie einen Wassertiefeneffekt.

Duplizieren und verkleinern Sie die hellblaue Fläche.

Platzieren Sie es an verschiedenen Positionen und fügen Sie einen noch dunkleren Blauton hinzu, um den Meerestiefeneffekt zu vollenden.

16. Beginnen Sie das Deck, indem Sie vorhandene Flugzeuge verwenden

Beginnen Sie wie bei der Treppe und der Turmbrücke mit vorhandenen Flächen, richten Sie dann die Punkte richtig aus, um die Form zu schließen, und schließen Sie sie mit braunen Holztönen ab.

17. Fügen Sie Säulen zum Deck hinzu.

Wählen Sie die Baumrinde aus, duplizieren Sie sie, verkleinern Sie sie und positionieren Sie sie, um die Deckpfeiler zu erstellen.

Hier ist das Endergebnis.

Sie können größere, dunkle Flecken auf dem Meer oder kleinere, farbige isometrische Quadrate auf der Inselebene hinzufügen, um Gras und Blumen zu simulieren.

Insgesamt haben Sie Spaß, bewegen Dinge und bauen einige coole Türme mit den einfachen Bausteinen, die Sie gerade gelernt haben.

Abschließend

Wie wir bei diesen drei Anleitungen gesehen haben, brauchen Sie nicht viel Zeichentalent, um gut aussehende Illustrationen zu erstellen.

Alles, was Sie beachten müssen, sind diese 3 Prinzipien:

• Beginnen Sie mit einer klaren Idee oder einem klaren Konzept – was stellen Sie dar?
• Lassen Sie sich von bestehenden Kunstwerken und Stilen inspirieren – stehlen Sie wie ein Künstler.
• Beobachten und übersetzen Sie komplexe Elemente in grundlegende geometrische Formen, mit denen Sie arbeiten können - halten Sie es einfach.

Viel Spaß beim Erstellen Ihrer eigenen Illustrationen und laden Sie Ihr neues Kunstwerk in Dribbble und anderswo im Internet hoch. Genießen!

• • •

Weiterführende Literatur im Toptal Design Blog:

• eCommerce UX – Best Practices im Überblick (mit Infografik)
• Die Bedeutung von Human-Centered Design im Produktdesign
• Die besten UX-Designer-Portfolios – inspirierende Fallstudien und Beispiele
• Heuristische Prinzipien für mobile Schnittstellen
• Antizipatorisches Design: Wie man magische Benutzererlebnisse schafft