Photoshop CS6 Extended
Vom 07. bis 11. April 2014 findet an der VHS Braunschweig ein Ganztagsseminar (Bildungsurlaub) mit dem Thema "Photoshop für das Webdesign" statt. In Form eines praxisorientiertem Seminar mit der letzten Creative Suite Version CS 6 wollen wir uns die nötigen Techniken für attraktive und stimmige Webdesigns aneignen. Das Seminar ist als Workshop angelegt und wendet sich an Interessenten an weiterführende Photoshop-Technken.
Hier die Rahmendaten unseres Seminars:
Ort: VHS Braunschweig, Heydenstraße 2, Raum 2.11
Zeiten: Mo. 07.04. bis Fr. 11.04.14; jeweils 08.30 - 16.00 Uhr
Als besonderes "Schmankerl" stehen den Teilnehmern an VHS-Kursen verschiedene Adobe Software Angebote - bis hin zu den Creative Suites - im Rahmen eines gesonderten Lizenzprogramms über den DVV und Cobra-Shop zur Verfügung:
Hier folgt jetzt auch wieder unser "Roter Faden" für die Seminarwoche...
Ihr Trainer Joe Brandes
Tag 01 - Montag
Montag, 07.04.2014, 08.30 - 16.00 Uhr
- Orientierung / Seminar- und TN-Themen
Kurzanm. zu Themen der Woche: recht passend zu der Ausschreibung (s.u.)
Hinweis auf Adobe-VHS-Lizenzen über den Cobra-Shop - Ausschreibung VHS Braunschweig
Gute und erfolgreiche Webseiten leben auch von einem attraktiven und stimmigen Design.
Unser Workshop zeigt die wichtigsten Aspekte der Grafikerstellung für das Web mit der professionellen Bildbearbeitung Photoshop.- Optimierung von Bildern für das Web
- Farben wählen und kombinieren (Farbkonzepte)
- Bilder mit Transparenz und Freistellungseffekten
- Design von Icons, Buttons und Hintergründen
- Schriften darstellen (Fonts, Textdesign, Effekte, Typografie)
- Komplettes Webprojekt mit Photoshop (Umsetzung von A bis Z)
- Photoshop Versionen
Aktuell CS6 ist Version 13 / CC - Creative Cloud zur Monatsmiete - dann Versionen 14ff; Einführung der CS (Creative Suite) nach Version 7; Extended Version mit zusätzlichen Fähigkeiten bei 3D, Video, Statistik und Medizin-technischen Zusatzfunktionen; Versionen für Schüler/Studenten/Firmen;
seit Ende 2013: es gibt wieder CS6 Versionen zu guten Konditionen beim Cobra-Shop - Einstellungen von Photoshop CS6 auf Webbearbeitung
Konzentration der Einstellungen auf webkonforme Größen: Pixel, RGB, Webfarben
Beispiele:
Voreinstellungen - Benutzeroberfläche (Farbdesigns mittels Umschalten F1/F2 dunkler/heller), keine Rahmungen
Voreinstellungen - Maßeinheiten & Lineale (Strg + K oder direkt über Menü)
Voreinstellungen - Hilfslinien, Raster und Slices (Hinweis auf 320 Pixel als Kleinstmaß für Viewports - siehe Website mediaqueri.es)
Palette Info: RGB, Webfarben, Dokumentmaße in Pixeln
Lineale: Strg + R, Maße in Pixeln, Nullpunkt setzen; auch: Hilfslinien aus Lineal herausziehen
Paletten Zeichen / Absatz: keine speziellen Zeichformatierungen (z.B. Ligaturen) nutzen, weil diese nicht per CSS nutzbar sind, Laufweiten können genutzt - aber sollten dann unbedingt dokumentiert werden, damit sie in CSS landen; bei Absätzen ohne Silbentrennung arbeiten
Vektor-/Form-/Pfad-Werkzeuge: "An Raster ausrichten" - dann klappt es auch mit Pixelgenauer Rasterung - Arbeitsbereiche
Paletten (umstellen, konfigurieren), Toolbox (Werkzeugkasten) mit Eigenschaftenleiste
Arbeitsbereiche erstellen und wiederherstellen, Erscheinungsbild der Programmoberfläche einstellbar
eigene Arbeitsbereiche speichern und ändern; inklusive Tastaturbefehle, Menüs (Sichtbarkeit, Farben)
siehe Beispiele für CS6: Arbeitsbereich "Neu in CS6"
Fenster managen mit Tab (Ausblenden Toolbox / Paletten) und F (Fenstermodi) - nicht invasive / nicht "Pixel-verändernde" Techniken:
Ebenen kopieren; Smartobjekt Ebenen in Kombination mit Smartfiltern; Einstellungsebenen (siehe Gradationskurven, Farbton/Sättigungn) statt der direkten Bearbeitung (Bild - Korrekturen); Vektorformen nutzen (siehe Abteilung in Toolbox mit Textwerkzeug) - Ebenen Palette
Ebene kopieren Strg + J (funktioniert jetzt auch mit Gruppen)
Ebenen benennen (Tipp: bei Umbennen-Modus kann jetzt mit Tab weiter gesprungen werden), neue transparente Ebene einfügen (Umschalten + Strg + N), Ebenen ein-/ausblenden (Auge vor Ebene)
Ebenenstile lassen sich jetzt auch auf Gruppen anwenden
Gruppe für mehrere Ebenen, Gruppen/Ebenen einfärben, Reihenfolge von Ebenen manipuliert
Tipp: Alt-Taste und Klick auf "Auge" blendet alle anderen Ebenen aus/ein
Neue Filter-Mechanismen nach Art, Name, Effekt, Modus, Atribut, Farbe
Alle fx (Ebeneneffekte) lassen sich mit Alt + Klick in einem Schritt ein-/ausblenden
Schnittmasken nutzen bei Einstellungsebenen und Filtern (siehe Übungen "Text mit Verläufen / Bildern füllen") - Protokoll Palette
Schnappschüsse verwalten und Rückgängig-Funktionalität von Photoshop
Anm.: Verläufe in Protokoll und die Schnappschüsse nur während Bearbeitung nutzbar - Pinsel (B)
eigene Palette, effiziente Einstellung von Durchmesser und/oder Härte mittels Rechter Maustasten-Menü oder über Alt + Rechte Maus mit Ziehen hor./vert. für Durchmesser/Härte; neue Pinsel (erodierbare, drucksensitive - funktioniert nur mit Tablets als Eingabegerät) - Pipette (I), Farbfelder
Farbaufnehmer für Vorder- und Hintergrundfarben (mit Alt-Taste), Paletten Farbe und Farbfelder
eigene Farben definiert, über Webportale wie kuler.adobe.com oder www.colorschemedesigner.com lassen sich Farbschemen erzeugen, analysieren und für Photoshop exportieren (*.aco - Photoshop Adobe Color Dateien)
Kuler auch direkt in Photoshop über Fenster - Erweiterungen - Kuler als Palette verfügbar
Farbfelder über Palettenoptionen verwaltbar: Vorgaben-Manager...
Trick Pipette: Farben außerhalb von Photoshop mit gehaltener Maustaste aufnehmen
Pipette über Rechte Maus auf Aufnahme-Durchmesser ändern (min 11x11 Pixel), Farben lassen sich als HTML- oder Webcode kopieren
Mozilla Firefox AddOn: Colorzilla - Reborn-Karte / Hardwareabsicherung der TN-PCs
Laufwerk C: immer nach Neustart zurückgesetzt; Lösung: Sicherung der Benutzerprofil-Ordner für Photoshop CS6:
Pfad: C:\Benutzer\Teilnehmer\AppData\Roaming\Adobe\Adobe Photoshop CS6
Ordner dort auf Datenlaufwerk D: sichern und dann morgen wieder ersetzen! - Letzter Tipp vor "Dienstschluss"
Einfaches "Reparieren" von Bildbereichen mittels Lasso um Stelle und dann mittels "Fläche füllen - Umschalten + F5" die neue Technik "inhaltsbasiert" füllen
Kuler
Schnittmasken
Paletten
Voreinstellungen
Pixel
Photoshop CS6
Tag 02 - Dienstag
Dienstag, 08.04.2014, 08.30 - 16.00 Uhr
- Rekapitulation, TN-Fragen
Themen Montag gezeigt; Hinweis Seite terrashop (www.terrashop.de) - Wiederherstellung Arbeits-/Benutzerprofil Photoshop
siehe Ende Montag mit Pfad "AppData"; Tipp für Sicherung der Photoshop-Umgebung - Freistellungswerkzeug (C)
möglichst alle Erstreparaturen am Bild (Zuschneiden, Drehen, Ausrichten) in einem Arbeitsschritt mit Croptool
Empfehlung: die äußeren Bildpunkte nicht löschen lassen (nicht-destruktiv arbeiten) - Inhaltsbasiert skalieren
ein erstaunliches Werkzeug (Menü Bearbeiten) zum Strecken/Stauchen von Bildbereichen - Pixelgenaues Arbeiten
an Formwerkzeugen die Auswirkungen von Konturen (außen, innen, Rundungen) ermittelt und mit Pixel-Masken-Bereichen verglichen; auf Aktivierung von "Kanten ausrichten" achten
saubere Linien mit dem Bleistift (nicht Pinsel!); gerade Linien mit Umschalten-Taste - Saubere Verläufe mit Schattenkanten
Deaktivierung von Globalem Licht (bei Webtechnik meist angeraten) und 90 bzw. -90 Grad Winkel
Transformation der geschatteten Objekte über die Dokumentgrenzen, damit die Verläufe der Schatten sauber sind - Flächen aufwerten
Nutzung von Radialverläufen mit Grundfarbe und zweiter Zielfarbe
Nutzung von Werkzeug O: Abwedler, Nachbelichter (während der Arbeit mit Alt umschaltbar)
Anm.: heute noch destruktiv in Flächen gearbeitet
Glanzlicht mit Extra-Ebene (Radialverlauf Weiß - Transparenz, Weiches Licht, Deckkraft verringern) - Photoshop Bücher (dicke Wälzer zum Grundthema Photoshop)
H. Neumeyer zum Thema
Photoshop CS6 „Handbuch für Bildbearbeiter“
ISBN: 978-3-8273-3168-7
1056 Seiten; erschienen 26.9.2012 beim Addison-Wesley-Verlag (Pearson)
Sibylle Mühlke zum Thema
Adobe Photoshop CS6 und CC: Das umfassende Handbuch
ISBN: 3836218836
1219 Seiten; Galileo Verlag Design, Auflage: 1 (28. November 2012) - Maskieren - Freistellen
Zauberstäbe (W - Wizard): Schnellauswahlwerkzeug, klassischer Zauberstab
Maskierungsmodus (Q) - mittels Rotliche aus klassischer analoger Dunkelkammer Visualisierung der Maskierungsbereiche; Wichtig: bitte daran denken wieder auszuschalten!
Technik "Kante verbessern" nutzen, Auswahl umkehren (Umschalten + Strg + I), Ebenenmaske erstellen per Klick in Ebenenpalette (Menü unten), Ebenenmaske invertieren (Strg + I) - Histogramm
statische Analyse der Bildpunkte; wichtige Info für Bildanpassungen (Helligkeit, Farbkorrektur, ...)
Online-Hilfe Adobe (Link) - Tonwertkorrektur vs. Gradationskurven
Online-Hilfe Adobe (Link)
Aritkel zu beiden Korrekturen auf webmasterpro.de (Link) - Bildkorrekturen (Aufhellungen - Farbstiche)
Korrekturebene Gradationskurve mit Maske; Speichern und Laden von Gradationskurven als *.acv Dateien über die Paletten-Menüs
Pixelgenau
Bleistift
Flächen aufwerten
Glanzlich
Ebenenmaske
Info Palette F8
Tag 03 - Mittwoch
Mittwoch, 09.04.2014, 08.30 - 16.00 Uhr
- Rekapitulation, TN-Fragen
- Forts. Übungen zum Maskieren und Freistellen
die Maskenwerkzeuge (M, W, L); Kombinieren über Umschalten (Addieren-Modus) und Alt-Taste (Subtrahieren-Modus), Maskierungsmodus (Rot-Licht der klassischen Dunkelkammer), immer: Kante verbessern...; Erstellen von Ebenenmaske über Symbol in Palette Ebenen; Auswahl umkehren / invertieren (Umschalten + Strg + I)
Praktische Übung unter Einsatz von Zoom-Nutzung (Z) und temporärem Hand-Werkzeug (Leertaste) zum Verschieben des Arbeitsausschnitts - Auswahl (Maskierung) Farbbereich
Übung: Farbe wechseln für ""Leuchtturm und Boje"; Nutzung von alternativer Maskierungstechnik (Auswahl - Farbbereich...) und Farben wechseln über Einstellungsebene (Korrekturebene) Farbton/Sättigung; wieder Nutzung/Einsatz der Ebenenmasken zur Verfeinerung - Videotutorials "Haare freitstellen"
siehe Linksammlung Photoshop; Techniken mittels Ebenenmodi (Pavel Kaplun - photoshop-profis.de) oder über Kanäle - Forts. Flächen aufwerten
Werkzeug (O) - Abwedler / Nachbelichter; jetzt über neue Ebene "50 % Grau" im Ebenenmodus "Weiches Licht" als Schnittmaske
mittels Neue Ebene Erstellen (Umschalten + Strg + N oder Alt - Klick in Ebenenpalettensymbol "Neue Ebene" können gleich alle nötigen Werte eingestellt werden - Icon gestalten
ein einacher runder Kleber nach Anleitung aus Buch "Böttigheimer" erstellt; hier neu: neue Ebene aus Auswahl mittels Rechtsklick
typische (quadratische) Größen ab 16, 32, 48, 64, ..., 256 oder auch mittlerweile 512 Pixel
allgemeine Infos Wikipedia zum Thema Icons (Link); Grafikformate hier: *.ico, *.png (oder auch später *.svg)
Anm. zu *.ico Format: Nutzung als Favicon für Website; Photoshop benötigt Plugin, um Favicons erstellen zuu können; einfache Lösung: Favicon Generatoren im Web
Tipp: Einsatz von "Spezial-Fonts" als Icons im Web am Beispiel von Projekt "Fontawesome" - Farbräume (und Tiefe in den Kanälen in 8 / 16 / 32 Bit) - nur kurz Thema angerissen - hier mehr weiterführende Infos
RGB - Rot, Grün, Blau; Monitordarstellung; Wikipedia-Link
CMYK - Cyan, Magenta, Yellow, "Schwarz"; Grundtechnik für Drucken (Stichwort: Druckvorstufen, Farbseparation); Wikipedia-Link
Lab - Helligkeit und Koordinaten für Farben a / b; Geräteunabhängigkeit; Stichwort: Alle Farben; Wikipedia-Link
Tests mit Farbproof (Strg + Y) bzw. Farbumfangwarnung (Umschalten + Strg + Y)
Gegenüberstellung / Vergleich der Farbräume sRGB, CMYK und "Alle Farben Lab" siehe Wikipedia-Info-Grafik aus Lab-Artikel - Monitorkalibrierung - nur kurz Thema erwähnt- hier mehr weiterführende Infos
Beispielvideo (Eizo) zum Thema Kalibrierung: Link; Wikipedia-Artikel (Link); Website mit ausführlichen Technikdarstellungen zu Monitoren und Tests auf Portal prad.de (Link) - Grafikdateitypen (Grafikformate)
Übersicht im Hand-Out (später Download hier im Beitrag); Übersicht Wikipedia (Link);
Konzentration auf bmp, jpg, gif, png (png-8, png-24), tif; Einschätzung hinsichtlich Techniken Komprimierung, Ebenen, Tranparenz
Speziell: Animated Gifs (als Übung dann Do)
Verschiedene Qualitäten jpg den entstandenen Dateigrößen gegenübergestellt - Für Web (und Geräte) speichern ...
spezieller Dialog zum Optiemieren und Anpassen der Grafikexporte: Dateityp, Typeigenschaften, Farbanzahl bei indizierten Farben (siehe gif / png), Transparenzen, Bilddimensionen in Pixel (Webbilder - Größenbereiche: Vollformate ca. 600 - 800 px Breite mit max. 100 kB)
50% Grau
Icondesign
Lab Farben
Masken kombinieren
Ebenen
JPEG Komprimierungen
Tag 04 - Donnerstag
Donnerstag, 10.04.2014, 08.30 - 16.00 Uhr
- Rekapitulation, TN-Fragen
Forts. Übung Dateitypen: Animated Gifs - Für Web (und Geräte) speichern ...
Hinweis und Infos zu Auflösungen in ppi (respektive dpi - Dots per Inch); Monitorauflösungen historischen 72 ppi (daher auch Standardpunkte pt ≡ 1/72 Zoll) für die ersten WYSIWYG Techniken (What You See Is What You Get), Webexport von Photoshop schreibt 96 ppi, aktuelle Hochauflösungsmonitore (siehe z.B. Retina Displays von Apple) haben deutliche höhere Auflösungen, was Konsequenzen für die Bereitstellung von qualitativ hochwertigen Bildern hat! - Animated Gifs
Übung "Ladenbalken": Erstellung von verschachtelten runden Langformen und Füllung mit geeignetem Muster (engl. Pattern)
Direkte Eingabe von Formwerten durch Klick in Arbeitsfläche
Tipp: Erstellung von Mustern (hier: 20 x 20 px) mit Hilfe eines Streifengenerators (www.stripegenerator.com); dann mit Photoshop über Bearbeiten - Muster festlegen... (*.pat Dateien)
Zeitleisten Palette (einblenden) und auf Modus "Frame-Animation" einstellen; Frames durch Verschieben der Füllmuster mit passenden Abständen erstellen (hier: 4 Frames mit 10 px Schritten); per "Für Web speichern..." als Gif mit und ohne Transparenz speichern
Fertige Animationen lassen sich zu hauf im Web finden - z.B. www.ajaxload.info oder auch in aktuellen HTML/CSS Frameworks integriert
Verbesserte Version (nach Vorlage Jonas Hellwig) für TN bereitgestellt (Effekte, Glanz, Hintergrundebene durch Rauschen und Glanzlicht aufgewertet) - Buttons (Schaltflächen)
einfache Verläufe überarbeitet mir mehrstufigen Verläufen; hier die Doku zu unserer "Grünverlaufs-Schaltfläche":
49b151 (0); 49b251 (50); 259a2e (51); 2d9934 (100) - Verstärken mit Abgefl. Kante und Relief (kein globales Licht - 90Grad - 1000 Tiefe - Größe/Weichzeichnen 0; unten Normal - Weiß - Deckkraft ggf. anpassen)
Styling in der Website dann per CSS entweder manuell oder über Tools (nur 2 Beispiele):
CSS3Ps - ein Plugin für Photoshop (Link); Installation einer zxp-Datei über den Extension-Manager von Adobe
Ultimate CSS Gradiant Generator (Link) - ein Webtool mit Einstellungmöglichkeiten wie in Photoshop-Verläufen
Tipp: Verläufe in Photoshop lassen sich speichern und somit wiederverwenden - Schlagschatten manuell optimieren
Form mit Schlagschatten (gelb) mit Schlagschatten; Ebenenstile auflösen: Über Kontext zu fx - Ebenen erstellen
Export der transparenten Strukturen verglichen: gif, png-8, png-24 - Aktionen Palette
Übersicht über den Aufbau der Palette - Satz (beinhaltet die Aktionen) und einzelne Aktionen; Aufzeichnung von Aktionen
Übung: Aufzeichnung einer einzelnen "Für Web speichern..."-Aktion: automatisierte Nutzung mit Hilfe von "Datei - Automatisieren - Stapelverarbeitung; Vollautomatik mit Hilfe von Automatisieren - Droplets...
Anm.: beim Nachvollziehen auf meinen Systemen konnte ich keine Probleme bei der Anwendung von Dateiumbennungen erkennen!
Laden von Aktionen für die Umsetzung des 960.gs-Gridsystems (Download enthält *.atn Datei, die sich über die Aktionen Palette als Satz von 3 Aktionen laden lässt - Entwurfslayouts für Websites
Eine Annäherung an die ersten "groben" Layouts mit beispielhaftem Gridsystem 960.gs (Link)
Bereitstellung von PDF mit den Teilungssystemen mit 12, 16 oder auch 24 Spalten/Grids
Muster - Pattern
Ladebalken
CSS3Ps Plugin
Grafikformate
CSS3 Verläufe
Transparenzen
Tag 05 - Freitag
Freitag, 11.04.2014, 08.30 - 16.00 Uhr
- Rekapitulation, TN-Fragen
- Automatisieren, Skripten
Komplettierung der Umsetzungen mittels Stapelverarbeitung, Droplets, Skripten (Dateien per Stapel laden) oder auch Bildprozessor
Spezial: HDR (1. technisch: 32-Bit Kanäle; 2. künstlerisch: starke, prägnante Bilder - siehe Google Recherche HDR Bilder) - Icon, Navigationen, Formulare als Gesamtentwurf
Bereitstellung einer PSD mit sauber erarbeiteten Oberflächen (UI - User Interface): Modern menu & GUI elements PSD (Link)
Wichtig: Lizenzen der "frei" erhältlichen Quellen beachten!
Schriften (Fonts): häufig müssen Schriften extra beachtet / installiert werden (auch hier Lizenzen beachten - gute Quelle für freie Fonts: Google Fonts (Link)
Tipp: zielgerichteter "Export" einzelner Bildbereiche mittels Umschalten + Strg + C (Kopieren alle Ebenen in die Zwischenablage) und dann mittels Datei - Neu - Zwischenablage automatisch richtige Bilddimension und Strg + V
Alternative: komplette Ebenen/Stile/Effekte mittels Drag & Drop ziehen - Texteffekt Spezial: Letterpress Effekt
alle Effekte nur als Ebeneneffekte/Stile - siehe Fläche für Textebene auf 0 gesetzt
Tipp: alle Effekte mittels Palette Ebene Stile als Stil festlegen und dann gerne auch speichern (*.asl)
beispielhafte CSS3-Umsetzungen: z. B. Link - Geamtkonzeption Website
Buch Jens Jacobsen (www.benutzerfreun.de): Grob- und Feinkonzepte, ...
Dokumentation mittels Styleguide (PSD-Beispiel im Seminar) oder eigener Konstruktion
Scribble oder Mockups: Grundskizzen des Website-Entwurfs; Beispielsoftware: Pencil (als Installation oder Firefox-Addon); Kaufsoftware: z.B. Balsamiq (Link)
Grundkonzepte Website Layout (Frameworks): am Beispiel 960 Gridsystem (960.gs) als PSD-Vorlagen oder Photoshop-Aktionen - Komplette Site mit Photoshop
Ein Photoshop Tutorial (Autor: Pixelmetrie) mit einer kompletten Website aus dem Online-Portal www.psd-tutorials.de
Hinweis: alle Tutorials häufig nur mit Kurzanleitungen und Lösungsansätzen, die gerne auch immer alternativ durch eigenen Umsetzungen eingetauscht werden
Besondere Technik: mit "Buntglas-Mosaik" die Hautpfarben einer Grundgrafik ermitteln
Empfehlung: Grafikelemente mittels Datei - Platzieren als SmartObjekte nutzen und damit nachträglich mittels "Inhalt ersetzen..." die Grafik einfach austauschen - Slices
Nutzung aktuell: Bereitstellung von Websitedarstellungen für Sie selbst oder Kunden bereits in Webtechnik
Nutzung klassisch: Herstellen von Grafikelementen für die "alten Tabellenlayouts / Fixlayouts"; heute wollen wir alles mit CSS stylen!
Werkezug zum Schneiden von Webseiten in Bildbereiche; maßgeschneidertes Exportieren der Slices über "Für Web speichern..." in den gewünschten Formaten und Qualitäten; Orientierung von Schnittlinien mit Hilfslinien: fertige Grid-Systeme für Webdesign und Photoshop (z.B. 960 Gridsystem)
Wichtig: ich empfehle die Optimierung des "Speichern" der "Bilder und Webseite" auf Auslieferung mittels CSS, damit die Darstellung auch bereits sauber mittels CSS-Styles angepasst werden kann... - Coding: aus PSD wird HTML & CSS
Beispieltutorial von http://www.1stwebdesigner.com/wordpress/psd-to-html-tutorial-code-photoshop/ mit einer beispielhaften Herangehensweise einen grafischen PSD-Entwurf schrittweise in eine sauber kodierten HTML / CSS / JS Konstruktion umzusetzen - TN-Bescheinigungen, Feedback, letzte TN-Fragen
PSD to HTML/CSS
Bildprozessor
Google Fonts
benutzerfreun.de
Styleguide
Scribble - Mockups
Ich habe über die Jahre ein paar Infos (siehe Anhang Tastenkombinationen / Tastenkürzel) zum Thema "Photoshop" zusammengestellt, die Sie in dem folgendem Download als PDF downloaden können:
Vielen Dank für Ihr freundliches Feedback und Ihr Interesse an weiteren Seminaren (s. a. Illustrator).
Ihr Trainer Joe Brandes
