imported>Thorsten Klöhn: Import aus Zensical-Doku (Wissen Ahrensburg)

2026-07-17T12:43:16Z

Import aus Zensical-Doku (Wissen Ahrensburg)

Neue Seite

= Leseprobe: KI für Kreative =

<blockquote>'''Hinweis zur Software-Auswahl:''' 
Diese Leseprobe priorisiert '''Open-Source-Software''', die unter Ubuntu (lokal/self-hosted) betrieben werden kann. 
Bei proprietären Cloud-Lösungen wird stets eine '''Open-Source-Alternative''' mit gleichem Funktionsumfang gegenübergestellt. 
'''LLM-Modelle''' und Bildgenerierungssysteme werden unabhängig vom Preis gelistet, da sie als fundamentale Werkzeuge im Designprozess dienen.
</blockquote>

-----


== Legende ==

{| class="wikitable"
|-
! Symbol
! Bedeutung
|-
| 🟩
| Open Source – kostenlos, self-hosted / Ubuntu-kompatibel
|-
| 💰
| Kostenpflichtig
|-
| 🤖
| LLM-Modell / API – bleibt immer gelistet
|-
| 🐧
| Linux / Ubuntu nativ
|-
| 🌐
| Nur Web-Browser
|}

-----


== Inhaltsverzeichnis ==

