Erstellen Sie einfache Abbildungen für das Web

Sep 14, 2025

wie man

Ich setzte mich, spielte etwas Musik, dügte die Lichter und öffnete meinen Laptop. Ich hatte viel zu tun. In der Bemühung, Inspiration zu beschwören, habe ich angefangen zu zeichnen Doodle Art. Zeilen von einer Ecke des Bildschirms zum anderen, als ich ein Kometenformular sah. "Hmm", mein Gehirn startete langsam, "was ist, wenn ich sie verbinde und einige Planeten hinzufügen?"

Ein paar Stunden später hatte ich meine beliebteste Dribbble-Illustration. Ich erinnere mich immer noch kaum daran, wie es passiert ist, aber nachdem er durch mein Gehirn gräbt, entdeckte ich meinen inneren Algorithmus, um eine Illustration zu schaffen - nicht nur dieses, sondern auch andere, die ich getan habe. Es ist lustig, ich erwartete, dass es komplexer ist. Naja…

Illustrationsstil

Bevor ich anfange an einer Illustration zu arbeiten, sorge ich sicher, dass ich seinen Zweck und den Kontext verstehe, wo er leben wird. Ist das In-App oder Website oder Wallpaper? Wird es Text darauf geben, und wird es sich in einer arbeitsreichen Umgebung befinden? Soll es eine Aktion symbolisieren, oder ist es nur da, um eine bestimmte Atmosphäre abzugeben?

Wenn die Illustration eine klare Idee weiterleiten oder ein bestimmtes Objekt oder eine bestimmte Aktion symbolisieren soll, werde ich mich für eine einfache Ausführung entscheiden, wo sich die gesamte Aufmerksamkeit auf den wichtigen Teil konzentriert. Wenn ich jedoch speziell für eine "stille" Hintergrundillustration ging, wähle ich einen musterähnlichen Ansatz oder sorgt dafür, dass es keine offensichtlichen aufmerksamkeitsstarken Elemente gibt, um die Möglichkeit zu minimieren, dass die Menschen über die Interpretation der Menschen minimiert werden . Für In-App-Illustrationen versuche ich, die Dinge zahm zu halten, um die Entsorgung der Aufmerksamkeit von der Funktionalität zu vermeiden.

Ästhetische Regeln

Mein Gehirn liebt es, all diese seltsamen Regeln zu erstellen. Sie sind wie lächerliche Herausforderungen, die ich nicht ertragen kann, um weiterzumachen: Was wäre, wenn ich einen Mensch nur mit Kreisen nehme? Was ist, wenn ich einen Sonnenuntergang mit nur einer Farbe veranschaulicht?

Geometrische Regeln, logische Fortschritte, Symmetrie. Es ist etwas sehr ansprechendes, strikte mathematische Regeln für die Kunst zu haben. Es fühlt sich an, als fühlt sich an wie Reverse-Engineering-Magie; Es streift das mystische Element in der Kunst, so dass es fast so ist, als würde man die Wissenschaft dahinter enthüllen.

Komplexe Abbildung; einfache Farbpalette.

A city illustration with a complex level of detail, which has been combined with a simple, analogous colour palette — Eine Stadtillustration mit einem komplexen Maß an Detail, das mit einer einfachen, analogen Farbpalette kombiniert wurde (Bildkredite: Nina Geometriva)

Wie es sich herausstellt, ist mein Gehirn ziemlich faul, wenn es darum geht, Farbe zu wählen, also hat es zwei allgemeine Arten von Farbpaletten, von denen er wählt: einen für komplexe Illustrationen; ein anderer für einfache.

Komplexe Illustrationen verfügen über einen hohen Granularitätsniveau mit vielen Formen / Objekten und viel Details. Diese sind in der Regel musterartig von Natur und haben keinen klaren Fokuspunkt. Mein Gehirn hat entschieden, dass diese Arten von Illustrationen gut mit monochromatischen oder analogen Farbpaletten funktionieren. Oder in weiterer Bedingungen - weniger Farben und weniger Farbkontrast.

