Design Guidelines

Avatars für Regenfass Team-Mitglieder sind quadratische Grafiken, die freigestellte Portraits mit dem Hintergrundbild waterline (raindrop top, light blue water) kombinieren. Diese Richtlinien beschreiben, wie Avatare erstellt werden, 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)

Background: Tabler raindrop wallpaper

The avatar background is fixed to a repeating Tabler raindrop wallpaper (assets/backgrounds/5.svg). It scales to the requested avatar size while the portrait stays centered on top.

Beispiele

Avatars in different sizes with the waterline background (dark raindrop top, light blue water with waves below). The portraits are centered and fill the square.

Standard (512px · 256px)

Avatar mit Wasserlinien-Hintergrund (512x512px)

512px

Avatar mit Wasserlinien-Hintergrund (256x256px)

256px

Graustufen-Avatare

Portrait in Graustufen, farbiger Wasserlinien-Hintergrund.

Avatar Graustufen mit Wasserlinien-Hintergrund (512x512px)

512px Graustufen

Avatar Graustufen mit Wasserlinien-Hintergrund (256x256px)

256px Graustufen

Abgerundet & kreisförmig (CSS)

Mit rounded-lg oder rounded-full; Originaldatei bleibt quadratisch.

Avatar mit Wasserlinien-Hintergrund, abgerundet

256px · rounded-lg

Avatar mit Wasserlinien-Hintergrund, abgerundet

512px · rounded-lg

Avatar mit Wasserlinien-Hintergrund, kreisförmig

256px · rounded-full

Avatar mit Wasserlinien-Hintergrund, kreisförmig

512px · rounded-full

Avatar Graustufen mit Wasserlinien-Hintergrund, kreisförmig

256px Grau · rounded-full

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 dem Wasserlinien-Hintergrund (oben Regentropfen auf Dunkelblau, unten hellblaues Wasser mit Wellen).

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 Größe
# - Auswahl des Ausgabepfads
# - Option für Mehrfach-Generierung (verschiedene Größen)

CLI-Modus 

# 512x512px Avatar (Wasserlinien-Hintergrund)
pnpm run generate:avatar \
  --portrait source/avatars/regenfass-avatar-alademann.png \
  --size 512 \
  --output output/avatars/avatar-regenfass-avatar-alademann-512.png

# 256x256px Avatar
pnpm run generate:avatar \
  --portrait source/avatars/regenfass-avatar-alademann.png \
  --size 256 \
  --output output/avatars/avatar-regenfass-avatar-alademann-256.png

# Interaktiver Modus (empfohlen)
pnpm run generate:avatar

Parameter

  • --portrait <path>: Pfad zum freigestellten Portrait (PNG mit Transparenz) [erforderlich]
  • --size <pixels>: Ausgabegröße in Pixeln (Standard: 512)
  • --output <path>: Ausgabedatei-Pfad [erforderlich im CLI-Modus, Standard: output/avatars/]

Hilfe

Zeige die Hilfe mit: 

pnpm run generate:avatar --help

Beispiel-Avatare generieren

Um Beispiel-Avatare automatisch zu generieren, verwenden Sie das Beispiel-Generator-Skript: 

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

Das Skript generiert Avatare mit:

  • Hintergrund: Wasserlinie (oben Regentropfen auf Dunkelblau, unten hellblaues Wasser mit Wellen)
  • Zwei Größen (256px, 512px)
  • Farbige Avatare + Graustufen-Varianten (Portrait Grau, Hintergrund Farbe)

Die generierten Avatare werden im Verzeichnis examples/avatars gespeichert. Die Dateinamen leiten sich vom Portrait-Dateinamen ab (z. B. regenfass-avatar-alademann.png → avatar-regenfass-avatar-alademann-256.png).

Damit die Beispiele auf dieser Seite geladen werden, das Haupt-Portrait regenfass-avatar-alademann.png in source/avatars verwenden.

Verwendungshinweise

Hintergrund

Alle Avatare verwenden einheitlich den Wasserlinien-Hintergrund (oben Regentropfen auf Dunkelblau, unten hellblaues Wasser mit Wellen). Es wird in der gewünschten Größe skaliert; das Portrait wird zentriert darüber gelegt.

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: 

# Namenskonvention: avatar-<name>-<size>.png

# Beispiele (regenfass):
  avatar-regenfass-avatar-alademann-512.png
  avatar-regenfass-avatar-alademann-256.png
  avatar-regenfass-avatar-alademann-512-grayscale.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)