Design-Evolution: 13 legendäre Photoshop-Tutorials (damals und heute)

Im Jahr 2008, als dieser Beitrag zum ersten Mal erschien, sah das Designlernen völlig anders aus. Es gab kein YouTube voller 4K-Tutorials, kein Canva, und der Begriff “Prompt Engineering” hätte nach Science-Fiction geklungen. Aber es gab Blogs wie Noupe, Nettuts+ und Abduzeedo, und angehende Designer verbrachten ganze Nächte damit, Lichteffekte und Texturen Schritt für Schritt nachzubauen.

Die ursprüngliche Liste “13 Most Advanced Tutorials” ist heute eine Zeitkapsel. Ein zweiter Blick lohnt sich nicht wegen der Techniken (die veraltet sind), sondern um zu sehen, wie weit sich alles entwickelt hat. Der folgende Text stützt sich auf Daten von Adobe, Figma, dem Computer History Museum und Veröffentlichungen aus der jeweiligen Zeit, und jedes Datum lässt sich über den angegebenen Link prüfen.

#Liste der 13 Photoshop-Tutorials von Noupe aus dem Jahr 2008

Die Noupe-Redaktion veröffentlichte die Zusammenstellung am 26. November 2008 unter dem Titel “Pushing Photoshop To The Limit: 13 Most Advanced Tutorials”. Beim erneuten Lesen fällt etwas auf, das nach so vielen Jahren leicht vergessen wird: Die Liste handelte nur zum Teil von Photoshop. Drei der dreizehn Tutorials zeigten, wie aus einer PSD-Datei eine funktionierende Website wird, und mehrere kombinierten Photoshop mit Flash, After Effects oder Cinema 4D.

Die Titel bleiben im Original, weil sie so im Archiv zu finden sind. Die Zusammensetzung beschreibt das Jahr 2008 gut. Photoshop stand im Zentrum der Arbeit, aber das Ergebnis endete selten als Bilddatei. Es ging weiter nach Flash, in ein Video oder nach HTML und CSS.

#Welche Effekte in Photoshop-Tutorials 2008 im Trend lagen

1. Skeuomorphismus: Alles musste echt aussehen. Holz brauchte eine Maserung, Metall musste glänzen, und Buttons hatten so viele Schatten (Drop Shadow) und Leuchteffekte (Inner Glow), dass sie wie Gummibonbons wirkten.
2. Lichteffekte und 3D-Typografie: abstrakte Lichtstreifen, Neon, “kosmische” Hintergründe, Buchstaben in die dritte Dimension gezogen. Die Tutorials zeigten, wie man Pinsel und Füllmethoden bis an die Grenze ausreizt, und das Volumen der Buchstaben entstand oft in Cinema 4D und wurde in Photoshop zusammengesetzt.
3. Fotomanipulation: mehrere Fotos zu einer Szene verbinden. Damals bedeutete das stundenlanges Maskieren mit dem Zeichenstift-Werkzeug. Heute übernimmt einen Teil dieser Arbeit die KI-gestützte Auswahl.

#Woher Photoshop kam und wer es geschrieben hat

Am besten dokumentiert die Geschichte das Computer History Museum, das 2013 den Quellcode von Photoshop 1.0.1 veröffentlichte. Laut dem Museum schrieb Thomas Knoll, Doktorand im Fach Computer Vision an der University of Michigan, 1987 ein Programm zum Anzeigen und Bearbeiten digitaler Bilder. Sein Bruder John Knoll, der bei Industrial Light & Magic arbeitete, fand das Werkzeug für die Fotobearbeitung nützlich. Das Programm hieß damals Display.

Im Sommer 1988 kamen die Brüder zu dem Schluss, dass daraus ein kommerzielles Produkt werden könnte, und benannten es in Photoshop um. Rund 200 Exemplare der Version 0.87 wurden mit Scannern von Barneyscan unter dem Namen Barneyscan XP ausgeliefert. Im April 1989 schloss Adobe den Lizenzvertrag für den Vertrieb einer verbesserten Version ab, und Version 1.0 für den Apple Macintosh kam am 19. Februar 1990 in den Handel, wie Adobe im Artikel zum 25-jährigen Jubiläum des Programms festhält.

