Avatars

Design Guidelines

Avatars für Thinkport Team-Mitglieder sind quadratische Grafiken, die freigestellte Portraits mit dem Hintergrundbild Abstract 5 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)

Hintergrund: Abstract 5

Der Avatar-Hintergrund ist fest auf das Bild Abstract 5 gesetzt (assets/backgrounds/5.svg). Es wird auf die gewünschte Avatar-Größe skaliert; das Portrait wird zentriert darüber gelegt.

Beispiele

Avatare in verschiedenen Größen mit Abstract-5-Hintergrund. Die Portraits werden zentriert platziert und füllen das Quadrat.

Standard (512px · 256px)

512px

256px

Beispielavatare mit verschiedenen Hintergrundbildern

Avatare können mit verschiedenen Abstract-Hintergründen erzeugt werden. Hier dieselbe Person mit Abstract 1 bis 7 (Standard: Abstract 5).

Abstract 1

Abstract 2

Abstract 3

Abstract 4

Abstract 5

Abstract 7

Graustufen-Avatare

Portrait in Graustufen, farbiger Abstract-5-Hintergrund.

512px Graustufen

256px Graustufen

Abgerundet & kreisförmig (CSS)

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

256px · rounded-lg

512px · rounded-lg

256px · rounded-full

512px · rounded-full

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 Hintergrundbild Abstract 5.

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 (Abstract-5-Hintergrund)
pnpm run generate:avatar \
  --portrait path/to/cut-out-portrait.png \
  --size 512 \
  --output output/avatars/avatar-512.png

# 256x256px Avatar
pnpm run generate:avatar \
  --portrait path/to/cut-out-portrait.png \
  --size 256 \
  --output output/avatars/avatar-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/]
--background <path>: Optionaler Pfad zum Hintergrund-SVG (z. B. assets/backgrounds/3.svg); Standard ist Abstract 5.

Hilfe

Zeige die Hilfe mit:

pnpm run generate:avatar --help

Beispiel-Avatare generieren

Um Beispiel-Avatare (Abstract 3, 5, 7 und Graustufen für Abstract 5) 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 automatisch Avatare mit:

Hintergründe: Abstract 1, 2, 3, 4, 5 (Standard), 7
Zwei Standard-Größen (256px, 512px)
Farbige Avatare; Graustufen-Portrait (Person Grau, Hintergrund Farbe) nur bei Abstract 5

Die generierten Avatare werden im Verzeichnis examples/avatars gespeichert.

Die Beispiele zeigen das Porträt von Tobias Drexler (generische Dateinamen: avatar-256.png, avatar-512.png usw.). Dafür einmal ausführen: pnpm run generate:staff:assets --slug tobias (API-Zugang erforderlich). Alternativ Portrait(s) in source/avatars legen und pnpm run generate:avatar:samples ausführen.

Verwendungshinweise

Hintergrund

Alle Avatare verwenden einheitlich das Bild Abstract 5 als Hintergrund. 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:

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)