Designutvikling - 13 legendariske photoshop-tutorials (da og nå)

I 2008, da dette innlegget først ble laget, så det å lære design helt annerledes ut. Det var ingen YouTube fylt med 4K-tutorials, det var ingen Canva, og begrepet “Prompt Engineering” ville hørt ut som science fiction. Men det var blogger som Noupe, Nettuts+ eller Abduzeedo, og vi, nybegynner-designere, tilbragte netter med møysommelig å gjenskape lyseffekter og teksturer steg for steg.

Den originale listen “13 Most Advanced Tutorials” er en tidskapsel i dag. Det er verdt å besøke den på nytt ikke for teknikkene (som er utdaterte), men for å forstå hvor langt vi har kommet. Teksten under bygger på datoer fra Adobe, Figma, Computer History Museum og samtidige publikasjoner, og hver dato kan sjekkes via lenken som står ved den.

#Listen med 13 Photoshop-tutorials fra Noupe i 2008

Redaksjonen i Noupe publiserte samlingen 26. november 2008 under tittelen “Pushing Photoshop To The Limit: 13 Most Advanced Tutorials”. Leser man siden på nytt, ser man noe som er lett å glemme etter så mange år: listen handlet bare delvis om Photoshop. Tre av de tretten lærte bort hvordan en PSD-fil blir til en fungerende nettside, og flere kombinerte Photoshop med Flash, After Effects eller Cinema 4D.

Titlene står på originalspråket, fordi det er slik du finner dem i arkivet. Sammensetningen beskriver 2008 godt. Photoshop var sentrum i arbeidet, men resultatet stoppet sjelden ved en bildefil. Det gikk videre til Flash, til video eller til HTML og CSS.

#Hva var trendy i Photoshop-tutorials i 2008

1. Skeuomorfisme: Alt måtte se ekte ut. Tre trengte struktur, metall måtte skinne, og knapper hadde så mange skygger (Drop Shadow) og glød (Inner Glow) at de så ut som godteri.
2. Lyseffekter og 3D-typografi: Abstrakte lysstriper, neon, “kosmiske” bakgrunner, bokstaver trukket ut i tredje dimensjon. Tutorials lærte oss å bruke Pensler og Blandingsmodus til det ytterste, og formen på bokstavene ble ofte bygd i Cinema 4D og satt sammen i Photoshop.
3. Fotomanipulasjon: Å sette sammen flere bilder til én scene. Den gang betydde det timevis med maskering med Penn-verktøyet. I dag gjør AI-basert markering en del av den jobben.

#Hvor kommer Photoshop fra og hvem skrev det

Historien er best dokumentert av Computer History Museum, som i 2013 publiserte kildekoden til Photoshop 1.0.1. Ifølge museet skrev Thomas Knoll, doktorgradsstudent i datasyn ved University of Michigan, i 1987 et program for å vise og endre digitale bilder. Broren John Knoll, som jobbet hos Industrial Light & Magic, fant verktøyet nyttig til bilderedigering. Programmet het den gang Display.

Sommeren 1988 kom brødrene fram til at dette kunne bli et kommersielt produkt, og byttet navnet til Photoshop. Rundt 200 eksemplarer av versjon 0.87 ble levert sammen med skannere fra Barneyscan under navnet Barneyscan XP. I april 1989 fikk Adobe på plass en lisens for å distribuere en utvidet versjon, og versjon 1.0 for Apple Macintosh kom i butikkene 19. februar 1990, slik Adobe skriver i innlegget om programmets 25-årsjubileum.

De tekniske detaljene i koden viser omfanget av et enmannsprosjekt. Versjon 1.0.1 består av 179 filer og rundt 128 000 linjer, omtrent 75 prosent i Pascal og omtrent 15 prosent i 68000-assembler. Thomas Knoll sa til museet: “I versjon 1 var jeg den eneste ingeniøren, og i versjon 2 hadde vi to” (Thomas Knoll, Computer History Museum, egen oversettelse). I et intervju med Adobe i 2015 la han til at han selv fant opp Nivåer-dialogen (Levels) som den første store justeringsfunksjonen, og at de første versjonene først og fremst var rettet mot trykk og grafikere, ikke fotografer (Thomas Knoll, Adobe Blog, egen oversettelse).

#Når kom lag i Photoshop

Lag kom inn i programmet med versjon 3.0 i 1994. Computer History Museum beskriver det som muligheten til å dele et bilde inn i flere lag. For tutorialene på Noupe-listen var dette selve grunnmuren: hvert steg av typen “dupliser laget, sett modus til Screen, senk dekkevnen” forutsetter at bildet består av uavhengige skiver. Før versjon 3.0 måtte en slik tutorial vært skrevet helt annerledes, fordi hver endring straks overskrev pikslene.