Die technischen Details dieses Codes zeigen die Größenordnung eines Ein-Personen-Projekts. Version 1.0.1 umfasst 179 Dateien und rund 128.000 Zeilen, etwa 75 Prozent in Pascal und etwa 15 Prozent in 68000-Assembler. Thomas Knoll sagte dem Museum: “Bei Version 1 war ich der einzige Entwickler, und bei Version 2 waren wir zu zweit” (Thomas Knoll, Computer History Museum, eigene Übersetzung). In einem Interview mit Adobe im Jahr 2015 ergänzte er, dass er den Dialog Tonwertkorrektur (Levels) als erste große Korrekturfunktion erfunden hat und dass die ersten Versionen vor allem auf das Verlagswesen und Grafiker zielten, nicht auf Fotografen (Adobe Blog).

#Wann Ebenen in Photoshop eingeführt wurden

Ebenen kamen mit Version 3.0 im Jahr 1994 ins Programm. Das Computer History Museum beschreibt sie als die Möglichkeit, ein Bild in mehrere Ebenen aufzuteilen. Für die Tutorials auf der Noupe-Liste war diese Änderung die Grundlage von allem: Jeder Schritt nach dem Muster “Ebene duplizieren, Modus auf Negativ multiplizieren stellen, Deckkraft senken” setzt voraus, dass das Bild aus unabhängigen Schichten besteht. Vor Version 3.0 hätte man ein solches Tutorial völlig anders schreiben müssen, weil jede Änderung die Pixel sofort überschrieb.

Aus demselben Grund sind Ebenen heute der Kern der neuen KI-Funktionen. Adobe beschreibt die Ergebnisse von Generativem Füllen als Inhalt in eigenen generativen Ebenen, die sich rückgängig machen lassen, ohne das Original zu zerstören. Das Arbeitsmodell von 1994 hat damit jeden späteren Wechsel der Oberfläche überdauert.

#Von Photoshop 7 zur Creative Suite und zur Creative Cloud

Die Versionsnummerierung endete mit Photoshop 7. In einer Pressemitteilung vom 27. Oktober 2003, wiedergegeben von Imaging Resource, gab Adobe die Auslieferung der Creative Suite bekannt, die neue Versionen von Photoshop, Illustrator, InDesign und GoLive bündelte, und stellte Photoshop CS als Nachfolger von Photoshop 7 vor. Danach hießen die Versionen CS, CS2 und so weiter bis CS6.

Die nächste Änderung betraf das Verkaufsmodell. Am 6. Mai 2013 gab Adobe auf der Konferenz MAX bekannt, dass keine neuen Versionen der Creative-Suite-Produkte geplant seien und die Kreativsoftware über die Creative Cloud kommen werde. Das Unternehmen versprach, CS6 weiter zu unterstützen. Laut MacTrast, das am selben Tag über die Ankündigung berichtete, sollte die neue, nur im Abonnement erhältliche Creative Cloud im Juni 2013 starten.

Für alle, die mit Tutorials lernten, hatte das eine praktische Folge. Ein Tutorial von 2008 setzte eine bestimmte Version voraus (Flash CS3 steht sogar im Titel von Nr. 5). Nach dem Wechsel zum Abonnement bekamen alle Nutzer Updates im selben Takt, deshalb nannten Tutorials keine Versionsnummer mehr als Voraussetzung und bezogen sich auf das Programm in seinem aktuellen Stand.

#Wo man Photoshop vor YouTube lernte

Bezahlte Schulungen für Grafiksoftware gab es lange vor den Blogs. Lynda.com wurde 1995 von Lynda Weinman und Bruce Heavin gestartet. Am 9. April 2015 kündigte LinkedIn an, den Dienst für 1,5 Milliarden Dollar in bar und in Aktien zu kaufen, wie PCWorld berichtete. Videokurse mit strukturiertem Lehrplan waren also ein eigener Markt, neben kostenlosen Blogartikeln.