All dies läuft bis zum visuellen Gleichgewicht; Wenn die Formen verrückt sind, sollten die Farben fad sein. Eine Ausnahme ist in einem Fall, in dem ich einem bestimmten Gegenstand dem Schwerpunkt desjenigen, der sonst nicht auffallen würde. Dies kann durch Verwendung einer äußerst kontrastierenden Farbe erreicht werden, während alles andere monochromatisch und zahmelt. Der perfekte visuelle Gleichgewicht ist irgendwo zwischen Überstimulation (laute Farben, komplexe Formen, viel Details, alles schreien in Ihrem Gesicht) und der Unterverteinung (der schlechte Art von minimalen, langweiligen, nichts Neuem oder interessantem Weg).

Monochromatische Paletten

Analogous or monochrome palettes work effectively when there is a visual progression or repetition of elements — Analoge oder monochrome Paletten funktionieren effektiv, wenn ein visuelles Fortschritt oder Wiederholung von Elementen besteht (Bildkredite: Nina Geometriva)

Eine monochromatische Farbpalette besteht aus den Farbtönen oder Tönen einer Farbe. Tönungen passieren, wenn eine Farbe schrittweise mit Weiß gemischt wird; Schatten passieren, wenn es mit schwarzem vermischt ist. Ein Thema, das ich immer mit monochromatischen Paletten hatte, ist, dass Tönungen und Farbtöne progressiv die Vibranie verlieren, da sich aufgrund der Natur des Mischens einer Farbe mit weißem oder schwarzem Mischen, beide haben Null-Prozent-Sättigung.

Um diesen allmählichen Dumpf zu vermeiden, benutze ich einen einfachen Betrug: Sowie weiß oder Schwarz hinzufügte, verschiebe ich den Farbton progressiv und ein bisschen. Dies ist im Wesentlichen eine subtile analoge Palette anstelle einer monochromatischen Palette. Wenn ich zum Beispiel rote monochromatische Farbtöne schaffen möchte, würde ich den Farbton in Richtung Orange verschieben. Wenn ich rote monochromatische Farbtöne erstellen möchte, würde ich den Farbton in Richtung Magenta schalten, da es dunkler ist. Wenn ich leichtere Töne von Blau bekommen möchte, wechsle ich in Richtung Cyan; Für dunkle Blautöne verlagerte ich mich in die andere Richtung, in Richtung Purpur.

Dies führt zu einer Palette, die sich noch etwas monochromatisch anfühlt, ist jedoch viel lebendiger und hat auf jeden Fall treten. Da ich das entdeckte, habe ich nie wieder eine echte monochromatische Palette erstellt.

Einfache Illustration; Komplexe Farbpalette.

Illustrationen mit geringer Komplexität haben in der Regel einen klaren Fokuspunkt und eine Objekthierarchie. Die Formen neigen dazu, unkomplizierter zu sein, sodass die Farbauswahl wilder sein können. Ich denke dabei hochrangige Farben jeglicher Art - komplementär, triadisch, tetradisch - solange es eine auffällige, anregende Palette ist.

Es gibt ein ganzes Universum zwischen dem, was ich als komplexe und einfache Illustrationen bezeichnet habe. Mein Gehirn ist jedoch nicht übermäßig mit all dem Spektrum besorgt, das es lieber als komplex oder einfach beschriften würde.

Kontrastreiche Farbpaletten sind nicht so einfach, wie die entgegengesetzten Farben auf einem Farbrad abzuwählen. Das Farbrad ist ein großartiger Ausgangspunkt, aber es ist keineswegs das Ende des Prozesses. Wenn Sie beispielsweise eine gute orange und blaue Kombination auswählen, achten Sie auf ein paar Dinge, die auf ein paar Dinge achten: wahrgenommene Luminanz und wie Akzentfarben mit Standardfarben funktionieren.