Av samme grunn er lag i dag kjernen i de nye AI-funksjonene. Adobe beskriver resultatene fra Generative Fill som innhold som lages i egne generative lag, og som kan angres uten å ødelegge originalen. Arbeidsmodellen fra 1994 har dermed overlevd alle senere endringer i grensesnittet.

#Fra Photoshop 7 til Creative Suite og Creative Cloud

Versjonsnumrene stoppet ved Photoshop 7. I slutten av september 2003 kunngjorde Adobe pakken Creative Suite, med nye versjoner av Photoshop, Illustrator, InDesign og GoLive, og i en pressemelding 27. oktober 2003, gjengitt av Imaging Resource, meldte selskapet at pakken ble sendt ut og presenterte Photoshop CS som etterfølgeren til Photoshop 7. Fra da av het versjonene CS, CS2 og så videre, fram til CS6.

Neste endring gjaldt salgsmodellen. 6. mai 2013, på MAX-konferansen, kunngjorde Adobe i pressemeldingen “Adobe Accelerates Shift to the Cloud” at det ikke var planer om flere utgaver av Creative Suite, og at utviklingen av kreativ programvare skulle samles i Creative Cloud. Selskapet lovet fortsatt støtte for CS6. Ifølge MacTrast, som omtalte kunngjøringen samme dag, skulle de nye CC-versjonene, bare tilgjengelige som abonnement, komme ut til brukerne i juni 2013.

For dem som lærte av tutorials, fikk dette en praktisk følge. En tutorial fra 2008 forutsatte en bestemt versjon (Flash CS3 står rett i tittelen på nummer 5). Etter overgangen til abonnement fikk alle brukere oppdateringer i samme takt, så tutorials sluttet å oppgi versjonsnummer som forutsetning og begynte å vise til programmet slik det er nå.

#Hvor lærte man Photoshop før YouTube

Betalt opplæring i grafisk programvare fantes lenge før bloggene. Lynda.com ble grunnlagt i 1995 av Lynda Weinman og Bruce Heavin. 9. april 2015 kunngjorde LinkedIn oppkjøpet av tjenesten for rundt 1,5 milliarder dollar, slik PCWorld rapporterte. Videokurs med strukturert pensum var altså et eget marked, ved siden av gratis blogginnlegg.

YouTube startet i 2005, og den første videoen, “Me at the zoo”, ble lastet opp 23. april 2005. I 2008 fantes video altså allerede, men den tekstbaserte tutorialen med skjermbilder dominerte fortsatt samlinger som Noupe-listen. Alle tretten oppføringene er artikler på blogger.

Det mest kjente eksempelet på denne bølgen er Tuts+-nettverket til det australske selskapet Envato. Ifølge serien “10 Years of Envato Tuts+” kom den første tutorialen 14. september 2007, skrevet av Envatos medgründer Collis Ta’eed. Fra Photoshop-nettstedet Psdtuts+ vokste det fram et nettverk av fagblogger, blant dem Nettuts+, som to av oppføringene på listen kommer fra. I 2014 slo Envato sammen alle disse nettstedene til ett Envato Tuts+.

#Hva skjedde med Flash-tutorialene

Tre oppføringer på Noupe-listen (nr. 4, 5 og 10) handlet om Flash eller om å flytte filer fra Photoshop til animasjon. Den veien kan ikke gjentas i nettleseren i dag. Adobe varslet i juli 2017 slutten for Flash Player, avsluttet støtten 31. desember 2020, og blokkerer fra 12. januar 2021 at Flash-innhold kjøres i spilleren, med en klar anbefaling om å avinstallere den umiddelbart (Adobe, Flash Player EOL).

Dette viser hvorfor gamle tutorials bør leses selektivt. Delen om å forberede grafikken i Photoshop (lag, masker, eksport) gir fortsatt mening. Delen om å legge effekten inn på en nettside beskriver en plattform som ikke finnes lenger. Animasjoner som i 2008 ble laget i Flash, bygges i dag med CSS, SVG eller JavaScript.

#Hvordan så PSD til HTML ut i 2008

De tre siste oppføringene på Noupe-listen beskriver en prosess som i 2008 var standard for arbeid med nettsider. Designeren tegnet hele siden i Photoshop som én PSD-fil med lag. Utvikleren skar den opp, eksporterte bakgrunner og knapper som separate bilder og bygde deretter oppsettet på nytt i XHTML og CSS. Tutorialene fra Nettuts+ og CSS-Tricks lærte nettopp denne rekkefølgen, fra skisse til kode, steg for steg.

