Design Guidelines

Avatars für kieks.me Team-Mitglieder sind quadratische Grafiken, die freigestellte Portraits mit Firmenfarben als Hintergrund kombinieren. Optional kann ein farbiger Schattenriss (Silhouette) hinter dem Portrait hinzugefügt werden, um Tiefe und visuelles Interesse zu schaffen. Diese Richtlinien beschreiben, wie Avatare erstellt werden sollen, um der Corporate Identity zu entsprechen.

Format-Spezifikationen

  • Format: Quadratisch (1:1 Seitenverhältnis)
  • Standard-Größen: 256x256px, 512x512px
  • Ausgabeformat: PNG (mit Transparenz)
  • Auflösung: Mindestens 72 DPI für Web

Portrait-Anforderungen

  • Format: PNG mit transparentem Hintergrund
  • Freistellung: Portrait muss freigestellt sein
  • Zentrierung: Portrait wird zentriert platziert
  • Größe: Füllt das Quadrat (mit Zuschnitt bei Bedarf)
  • Schattenriss: Optional - farbiger Schattenriss (20% größer, nach links/oben verschoben)

Schattenriss (Silhouette)

Optional kann ein farbiger Schattenriss hinter dem Portrait hinzugefügt werden:

  • Farbe: Automatisch eine andere Firmenfarbe als der Hintergrund
  • Größe: 20% größer als das Portrait (120%)
  • Position: Nach links und oben verschoben (Offset basierend auf Avatar-Größe)
  • Effekt: Verleiht dem Avatar Tiefe und visuelles Interesse

Hinweis: Der Schattenriss ist standardmäßig aktiviert, kann aber mit --no-shadow deaktiviert werden.

Firmenfarben

Avatare verwenden eine der drei Firmenfarben als Hintergrund:

Aqua

#00FFDC

Navy

#1E2A45

Fuchsia

#FF008F

Beispiele

Avatare in verschiedenen Größen und mit allen drei Firmenfarben. Die Portraits werden zentriert platziert und füllen das Quadrat.

512x512px Avatare

Avatar mit Aqua-Hintergrund (512x512px)

Aqua Background

Avatar mit Navy-Hintergrund (512x512px)

Navy Background

Avatar mit Fuchsia-Hintergrund (512x512px)

Fuchsia Background

Avatar Graustufen Aqua (512x512px)

Aqua Graustufen

Avatar Graustufen Navy (512x512px)

Navy Graustufen

Avatar Graustufen Fuchsia (512x512px)

Fuchsia Graustufen

256x256px Avatare

Avatar mit Aqua-Hintergrund (256x256px)

Aqua Background

Avatar mit Navy-Hintergrund (256x256px)

Navy Background

Avatar mit Fuchsia-Hintergrund (256x256px)

Fuchsia Background

Avatar Graustufen Aqua (256x256px)

Aqua Graustufen

Avatar Graustufen Navy (256x256px)

Navy Graustufen

Avatar Graustufen Fuchsia (256x256px)

Fuchsia Graustufen

Abgerundete und kreisförmige Avatare

Avatare können mit CSS abgerundet oder kreisförmig dargestellt werden. Die quadratischen Avatare werden dabei visuell angepasst, während die Originaldatei quadratisch bleibt.

Abgerundete Ecken (rounded-lg)

Avatar mit Aqua-Hintergrund, abgerundet

Aqua (abgerundet)

Avatar mit Navy-Hintergrund, abgerundet

Navy (abgerundet)

Avatar mit Fuchsia-Hintergrund, abgerundet

Fuchsia (abgerundet)

Avatar Graustufen Aqua, abgerundet

Aqua Graustufen (abgerundet)

Avatar Graustufen Navy, abgerundet

Navy Graustufen (abgerundet)

Avatar Graustufen Fuchsia, abgerundet

Fuchsia Graustufen (abgerundet)

Kreisrund (rounded-full)

Avatar mit Aqua-Hintergrund, kreisförmig

Aqua (kreisförmig)

Avatar mit Navy-Hintergrund, kreisförmig

Navy (kreisförmig)

Avatar mit Fuchsia-Hintergrund, kreisförmig

Fuchsia (kreisförmig)

Avatar Graustufen Aqua, kreisförmig

Aqua Graustufen (kreisförmig)

Avatar Graustufen Navy, kreisförmig

Navy Graustufen (kreisförmig)

Avatar Graustufen Fuchsia, kreisförmig

Fuchsia Graustufen (kreisförmig)

CSS-Beispiele 

<!-- Abgerundete Ecken -->
<img 
  src="avatar.png" 
  alt="Avatar" 
  class="w-32 h-32 rounded-lg object-cover"
/>