YouTube startete 2005, und das erste Video, “Me at the zoo”, wurde am 23. April 2005 hochgeladen. 2008 gab es Video also schon, aber das Text-Tutorial mit Screenshots dominierte noch Zusammenstellungen wie die Noupe-Liste. Alle dreizehn Einträge sind Blogartikel.

Das bekannteste Beispiel dieser Welle ist das Tuts+-Netzwerk von Envato. Laut der Serie “10 Years of Envato Tuts+” erschien das erste Tutorial am 14. September 2007, geschrieben von Envato-Mitgründer und CEO Collis Ta’eed. Daraus wuchs ein Netzwerk thematischer Blogs, darunter Nettuts+, von dem zwei Einträge der Liste stammen.

#Was aus den Flash-Tutorials wurde

Drei Einträge der Noupe-Liste (Nr. 4, 5 und 10) behandelten Flash oder die Übertragung von Photoshop-Dateien in eine Animation. Heute lässt sich dieser Weg im Browser nicht mehr nachgehen. Adobe kündigte im Juli 2017 das Ende des Flash Players an, beendete den Support am 31. Dezember 2020 und blockiert seit dem 12. Januar 2021 die Ausführung von Flash-Inhalten im Player, verbunden mit der Empfehlung, ihn sofort zu deinstallieren (Adobe, Flash Player EOL).

Das ist ein gutes Beispiel dafür, warum alte Tutorials selektiv gelesen werden sollten. Der Teil über die Vorbereitung der Grafik in Photoshop (Ebenen, Masken, Export) ergibt weiterhin Sinn. Der Teil über das Einbinden des Effekts in eine Seite beschreibt eine Plattform, die es nicht mehr gibt. Animationen, die 2008 in Flash entstanden, baut man heute mit CSS, SVG oder JavaScript.

#Wie die Umsetzung von PSD zu HTML 2008 aussah

Die letzten drei Einträge der Noupe-Liste beschreiben einen Prozess, der 2008 bei der Arbeit an Websites Standard war. Der Designer zeichnete die ganze Seite in Photoshop als eine einzige PSD-Datei mit Ebenen. Der Entwickler zerschnitt sie, exportierte Hintergründe und Buttons als einzelne Bilder und baute die Struktur dann in XHTML und CSS nach. Die Tutorials von Nettuts+ und CSS-Tricks lehrten genau diese Abfolge, vom Entwurf zum Code, Schritt für Schritt.

Dieses Modell hatte einen eingebauten Fehler. Die PSD-Datei war das Bild eines einzigen Zustands der Seite in einer einzigen Breite. Sie sagte nichts über das Verhalten auf dem Smartphone, über den Hover-Zustand oder darüber, was passiert, wenn der Text länger wird. Den Entwurf in Code zu übertragen bedeutete, Abstände und Farben in Photoshop von Hand auszumessen. Genau diesen Schritt ersetzten später die Designwerkzeuge im Browser.

#Wie Figma Photoshop im Interface-Design ablöste

Figma wurde 2012 von Dylan Field und Evan Wallace gegründet. In der Mitteilung zur geplanten Übernahme beschrieb Adobe Figma als kollaborative Designplattform “mit dem Web als Ausgangspunkt”, die Produktdesign im Web vorangebracht habe (Adobe, 15. September 2022, eigene Übersetzung). Im Dezember 2015 öffnete Figma die Anmeldung mit Warteliste, wie unter anderem TechCabal berichtete. Ende September 2016 verließ Figma die Beta-Phase und veröffentlichte die erste öffentliche Version, die bis Ende 2016 kostenlos bleiben sollte, wie t3n meldete.

Der Unterschied zum PSD-Prozess war grundlegend. Der Entwurf lebte im Browser, mehrere Personen konnten gleichzeitig daran arbeiten, und der Entwickler öffnete dieselbe Datei und las Maße, Farben und Stile ab, ohne Bilder zu zerschneiden. Komponenten und Bibliotheken ersetzten das Kopieren von Ebenengruppen zwischen Dateien.

