Kombination von handgezeichneten und digitalen Illustrations Techniken

In einem Medium, das stark auf geometrische Formen und synthetische Texturen setzt, dient die handgezeichnete Illustration als hervorragende Möglichkeit, eine Website weniger künstlich und menschlicher wirken zu lassen. Es liegt ein ehrlicher, bescheidener Charme in den kleinen Unvollkommenheiten, die man in handgemachten Dingen findet, und die richtige Illustration kann Ihrem Design etwas verleihen, das so vielen anderen fehlt: ein Gefühl von Aufrichtigkeit. Das offensichtliche Hindernis bei der Integration handgezeichneter Illustrationen ist, dass nicht jeder Designer weiß, wie er sie erstellen und in seine Websites integrieren kann. Ich bin hier, um Ihnen meinen Prozess und einige hilfreiche Tricks, die ich unterwegs gelernt habe, zu teilen. Als kleine Einschränkung: Dies ist keine Lektion oder ein Tutorial im eigentlichen Sinne. Dies ist ein Leitfaden zu meinem persönlichen Prozess, den Sie nutzen können, um Ihre eigene Technik zu informieren. Die Idee ist nicht, einen Effekt nachzubilden, sondern zu inspirieren.

Was Sie brauchen

• Stifte (Extrafine Pilot-Stifte, wenn Sie verzweifelt sind, Micron-Stifte in verschiedenen Stärken, wenn Sie etwas Flexibilität wünschen)
• Bleistifte
• Gewöhnliches Druckerpapier
• Kopierpapier
• Drucker
• Scanner

Optional

• Aquarellpapier (Wenn Sie Ihre Zeichnungen mit Aquarellfarben und nicht digital einfärben)
• Aquarellfarben, Pinsel (für das Obige)
  Wenn Sie nicht mit Farben, Buntstiften oder Markern arbeiten können, bietet Bittbox ein großartiges Set von Max-Resolution-Aquarellpinseln für Photoshop an.
• Leuchttisch oder Zeichentisch

Für diesen Artikel beziehen wir uns auf eine kürzlich von mir entworfene Website namens Bomb Guts

Diese spezielle Illustration konzentriert sich auf den Hintergrund der Website. Anstatt einer großen Illustration besteht sie aus vielen kleinen Elementen, die gezeichnet, eingefärbt, gescannt und in Photoshop komponiert wurden. Bei komplexen Illustrationen wie dieser finde ich diese Methode sehr flexibel und fehlerverzeihend, da sie es ermöglicht, einzelne Elemente nach Belieben neu zu positionieren.

Großhandel, Einzelhandel, Kein Verkauf

Zuerst einmal: Sie brauchen eine Idee! Obwohl dies letztendlich projektspezifisch ist, kann ich Ihnen ein paar Richtlinien geben. Diese Art von Illustration, insbesondere mein Stil, eignet sich nicht sehr gut für sehr ernste Themen. Am besten halten Sie sich an das Lustige, Wilde, Seltsame und Leichtere.

Beginnen Sie, Ihre Idee auf billigem Druckerpapier mit Bleistift zu skizzieren. Legen Sie den Bereich fest, in dem die Zeichnung erscheinen soll (in Bezug auf Größe und Verhältnis zum Rest der Seite), und beginnen Sie, Ihre Elemente zu skizzieren. Auch wenn es nur allgemeine Formen oder die Richtung sind, in die sich die Augen des Benutzers bewegen sollen, ist es ein Anfang! Arbeiten Sie in Ebenen und füllen Sie langsam Ihren gewünschten Bereich aus.

Eine Lektion meines ehemaligen Zeichenlehrers ist hier im Bleistiftskizzenstadium sehr hilfreich. Er betonte oft die Verwendung von drei verschiedenen Ebenen des Elementgebrauchs in der Illustration mit einem alten Sprichwort: „Großhandel, Einzelhandel, kein Verkauf“. Lassen Sie mich das aufschlüsseln.

• Großhandel bezieht sich auf Elemente, die Sie in einer Illustration viele Male wiederholen, um visuelle Textur und ein Gefühl von Konsistenz zu erzeugen. Meistens sind es die einfachsten Formen in Ihrem Stück mit den wenigsten Details.
• Einzelhandel bezieht sich auf Objekte, die mehrmals in Ihrem Stück wiederholt werden, um das Auge des Benutzers durch die Illustration zu führen. Gut geeignet, um neue Formen oder Farben einzuführen.
• Kein Verkauf -Objekte werden sehr selten, typischerweise nur einmal verwendet.