Wahrgenommene Leuchtdichte.

Wenn beide Farben die gleiche wahrgenommene Luminanz haben, findet das Gehirn es schwierig, die Grenze zwischen ihnen zu unterscheiden - also fühlt sich das Bild unwohl anfühlt. Es sei denn, die Farben sollen sich nie berühren sollen, es lohnt sich, sicherzustellen, dass sie nicht die gleiche wahrgenommene Leuchtdichte haben.

Oh, und falls Sie neugierig sind, warum ich das Wort "wahrgenommen" benutze, schauen Sie den Helmholtz-Kohlrausch-Effekt auf, der demonstriert, dass Farben mit derselben Luminanz, um unterschiedliche Werte wahrzunehmen können. Da Orange eine höhere wahrgenommene Leuchtdichte als blau hat, ist es leicht, die Ungleichheit zwischen den beiden Farben mit einer leichteren Orange und einem dunkleren Blau weiter zu erhöhen.

Akzent gegen Standardfarben

An illustration for the Zopim homepage. Blue shades are dominant, with orange providing the accents — Eine Abbildung für die Zopim-Homepage. Blaue Farbtöne sind dominant, mit Orange, die den Akzenten bieten (Bildkredite: Nina Geometriva)

Wenn die Verwendung jeder Farbe stark anders ist, passt ich die Farbwerte entsprechend an. Mutiger mit Akzentfarben und Spielen mit den Standardfarben ist mein Go-to-Ansatz.

Im orangeblauen Beispiel oben, würde ich blau als beruhigende Farbe verwenden, um größere Bereiche aufzufüllen, für Hintergründe und große Elemente, und einige wilde Orange für Knöpfe, Symbole und andere kleine Elemente. Im Rahmen der Illustration hätte ich blaue Farbtöne als Basis und wieder orange als Akzent - vielleicht, um ein interessantes Detail oder ein wichtiges Element zu betonen.

Visual Balance Check.

Welche Illustration auch immer Sie mit den oben genannten Guides enden, stellen Sie sicher, dass Sie einen Schritt zurücknehmen, und prüfen Sie, ob alles zusammen sinnvoll ist. Es gibt so viele Ausnahmen von Regeln in der Illustration, dass es unmöglich ist, alle Kombinationen aufzulisten, die eine erstaunliche Illustration geboren haben. Versuchen Sie es immer, Dinge auszuprobieren, die interessant erscheinen, und wenn Sie etwas überrascht, stellen Sie sicher, dass Sie es verstehen, damit Sie Ihre Intuition weiter verbessern können.

Dieser Artikel erschien ursprünglich in Netzmagazin. Ausgabe 286; Kaufen Sie es hier. Schnitte

Zum Thema passende Artikel

7 Webdesign Dos und Don'ts
6 der besten freiberuflichen Portfolios von 2016
Die 6 besten Photoshop-Tools für Webdesigner

Erstellen Sie einfache Abbildungen für das Web

Illustrationsstil

Ästhetische Regeln

Komplexe Abbildung; einfache Farbpalette.

Monochromatische Paletten

Einfache Illustration; Komplexe Farbpalette.

Wahrgenommene Leuchtdichte.

Akzent gegen Standardfarben

Visual Balance Check.

wie man - Die beliebtesten Artikel

Wie man 3D-Gras erstellt

Ändern der Schriftart in Ihrem Twitter BIO

Lernen Sie Laub mit X-Particles

Umzug zwischen Daz Studio und Zbrush

13 Tipps für die Erstellung einer VR-Gaming-Welt

So malen Sie ein atmosphärisches Porträt in Photoshop

Die Pro-Anleitung zur Erstellung von 3D-Texturen

Prototyp Eine Floating-Aktionstaste in Pixate

Kategorien