Modellen hadde et innebygd problem. PSD-filen var et bilde av én tilstand av siden, i én bredde. Den sa ingenting om oppførselen på mobil, om hover-tilstanden eller om hva som skjer når teksten blir lengre. Å overlevere designet til kode betydde å måle avstander og farger manuelt i Photoshop. Det var nettopp dette leddet som designverktøy i nettleseren senere tok over.

#Hvordan Figma erstattet Photoshop i grensesnittdesign

Figma ble grunnlagt i 2012 av Dylan Field og Evan Wallace. Adobe beskrev det i meldingen om det planlagte oppkjøpet som et verktøy “født på nettet”, som var først ute med produktdesign i nettleseren (Adobe, 15. september 2022, egen oversettelse). En gratis forhåndsversjon på invitasjon startet i desember 2015, noe blant andre TechCabal omtalte. I slutten av september 2016, som det tyske nettstedet t3n meldte, gikk Figma ut av beta og ga ut den første offentlige versjonen, gratis ut 2016.

Forskjellen fra PSD-prosessen var grunnleggende. Designet levde i nettleseren, flere personer kunne jobbe i det samtidig, og utvikleren åpnet den samme filen og leste av mål, farger og stiler uten å skjære opp bilder. Komponenter og biblioteker erstattet kopiering av laggrupper mellom filer.

15. september 2022 kunngjorde Adobe at selskapet ville kjøpe Figma for rundt 20 milliarder dollar, omtrent halvt i kontanter og halvt i aksjer. Avtalen ble aldri gjennomført. 18. desember 2023 kunngjorde de to selskapene at de i fellesskap avsluttet avtalen. De skrev at de ikke så noen klar vei til godkjenning fra EU-kommisjonen og britiske Competition and Markets Authority (CMA), og Adobe betalte Figma det avtalte bruddgebyret. Dylan Field skrev på Figmas blogg: “vi ser ikke lenger en vei mot godkjenning av avtalen fra myndighetene” (Dylan Field, Figma Blog, egen oversettelse). Figma fortsatte som selvstendig selskap, og 31. juli 2025 skrev den første investoren, Index Ventures, om børsnoteringen.

#Hvordan lærer vi Photoshop i dag

Når man ser på disse tutorialene, er det én ting som står ut: håndverk. De krevde manuell presisjon. I dag gjør Adobe-verktøy (Firefly, Neural Filters) “drittarbeidet” for oss.

• I stedet for Penn-verktøy: Vi har “Velg motiv” som fungerer på AI.
• I stedet for manuell skyggelegging: Generativ fylling legger til skygger som passer med scenebelysningen.
• I stedet for å søke etter teksturer: Vi genererer teksturer med en prompt.

#Når kom Generative Fill i Photoshop

Adobe kunngjorde Generative Fill 23. mai 2023. Ifølge pressemeldingen fra Adobe lar funksjonen deg legge til, utvide og fjerne deler av et bilde med en tekstinstruks, og resultatet lages i egne generative lag som kan angres. Samme dag var den tilgjengelig i betaappen for Photoshop og som modul i Firefly beta, med generell tilgjengelighet varslet til andre halvdel av 2023. Adobe opplyste også at Firefly-modellen blant annet var trent på lisensierte bilder fra Adobe Stock.

Produksjonsversjonen kom 13. september 2023. Terry White fra Adobe skrev da at Generative Fill og Generative Expand fungerer i den vanlige utgaven av Photoshop, uten beta, og er godkjent for kommersiell bruk (Terry White). Fra kunngjøring til produksjonsversjon gikk det under fire måneder.

Ferdighetene som tutorialene fra 2008 lærte bort (forståelse av lys, masker, orden i lagene), avgjør i dag om et resultat fra Generative Fill kan rettes opp og brukes i et prosjekt, eller må forkastes. Et generativt lag er et vanlig lag: det kan maskeres, flyttes og kombineres med andre akkurat som i 1994.

#Tidslinje fra programmet Display til Generative Fill

#Er det verdt å gå tilbake til gamle Photoshop-tutorials

Til tross for AI-revolusjonen, mener jeg at å jobbe gjennom minst én “old school” tutorial er en flott øvelse. Det lærer ydmykhet overfor lag og forståelse for hvordan lys bygger form.

Linken til den originale samlingen fungerer fortsatt, men behandle den som et museum. I dag er design renere (Flat/Material), mer funksjonelt og… raskere. Men har det samme “sjel” som håndlagde grafikker fra 2008? Det får du selv bedømme.

Håndverket fra de gamle tutorialene sitter igjen som forståelse av lag, lys og form, selv når verktøyene for lengst er byttet ut. Skal den forståelsen over i et tema som lever i produksjon, er det der WordPress-utviklingen vår kommer inn.