Planen Sie beim Bleistiftskizzieren voraus und sortieren Sie Ihre Elemente in diese drei Seltenheitsgruppen ein. Dies erleichtert Entscheidungen beim Hinzufügen neuer Elementebenen. Wie Sie an Bomb Guts sehen können, verwende ich dazu tendenziell einfache geometrische Formen für meine häufigsten oder „Großhandels“-Elemente. Kreise, Pfeile und Linien sehen toll aus, wenn sie in unmittelbarer Nähe zueinander und in unterschiedlicher Größe wiederholt werden. Bei der Verteilung von Elementen, insbesondere auf der „Großhandels“-Ebene, ist es wichtig, das Prinzip der ungleichmäßigen Abstände zu beachten. Aus „Design Basics Index“ von Jim Krause,

„Variierte Messungen um Schwerpunkte erhöhen tendenziell das visuelle Interesse und die Energie des Stücks und vermitteln ein Gefühl von Kreativität.“

Einfach ausgedrückt: Stellen Sie sicher, dass die Abstände zwischen Ihren Objekten nicht alle gleichmäßig sind. Dies hilft, Bewegung und Vielfalt zu implizieren. In ähnlicher Weise stellen Sie sicher, dass Ihre Objekte nicht alle auf derselben Linie enden. Dies lässt eine Komposition kastenartig, statisch und ehrlich gesagt ziemlich langweilig wirken. Der Negativraum zwischen Objekten wird weitaus weniger interessant, wenn er zu gleichmäßig wird.

Was Ihre „Einzelhandels“- und „Kein Verkauf“-Elemente betrifft, so ist es am besten, zu versuchen, sie mit Ihrem Thema in Beziehung zu setzen. Machen Sie sie besonders! Versuchen Sie, neue Farben, Formen und Detailstufen einzuführen. Verwenden Sie diese Elemente, um die Aufmerksamkeit des Benutzers zu lenken und ihn zu wichtigen Bereichen auf der Seite zu führen.

Der einfache Teil

Ich werde zusammen mit Ihnen einige Stücke aus jedem Abschnitt erstellen, um Beispiele zu geben. Beginnen wir mit den „Großhandels“- und „Einzelhandels“-Elementen.

Das ist ziemlich einfache Sache. Anstatt direkt von Ihrer Zeichnung abzuleiten, sollten Sie auf dem von Ihnen gewählten Papier vollständig isolierte Objekte erstellen. Was das Papier betrifft, hängt alles davon ab, wie Sie Ihre Arbeit einfärben möchten. Buntstifte funktionieren gut auf Druckerpapier, Marker funktionieren hervorragend auf Bristol- oder Kopierpapier, wenn Sie sanft einfärben, und Aquarellfarben funktionieren am besten auf Aquarellpapier. Ich war schon immer ein Fan von Strathmore-Papieren, aber Canson ist auch eine großartige Marke.

Tinte ist offensichtlich weniger fehlerverzeihend als Bleistift, also nehmen Sie sich Zeit und konzentrieren Sie sich. Beobachten Sie die Spitze Ihres Stiftes und wohin er als nächstes gehen soll. Eine kleine Unvollkommenheit ist eine großartige Sache, aber wenn Ihre Formen unkenntlich schief werden, können Sie gerne einen einfachen Satz von Formen in Photoshop oder Illustrator erstellen, um sie zu überzeichnen. Hier sind Ihr Zeichentisch oder Kopierpapier nützlich.

Auch wenn Sie diese Objekte letztendlich digital in Photoshop wiederholen werden, ist es am besten, mehrere physische Kopien von jeder zu erstellen. Dies ermöglicht geringfügige Unterschiede, verschiedene Strichstärken und ermöglicht es Ihnen, mit mehreren Farben zu experimentieren, bevor Sie Photoshop-Einstellungsebenen bearbeiten müssen.

Färben Sie Ihre Elemente nach Belieben ein, schneiden Sie sie mit einem Skalpell aus und legen Sie sie beiseite.

Ich ziehe es vor, meine Elemente von Hand auszuschneiden, wegen der unvollkommenen Kanten, die das hinterlässt. Wenn Sie sich unwohl fühlen oder zu ungeduldig sind, ein Messer zu benutzen, können Sie Ihre Bilder physisch ungeschnitten lassen und sie später vollständig digital extrahieren.

Als nächstes kommen die alles entscheidenden „Kein Verkauf“-Elemente. Diese sind ganz besonders, da sie die Augen des Benutzers fesseln werden. In Fällen wie Bomb Guts können sie sogar verwendet werden, um Aufmerksamkeit auf wichtige Teile des Layouts zu lenken, wie z. B. die Navigation oder die Produktbeschreibungen. Versuchen Sie, völlig neue Formen und Farben einzubringen, damit diese Elemente hervorstechen. Ebenfalls äußerst hilfreich ist die Verwendung von zusätzlicher Detailgenauigkeit und variabler Strichstärke, um Tiefe zu erzeugen. Mit diesen Elementen versuchen Sie, den Geist der Website innerhalb eines einzelnen Objekts einzufangen. Ich erstelle gerne Charaktere oder Maskottchen aus diesen Elementen. Es gibt der Stimme der Website ein Gesicht und hilft den Benutzern, sich mit dem Design zu identifizieren.

