Vom Bleistift zur Vektorgrafik: So entstand das Rylov-Maskottchen
Am Anfang stand eine Bleistiftskizze im Notizbuch, am Ende eine Figur, die als Logo, auf der Website und im Druck funktioniert. Ein Blick auf die Arbeitsschritte und auf Details, die man erst in der Vergrößerung sieht.
Dennis RylovWebdesigner in Paderborn
Auf dieser Website begegnet Ihnen immer wieder das Maskottchen: braune Haare, runde Brille, ein leicht skeptischer Blick. Die Figur ist nicht am Computer entstanden, sondern auf Papier. Hier zeige ich, wie aus der Skizze eine Vektorgrafik wurde und worauf ich dabei geachtet habe.
Die Skizze: Proportionen und Ausdruck
Am Anfang steht eine Bleistiftzeichnung im Notizbuch. Hier entscheide ich, was die Figur ausmacht: die Form der Haare, die runde Brille, Kleidung und Haltung. Am Bildschirm lässt sich das auch ausprobieren, auf Papier geht es aber schneller und ohne Ablenkung.
Die Reinzeichnung in Illustrator
In Adobe Illustrator wird aus der Skizze eine saubere Zeichnung aus Vektorpfaden. Jede Fläche bekommt eine eigene, geschlossene Form: Haare, Haut, Brille, Augen, Schatten. Beim Kopf-Logo sind es am Ende zwölf Ebenen mit 35 Flächen, klar benannt von „Hintergrund“ bis „Haare Konturen“.
Diese Ordnung klingt pedantisch, spart später aber Zeit. Soll die Brille eine andere Farbe bekommen oder der Schatten weicher werden, ändere ich genau eine Ebene und nichts sonst.
Farbe und Schatten
Für die Farbe gilt: so wenig wie möglich, so viel wie nötig. Haut und Haare haben je einen Grundton, eine hellere Fläche für das Licht und eine dunklere für den Schatten. Die Konturen sind kein Schwarz, sondern dasselbe Dunkelblau wie die Schrift auf dieser Website. Dadurch passt die Figur von selbst zum Rest des Auftritts.
Der weiße Rand macht ihn zum Sticker
Um den Kopf liegt ein breiter weißer Rand. Er trennt die Figur von jedem Hintergrund, ob hell, dunkel oder unruhig. Besonders deutlich wird das im Dark Mode dieser Website: Ohne Rand würde die dunkelblaue Kontur auf dem dunklen Hintergrund verschwinden. Mit Rand bleibt die Figur klar erkennbar und lässt sich außerdem als Aufkleber drucken.
Zwei Details, die man erst vergrößert sieht
Vor dem Export für die Website prüfe ich die Grafik in starker Vergrößerung. Dabei fallen Dinge auf, die in normaler Größe niemand bemerkt, auf einem großen Banner aber schon:
- Helle Haarlinien: Stoßen zwei Farbflächen genau Kante an Kante, kann zwischen ihnen beim Darstellen eine feine helle Linie aufblitzen. Die Lösung: Die untere Farbe reicht ein Stück unter die Kontur.
- Kleine Unebenheiten: Einzelne Ankerpunkte, die beim Zeichnen verrutscht sind, erzeugen winzige Dellen in einer Kurve. Ich ersetze sie durch eine saubere Rundung.
Warum eine Vektorgrafik?
Eine Vektorgrafik besteht aus berechneten Linien statt aus Pixeln. Sie bleibt in jeder Größe scharf, vom kleinen Profilbild bis zum Banner. Für die Website exportiere ich die Figur als SVG, für Social Media als PNG mit transparentem Hintergrund.
Wie ich bei Logos und Grafiken vorgehe, sehen Sie auf der Seite Grafikdesign. Mehr über mich lesen Sie unter Über mich.