* [[#auszug-kapitel-3-prompting-als-designmaterial|📖 Auszug: Kapitel 3 – Prompting als Designmaterial]]
** [[#31-das-konzept-der-pixelbasierte-zufall-und-seine-lenkung|3.1 Das Konzept: Der pixelbasierte Zufall und seine Lenkung]]
** [[#32-thema-stilsteuerung-durch-kunsthistorische-begriffe|3.2 Thema: Stilsteuerung durch kunsthistorische Begriffe]]
** [[#33-thema-lichtsetzung-und-kamera-parameter-im-text-prompt|3.3 Thema: Lichtsetzung und Kamera-Parameter im Text-Prompt]]
* [[#praxis-workshop-ein-konsistentes-icon-set-erstellen|🛠️ Praxis-Workshop: Ein konsistentes Icon-Set erstellen]]
** [[#schritt-1-das-visuelle-konzept-ollama|Schritt 1: Das visuelle Konzept (Ollama)]]
** [[#schritt-2-generierung-in-comfyui-flux-stable-diffusion|Schritt 2: Generierung in ComfyUI (Flux / Stable Diffusion)]]
** [[#schritt-3-vektorisierung-reinzeichnung-inkscape|Schritt 3: Vektorisierung & Reinzeichnung (Inkscape)]]
* [[#software-vergleich-im-grafikdesign|📦 Software-Vergleich im Grafikdesign]]

-----


== 📖 Auszug: Kapitel 3 – Prompting als Designmaterial ==

-----


=== 3.1 Das Konzept: Der pixelbasierte Zufall und seine Lenkung ===

In der klassischen Grafik gestaltest du Linien, Flächen und Farben von Grund auf selbst. Du hast die absolute Kontrolle über jeden Pixel. Beim Arbeiten mit generativer KI ändert sich dieses Paradigma: '''Du gestaltest nicht das Bild selbst, sondern den Raum der Möglichkeiten.'''

Der Text-Prompt ist kein Befehlsempfänger, sondern ein '''kreativer Katalysator'''. Die Bild-KI startet mit vollständigem Rauschen (Noise) und errechnet durch das Entfernen des Rauschens (Denoising) Schritt für Schritt das Bild. Deine Aufgabe als Designer ist es, diesen mathematischen Prozess durch präzise sprachliche Leitplanken in die gewünschte Richtung zu lenken.

-----


=== 3.2 Thema: Stilsteuerung durch kunsthistorische Begriffe ===


==== Konzept: Ästhetische Epochen nutzen ====

Statt der KI vage Begriffe wie „schön" oder „modern" zu geben, erzielen kunsthistorische und technische Epochen-Begriffe hochgradig konsistente visuelle Stile:

{| class="wikitable"
|-
! Stilrichtung
! Visuelle Merkmale
! Prompt-Beispiel
|-
| '''Bauhaus'''
| Geometrische Formen, Primärfarben, Funktionalität
| „Bauhaus-Stil, minimales Poster, flache Vektoren, rote und gelbe Kreise"
|-
| '''Cyberpunk'''
| Neonlicht, hoher Kontrast, urbane Dystopie
| „Cyberpunk-Ästhetik, regennasse Straße, blaues und magentafarbenes Neonlicht"
|-
| '''Art déco'''
| Symmetrie, goldene Linien, geometrische Muster
| „Art-déco-Illustration, goldene Ornamente auf schwarzem Hintergrund, filigran"
|-
| '''Flat Design'''
| Keine Verläufe, klare Formen, flache Vektoren
| „Flat Design Icon, minimalistisch, 2D, weiche Pastellfarben"
|}

-----


=== 3.3 Thema: Lichtsetzung und Kamera-Parameter im Text-Prompt ===


==== Konzept: Licht modelliert die Form ====

Licht entscheidet über die Tiefe und Emotionalität deines Designs. Bild-KIs verstehen die Sprache der Fotografen und 3D-Künstler:

* '''Gegenlicht (Backlight):''' Erzeugt eine leuchtende Silhouette und trennt das Motiv vom Hintergrund.
* '''Rembrandt-Licht:''' Ein klassisches Drei-Punkt-Licht mit einem markanten Dreiecksschatten auf der Wange (ideal für dramatische Porträts).
* '''Weiches Diffuslicht:''' Verhindert harte Schlagschatten, ideal für Produktvisualisierungen und flache UI-Elemente.

<pre>Beispiel-Vergleich im Prompt-Ergebnis:
❌ Negativ: "Ein Apfel auf einem Tisch, fotorealistisch" (Standard-Licht, langweilig)
✅ Positiv: "Ein roter Apfel auf einem Holztisch, dramatisches Rembrandt-Licht,
weicher Schattenwurf, Makroaufnahme, 85mm Linse, f/1.8" (Cineastisch)</pre>

-----


== 🛠️ Praxis-Workshop: Ein konsistentes Icon-Set erstellen ==

In diesem kurzen Workshop erstellen wir ein konsistentes Set aus drei Vektor-Icons für ein Web-Interface – vollständig lokal auf einem Ubuntu-System.


=== Schritt 1: Das visuelle Konzept (Ollama) ===

Wir lassen uns von einem lokalen LLM über Ollama ein einheitliches Metaphern-Set für die Bereiche „Home", „Search" und „Settings" erstellen, das auf der '''Bauhaus-Ästhetik''' basiert.

<syntaxhighlight lang="bash">ollama run llama3 "Entwirf ein Icon-Konzept für Home, Search und Settings im minimalistischen Bauhaus-Stil. Nutze nur die Grundformen Kreis, Quadrat und Dreieck."</syntaxhighlight>

-----


=== Schritt 2: Generierung in ComfyUI (Flux / Stable Diffusion) ===

Wir verwenden den generierten Prompt in ComfyUI. Um flache Vektor-ähnliche Icons zu erzwingen, nutzen wir folgendes Prompt-Schema:

<syntaxhighlight lang="text">Prompt: "Minimalistisches flaches Vektor-Icon von [Motiv], Bauhaus-Stil,
saubere weiße Flächen, isoliert auf weißem Hintergrund,
keine Schattierungen, klare Linien, 2D, SVG-Look"</syntaxhighlight>
''Tipp:'' Verwende für alle drei Icons denselben '''Seed''' (Zufallswert) in ComfyUI, um visuelle Konsistenz zu garantieren.

-----


=== Schritt 3: Vektorisierung & Reinzeichnung (Inkscape) ===

Die generierten PNG-Dateien importieren wir in '''Inkscape''' und konvertieren sie in echte Vektoren:

# Öffne Inkscape und importiere das generierte Icon.
# Wähle das Bild aus und klicke im Menü auf <code>Pfad -> Pfad nachzeichnen (Trace Bitmap)</code>.
# Stelle den Modus auf <code>Helligkeitsstufen</code> und passe den Schwellenwert an, bis die Ränder sauber sind.
# Klicke auf <code>Anwenden</code>. Lösche das ursprüngliche Pixelbild im Hintergrund.
# Exportiere das fertige Ergebnis als '''Optimiertes SVG'''.

-----


== 📦 Software-Vergleich im Grafikdesign ==


=== Bildgenerierung & Design-Prozess ===

{| class="wikitable"
|-
! Funktion
! Open Source 🟩 (Ubuntu / Self-hosted)
! Kommerziell 💰
|-
| Text-to-Image UI
| ComfyUI 🐧, AUTOMATIC1111 🐧
| Midjourney, DALL-E 3
|-
| Lokale Bildbearbeitung
| GIMP 🐧
| Adobe Photoshop
|-
| Lokales Zeichnen & Malen
| Krita 🐧 (+ AI Diffusion Plugin)
| Photoshop Generative Fill
|-
| Vektorbearbeitung
| Inkscape 🐧
| Adobe Illustrator
|-
| Vektorisierung
| Potrace 🐧 (CLI), Inkscape 🐧
| Vectorizer.ai
|-
| Design-Prototyping
| Penpot 🐧 (self-hosted)
| Figma
|}

-----


== Weiterführende Ressourcen ==

* '''[https://inkscape.org/de/lernen/handbuecher/ Inkscape Handbuch]''' – Vektorzeichnen von Grund auf 🟩
* '''[https://github.com/Acly/krita-ai-diffusion Krita AI Diffusion]''' – Installationsanleitung für lokales Malen mit KI 🟩
* '''[https://comfyanonymous.github.io/ComfyUI_examples/ ComfyUI Examples]''' – Workflow-Vorlagen 🟩
* '''[https://www.bauhaus.de Bauhaus-Archiv Berlin]''' – Inspirationen und Gestaltungsprinzipien

-----

''Leseprobe Ende – Letzte Aktualisierung: Juli 2026''

Kreativ / Design / Leseprobe: KI für Kreative - Versionsgeschichte

imported>Thorsten Klöhn: Import aus Zensical-Doku (Wissen Ahrensburg)