<!-- Kreisrund -->
<img 
  src="avatar.png" 
  alt="Avatar" 
  class="w-32 h-32 rounded-full object-cover"
/>

<!-- Mit Tailwind CSS -->
<img 
  src="avatar.png" 
  alt="Avatar" 
  class="w-32 h-32 rounded-lg object-cover border-2 border-gray-200"
/>

Avatar Generator

Verwende das Avatar Generator Script, um Avatare automatisch aus freigestellten Portraits zu erstellen. Das Script kombiniert das Portrait mit einer Firmenfarbe als Hintergrund.

Installation & Voraussetzungen

Das Script verwendet sharp für die Bildverarbeitung. Alle Dependencies sind bereits im Projekt installiert.

Verwendung

Das Avatar Generator Script kann auf zwei Arten verwendet werden:

  • Interaktiver Modus: Startet ohne Argumente - führt durch alle Schritte
  • CLI-Modus: Alle Parameter werden als Kommandozeilen-Argumente übergeben

Interaktiver Modus (empfohlen) 

# Startet den interaktiven Modus
pnpm run generate:avatar

# Der interaktive Modus führt Sie durch:
# - Auswahl des Portrait-Bildes
# - Auswahl der Firmenfarbe
# - Auswahl der Größe
# - Option für Graustufen-Konvertierung
# - Auswahl des Ausgabepfads
# - Option für Mehrfach-Generierung (verschiedene Farben/Größen)

CLI-Modus 

# 512x512px Avatar mit Aqua-Hintergrund
pnpm run generate:avatar \
  --portrait path/to/cut-out-portrait.png \
  --color aqua \
  --size 512 \
  --output output/avatars/avatar-aqua-512.png

# 256x256px Avatar mit Navy-Hintergrund
pnpm run generate:avatar \
  --portrait path/to/cut-out-portrait.png \
  --color navy \
  --size 256 \
  --output output/avatars/avatar-navy-256.png

# 512x512px Avatar mit Fuchsia-Hintergrund
pnpm run generate:avatar \
  --portrait path/to/cut-out-portrait.png \
  --color fuchsia \
  --size 512 \
  --output output/avatars/avatar-fuchsia-512.png

# Interaktiver Modus (empfohlen)
pnpm run generate:avatar

Parameter

  • --portrait <path>: Pfad zum freigestellten Portrait (PNG mit Transparenz) [erforderlich]
  • --color <color>: Firmenfarbe: aqua, navy oder fuchsia [erforderlich]
  • --size <pixels>: Ausgabegröße in Pixeln (Standard: 512)
  • --output <path>: Ausgabedatei-Pfad [erforderlich im CLI-Modus, Standard: output/avatars/]
  • --grayscale: Konvertiert das Portrait in Graustufen (Hintergrund bleibt farbig) [optional]
  • --no-shadow: Deaktiviert den Schattenriss (Standard: aktiviert) [optional]

Hilfe

Zeige die Hilfe mit: 

pnpm run generate:avatar --help

Beispiel-Avatare generieren

Um Beispiel-Avatare mit verschiedenen Varianten (Farben, Größen, Graustufen) automatisch zu generieren, verwenden Sie das Beispiel-Generator-Skript: 

# Generiere Beispiel-Avatare für alle Portraits in source/avatars
pnpm run generate:samples:avatars

Das Skript generiert automatisch Avatare mit:

  • Allen drei Firmenfarben (Aqua, Navy, Fuchsia)
  • Zwei Standard-Größen (256px, 512px)
  • Zwei Varianten: Standard und Graustufen (beide mit Schattenriss)

Die generierten Avatare werden im Verzeichnis examples/avatars gespeichert.

Verwendungshinweise

Farbauswahl

  • Aqua: Für helle, freundliche Avatare
  • Navy: Für professionelle, seriöse Avatare
  • Fuchsia: Für kreative, auffällige Avatare
  • Wähle die Farbe basierend auf Kontext und persönlicher Präferenz

Portrait-Vorbereitung

  • Portrait muss freigestellt sein (transparenter Hintergrund)
  • PNG-Format mit Alpha-Kanal für Transparenz
  • Gute Qualität (mindestens 512x512px empfohlen)
  • Portrait sollte zentriert und gut ausgeleuchtet sein

Dateinamen-Konvention

Empfohlene Namenskonvention für Avatar-Dateien: 

avatar-<name>-<color>-<size>.png

Beispiele:
  avatar-max-mustermann-aqua-512.png
  avatar-jane-doe-navy-256.png
  avatar-team-member-fuchsia-512.png

Verwendungszwecke

  • Team-Verzeichnisse und Organigramme
  • Profilbilder in internen Systemen
  • Präsentationen und Dokumentationen
  • Website-Team-Seiten
  • E-Mail-Signaturen (in Kombination mit Email Footer)