Am 15. September 2022 kündigte Adobe die Absicht an, Figma für rund 20 Milliarden Dollar zu kaufen, etwa zur Hälfte in bar und zur Hälfte in Aktien. Das Geschäft kam nicht zustande. Am 18. Dezember 2023 gaben beide Unternehmen bekannt, den Vertrag einvernehmlich aufzulösen. Sie sahen keinen klaren Weg zur Genehmigung durch die Europäische Kommission und die britische Wettbewerbsbehörde CMA, und Adobe zahlte Figma die vereinbarte Auflösungsgebühr. Dylan Field schrieb im Figma-Blog: “Figma und Adobe sehen keinen Weg mehr zur behördlichen Genehmigung der geplanten Übernahme” (Dylan Field, Figma Blog, eigene Übersetzung). Figma blieb ein unabhängiges Unternehmen, und am 31. Juli 2025 schrieb der erste Investor, Index Ventures, über den Börsengang.

#Welche KI-Werkzeuge in Photoshop Handarbeit ersetzen

Beim Blick auf diese Tutorials fällt eines auf: Handwerk. Sie verlangten manuelle Präzision. Heute erledigen die Adobe-Werkzeuge (Firefly, Neural Filters) die “Drecksarbeit”.

• Statt Zeichenstift-Werkzeug: Motiv auswählen, gestützt auf KI.
• Statt manueller Schattierung: Generatives Füllen fügt Schatten hinzu, die zur Beleuchtung der Szene passen.
• Statt Texturen zu suchen: Texturen per Prompt erzeugen.

#Wann Generatives Füllen in Photoshop kam

Adobe kündigte Generatives Füllen (Generative Fill) am 23. Mai 2023 an. Laut der Pressemitteilung von Adobe lassen sich damit per Textanweisung Bildteile hinzufügen, erweitern und entfernen, und das Ergebnis entsteht in eigenen generativen Ebenen, die sich rückgängig machen lassen. Am Tag der Ankündigung war die Funktion in der Beta-App von Photoshop und als Modul in der Firefly-Beta verfügbar, die allgemeine Verfügbarkeit war für die zweite Jahreshälfte 2023 geplant. Adobe gab außerdem an, dass das Firefly-Modell unter anderem mit lizenzierten Bildern aus Adobe Stock trainiert wurde.

Die reguläre Version kam am 13. September 2023. Terry White von Adobe schrieb an diesem Tag, dass Generatives Füllen und Generatives Erweitern in der regulären Photoshop-Version ohne Beta funktionieren und für die kommerzielle Nutzung freigegeben sind (Terry White). Zwischen Ankündigung und regulärer Version lagen weniger als vier Monate.

Die Fähigkeiten, die die Tutorials von 2008 vermittelten (Licht verstehen, Masken, Reihenfolge der Ebenen), entscheiden heute darüber, ob sich ein Ergebnis von Generativem Füllen korrigieren und in einem Projekt verwenden lässt oder verworfen werden muss. Eine generative Ebene ist eine normale Ebene: Sie lässt sich maskieren, verschieben und mit anderen kombinieren, genau wie 1994.

#Zeitleiste vom Programm Display bis zu Generativem Füllen

#Lohnt sich die Rückkehr zu klassischen Photoshop-Tutorials

Trotz der KI-Revolution ist es eine sehr gute Übung, mindestens ein Tutorial der alten Schule durchzuarbeiten. Es lehrt Respekt vor Ebenen und das Verständnis dafür, wie Licht Form aufbaut.

Der Link zur ursprünglichen Zusammenstellung funktioniert noch, aber man sollte ihn wie ein Museum behandeln. Design ist heute klarer (Flat, Material), funktionaler und schneller. Ob es denselben Charakter hat wie die handgemachten Grafiken von 2008, muss jeder Leser selbst beurteilen.

Alte Tutorials lehren, auf Licht und Form zu schauen, auch wenn das Endergebnis auf einer Website nicht mehr verwendet wird. Was wir heute mit diesem Blick machen, beschreibt die Seite zur WordPress-Entwicklung.

Auf der Umsetzungsseite führen wir dieses Thema unter WooCommerce-Entwickler.