Das Erstellen von herausragenden Elementen als Maskottchen verleiht Ihrer Website viel Persönlichkeit

Was die Produktion angeht: wie zuvor. Skizzieren, Tuschen, Einfärben, Ausschneiden. Nehmen Sie es nur extra langsam: Dies sollten Ihre poliertesten Elemente sein.

Scannen

Ordnen Sie so viele Ihrer Bilder, wie bequem auf das Scannerbett passen, und scannen Sie sie in Photoshop ein. Ihre Ergebnisse sind möglicherweise sauber und leicht mit etwas so Einfachem wie dem Zauberstab zu extrahieren, aber manchmal erfordert es etwas Aufwand. Hier sind einige Schritte, die bei der Extraktion und Nachbearbeitung einzelner Elemente helfen.

Kopieren Sie Ihre Hintergrundebene. Wir arbeiten ausschließlich mit dieser Kopie und lassen die Originalebene unberührt, falls Sie später darauf zurückgreifen müssen.

Wenden Sie als Nächstes eine Ebenen-Einstellungsebene an, um den Kontrast zu erhöhen. Dies ist ziemlich bildspezifisch, aber Sie möchten die meisten Ihrer Grautöne eliminieren und sie näher an Schwarz oder Weiß bringen, ohne die Farbe Ihres Elements auszubrennen. Trennen Sie als Nächstes jedes Objekt in Ihrem Dokument mit den Auswahl- oder Lasso-Werkzeugen in seine eigenen Ebenen.

Bei der Extraktion Ihrer Objekte aus dem Hintergrund stehen Ihnen viele Werkzeuge zur Verfügung. Dinge wie selektive Farbe oder der Zauberstab können gut funktionieren, wenn Sie sehr deutliche Unterschiede zwischen den Tönen in Ihrem Dokument haben, können aber auch destruktiv sein und unklar darüber, was sie auswählen und was nicht. Ich verwende lieber Ebenenmasken. Im Gegensatz zum Radieren ist es nicht destruktiv und Sie haben viel Kontrolle darüber, welche Pixel Sie auswählen und welche nicht. Sie malen im Wesentlichen, was Sie auf der Ebene sichtbar haben möchten.

Durch Drücken der Schrägstrich-Taste innerhalb einer Ebenenmaske wird ein spezieller visueller Modus angezeigt, der unsichtbar gemachte Bereiche mit einer roten Überlagerung hervorhebt.

Es ist in Ordnung, ein wenig oder viel Papier um die Kanten Ihres Elements zu lassen. Es betont die handgemachte Natur des Projekts und verleiht ihm ein etwas stärkeres „Ausgeschnitten“-Gefühl. Sobald es extrahiert ist, können Sie die Sättigung erhöhen, um dem Farbverblassen entgegenzuwirken, das beim Scannen auftritt. Schärfen Sie schließlich die Ebene mit dem Filter „Scharfzeichnen“. Verwenden Sie einen niedrigen Pixelradius von 0,8 oder 1,0 Pixeln und eine Stärke zwischen 50 und 70 Prozent.

Ein wenig Polieren bewirkt Wunder. Sieht gut aus, großer Kerl!

Wiederholen Sie diesen Vorgang für jedes Ihrer Elemente und variieren Sie Anpassungen wie Sättigung und Schärfe, um den Bedürfnissen jedes Objekts gerecht zu werden.

Anordnung

Eine Strategie, die einigen Leuten hilft, ist, ihre Bleistiftskizze zu scannen und sie mit 60% Deckkraft über ihr Design zu legen, um ihnen zu helfen, Objekte schneller zu platzieren.

Sobald dies alles erledigt ist, öffnen Sie Ihr Seitendesign, kopieren Sie Ihre Elemente hinein und beginnen Sie, sie so anzuordnen, wie Sie es in Ihrer Bleistiftskizze getan haben, wobei Sie die Prinzipien des ungleichmäßigen Abstands berücksichtigen und darauf achten, wo die Objekte enden. Wenn Sie mit der Anordnung dieser Elemente fertig sind, nehmen Sie letzte Schliffarbeiten vor, insbesondere bei der Sättigung. Wenn Sie feststellen, dass einige Bereiche nicht voll genug sind, drucken Sie einen Screenshot des Bereichs aus und beginnen Sie, mehr Ihrer „Großhandels“-Elemente zu skizzieren.

Alles fertig! Ich hoffe, dies inspiriert Sie, mehr handgezeichnete Elemente in Ihre eigene Arbeit zu integrieren. Wenn Sie Fragen haben, können Sie mich gerne unter [email protected] kontaktieren.