Opens in a new tab
Design-Portfolio

Marco Keller

Angefangen hat alles mit einer kleinen Lumix-Kamera. Als ich zu streamen begann und kein Geld für professionelle Grafiken hatte, habe ich Logos, Intros und Overlays einfach selbst gebaut, zuerst in GIMP. Daraus ist eine echte Leidenschaft geworden: eine Idee im Kopf haben und sie Schritt für Schritt sichtbar machen.
Heute arbeite ich mit Photoshop, Illustrator, Lightroom, InDesign, After Effects, Premiere Pro und DaVinci Resolve.
Portfolio als PDF
Marco Keller im Park
01

Social Branding

Illustrator

Mein eigenes Logo sollte nicht nur eine Marke zeigen, sondern auch etwas über mich erzählen. Der Totenkopf mit Hut steht für meine Piratenwelt, die Flügel greifen mein Papageien-Emote aus dem Stream auf und die beiden Feuerformen stehen für Seelen.

Das erste Logo war sehr detailreich und in kleinen Größen schwer einsetzbar. Bei der Überarbeitung habe ich die Grundidee behalten und die Formensprache vereinfacht. Eine runde Kurzvariante sorgt für Wiedererkennung im kleinen Format, Farbvarianten trennen Kanäle und Themen, ohne die gemeinsame Identität zu verlieren.

Piraten-Logo
Logo
Rundes Kurzlogo
Kurzvariante
YouTube-Banner
Youtube-Banner
02

Stream Overlays

Illustrator

Overlays sollen mehr als gut aussehen: Zuschauer nehmen Informationen über Bilder schneller auf und erinnern sich leichter an eine Marke. Statt Standard-Alerts habe ich eigene Icons entwickelt. Bei einem neuen Follow erscheint zum Beispiel ein Schiff, ganz nach dem Motto „Willkommen an Bord“.

Die neue Version ist bewusster gestaltet, mit klarer Hierarchie, Abständen und Lesbarkeit. Die Alerts sind minimalistischer und fahren von unten ins Bild, die Aktivitäten-Leiste gibt es zusätzlich als Wintervariante.

Offline-Banner
Offline-Banner
Startszene
Startszene
Endszene
Endszene
Follow-Alert
New Follow
Subscriber-Alert
New Subscriber
Raid-Alert
New Raid
Erste Overlay-Generation
Zum Vergleich: erste Version
03

Autogrammkarte

InDesign

Bewusst schlicht: Schriftzug und „Danke für deinen Support!“ liegen auf einem schwarzen Balken über einem roten Farbverlauf. Der Balken endet nicht an der Kante, sondern läuft gedanklich über die Rückseite weiter, mit abgerundetem Anfang und Ende.

Damit das auf beiden Seiten exakt passt, habe ich mit einem eigenen Raster aus Hilfslinien gearbeitet.

Vorderseite der Autogrammkarte
Vorderseite
Rückseite der Autogrammkarte
Rückseite
04

Animationen

After Effects

Bei meinen Stinger-Transitions wird der Übergang selbst zum Gestaltungselement. Balken fahren aus einer Ecke ins Bild, das Logo erscheint und skaliert, bevor die Balken den neuen Screen freigeben.

Für eine zweite Variante habe ich mit Track Mattes gearbeitet: Ein Kreis maskiert das Logo, zurück bleibt ein Ring, der sich öffnet und den neuen Screen zeigt. Stinger und Track Matte liegen nebeneinander in einer 3840 Pixel breiten Komposition, die OBS direkt auswertet.

Transition, Balken fahren ein
in animation
Transition, Logo im Vollbild
Logo
Transition, Balken fahren aus
Out animation
After-Effects-Zeitleiste der Track-Matte-Transition
Aufbau in After Effects
05

Thumbnails

Komposition

Ein Thumbnail muss auch winzig sofort verstanden werden. Für ein Video zum Cryengine-Update habe ich die Figur aus dem Ausgangsbild freigestellt, mit dem Titel kombiniert und zwei Farbvarianten gebaut. Beim Dark-and-Darker-Motiv ragt der Arm eines Charakters durch den Titel. Damit der Text lesbar bleibt, habe ich dort nur die weiße Kontur stehen lassen.

Beim Streamer.bot-Thumbnail sorgt ein echtes Gesicht für persönlichen Bezug. Lichtstrahlen und Flammen greifen die Logofarben auf und halten das Bild zusammen.

Thumbnail Cryengine-Update, grüne Variante
Variante Grün
Thumbnail Cryengine-Update, rote Variante
Variante Rot
Ausgangsbild
Ausgangsbild
Freigestelltes Motiv
Freigestellt
Thumbnails Dark and Darker und Streamer.bot
Weitere Thumbnails
06

Webdesign

WordPress & Bricks

Für meinen eigenen Social-Media-Auftritt entsteht gerade eine Webseite in WordPress mit Bricks. Sie übernimmt Farben und Formensprache aus meinem Branding, damit Stream, Kanäle und Webseite wie aus einem Guss wirken.

Grundlage ist ein klares Gestaltungssystem: eine kräftige Display-Schrift für Titel, eine ruhige Schrift für Fließtext und wenige feste Farben. Spielkarten zeigen Status, Wertung und Spielzeit auf einen Blick und ordnen sich im Raster. Hover-Effekte bleiben bewusst ruhig, sie geben Rückmeldung, ohne vom Inhalt abzulenken.

Spielkarten im Raster mit Status, Wertung und Spielzeit
Menü, Buttons und Filter-Chips im Normal- und Hover-Zustand
Schriften, Hierarchie und Farbpalette der Webseite
Videokarte, Befehl zum Kopieren und Streamplan
07

Fotoreihe

Photoshop & Lightroom

Mit der Fotografie hat für mich alles angefangen. Eine Auswahl aus Architektur, Natur und Landschaft, bearbeitet in Lightroom und Photoshop.

Kirchturm zwischen HäusernEnte im Gras am WasserBokeh-Lichter bei NachtBergsee mit Häusern
↑