Design evolution: 13 legendary Photoshop tutorials (then and now)

In 2008, when this post was first written, learning design looked completely different. There was no YouTube full of 4K tutorials, no Canva, and the term “prompt engineering” would have sounded like science fiction. But there were blogs such as Noupe, Nettuts+ and Abduzeedo, and beginner designers spent their nights recreating light effects and textures step by step.

The original list “13 Most Advanced Tutorials” is a time capsule today. It is worth revisiting not for the techniques (which are outdated) but to see how far things have come. The text below rests on dates from Adobe, Figma, the Computer History Museum and publications of the time, and each date can be checked at the linked source.

#List of 13 Photoshop tutorials from Noupe in 2008

The Noupe editorial team published the compilation on 26 November 2008 under the title “Pushing Photoshop To The Limit: 13 Most Advanced Tutorials”. Rereading the page shows something easy to forget after so many years: the list was only partly about Photoshop. Three of the thirteen tutorials taught how to turn a PSD file into a working website, and several combined Photoshop with Flash, After Effects or Cinema 4D.

The titles stay in the original, because that is how they appear in the archive. The mix describes 2008 well. Photoshop was the centre of the work, but the result rarely ended as an image file. It went on to Flash, to video, or to HTML and CSS.

#What effects were fashionable in Photoshop tutorials in 2008

1. Skeuomorphism: everything had to look real. Wood needed grain, metal had to shine, and buttons carried so many shadows (Drop Shadow) and glows (Inner Glow) that they looked like jelly sweets.
2. Light effects and 3D typography: abstract light streaks, neon, “cosmic” backgrounds, letters pulled into the third dimension. Tutorials taught how to push Brushes and Blending Modes to the limit, and the volume of the letters was often built in Cinema 4D and assembled in Photoshop.
3. Photo manipulation: combining several photographs into one scene. At the time that meant hours of masking with the Pen Tool. Today part of that work is done by AI-based selection.

#Where Photoshop came from and who wrote it

The history is best documented by the Computer History Museum, which in 2013 published the source code of Photoshop 1.0.1. According to the museum, in 1987 Thomas Knoll, a PhD student in computer vision at the University of Michigan, wrote a program to display and modify digital images. His brother John Knoll, who worked at Industrial Light & Magic, found the tool useful for editing photos. The program was then called Display.

In the summer of 1988 the brothers concluded that it could be a commercial product and renamed it Photoshop. About 200 copies of version 0.87 were bundled with Barneyscan scanners under the name Barneyscan XP. In April 1989 Adobe finalised a licence to distribute an improved version, and version 1.0 for the Apple Macintosh reached stores on 19 February 1990, as Adobe notes in its article on the program’s 25th anniversary.

The technical details of that code show the scale of a one-person project. Version 1.0.1 has 179 files and about 128,000 lines, about 75 percent in Pascal and about 15 percent in 68000 assembler. Thomas Knoll told the museum: “For version 1, I was the only engineer, and for version 2, we had two engineers” (Thomas Knoll, Computer History Museum). In a 2015 interview with Adobe he added that he invented the Levels dialog as the first major adjustment feature, and that the first versions were aimed mainly at the publishing and graphic artist markets, not at photographers (Adobe Blog).

#When layers arrived in Photoshop

Layers entered the program with version 3.0 in 1994. The Computer History Museum describes them as the ability to divide an image into multiple layers. For the tutorials on the Noupe list this change was the basis of everything: every step of the “duplicate the layer, set the mode to Screen, lower the opacity” kind assumes that the image is made of independent slices. Before version 3.0 such a tutorial would have had to be written in a completely different way, because every change overwrote the pixels at once.

For the same reason, layers are the core of the new AI features today. Adobe describes Generative Fill results as content created in their own generative layers, which can be reversed without destroying the original. The working model of 1994 has survived every interface change that came after it.

#From Photoshop 7 to Creative Suite and Creative Cloud

Version numbering ended with Photoshop 7. In a press release dated 27 October 2003, reproduced by Imaging Resource, Adobe announced that it had shipped Creative Suite, which combined new versions of Photoshop, Illustrator, InDesign and GoLive, and presented Photoshop CS as the successor to Photoshop 7. From then on the versions were called CS, CS2 and so on, up to CS6.

The next change concerned the sales model. On 6 May 2013, at the MAX conference, Adobe announced that it had no plans to release new versions of the Creative Suite products and would deliver its creative software through Creative Cloud. The company promised to keep supporting CS6. According to MacTrast, which reported the announcement the same day, the new subscription-only Creative Cloud would roll out in June 2013.

For people learning from tutorials this had a practical effect. A 2008 tutorial assumed a specific version (Flash CS3 appears in the very title of No. 5). After the move to subscriptions all users received updates at the same pace, so tutorials stopped naming a version number as a requirement and referred to the program in its current state.

#Where people learned Photoshop before YouTube

Paid training in graphics software existed long before blogs. Lynda.com was launched in 1995 by Lynda Weinman and Bruce Heavin. On 9 April 2015 LinkedIn announced that it was buying the service for 1.5 billion dollars in cash and stock, as PCWorld reported. Video courses with a structured curriculum were therefore a separate market, alongside free articles on blogs.

YouTube started in 2005, and its first video, “Me at the zoo”, was uploaded on 23 April 2005. In 2008 video already existed, but the text tutorial with screenshots still dominated compilations such as the Noupe list. All thirteen entries are blog articles.

The best known example of this wave is the Tuts+ network from Envato. According to the series “10 Years of Envato Tuts+”, the first tutorial was published on 14 September 2007, written by Envato co-founder and CEO Collis Ta’eed. The network grew into a set of themed blogs, among them Nettuts+, the source of two entries on the list.

#What happened to Flash tutorials

Three entries on the Noupe list (Nos. 4, 5 and 10) dealt with Flash or with moving Photoshop files into animation. Today that path cannot be repeated in the browser. Adobe announced the end of Flash Player in July 2017, stopped supporting it on 31 December 2020 and, since 12 January 2021, has blocked Flash content from running in the player, recommending that users uninstall it immediately (Adobe, Flash Player EOL).

It is a good example of why old tutorials should be read selectively. The part about preparing graphics in Photoshop (layers, masks, export) still makes sense. The part about putting the effect on a page describes a platform that no longer exists. Animations that were built in Flash in 2008 are built today with CSS, SVG or JavaScript.

#How PSD to HTML conversion worked in 2008

The last three entries on the Noupe list describe a process that was standard in website work in 2008. The designer drew the whole page in Photoshop as a single layered PSD file. The developer sliced it, exported backgrounds and buttons as separate images and then rebuilt the structure in XHTML and CSS. The Nettuts+ and CSS-Tricks tutorials taught exactly this sequence, from mockup to code, step by step.

This model had a built-in problem. The PSD file was a picture of one state of the page at one width. It said nothing about behaviour on a phone, about the hover state, or about what happens when the text gets longer. Moving the design into code meant measuring spacing and colours by hand in Photoshop. This is exactly the step that browser-based design tools later replaced.

#How Figma replaced Photoshop in interface design

Figma was founded in 2012 by Dylan Field and Evan Wallace. In the release on the planned acquisition, Adobe described it as a “web-first collaborative design platform” that “pioneered product design on the web” (Adobe, 15 September 2022). In December 2015 Figma opened sign-ups with a waiting list, as TechCabal, among others, reported. At the end of September 2016, as the German site t3n reported, Figma left beta and released its first public version, free until the end of 2016.

The difference from the PSD process was fundamental. The design lived in the browser, several people could work on it at the same time, and the developer opened the same file and read measurements, colours and styles without slicing images. Components and libraries replaced copying groups of layers between files.

On 15 September 2022 Adobe announced its intention to buy Figma for approximately 20 billion dollars, about half in cash and half in stock. The deal did not happen. On 18 December 2023 the two companies announced that they had mutually agreed to terminate the agreement. They said they saw no clear path to approval from the European Commission and the UK Competition and Markets Authority (CMA), and Adobe paid Figma the agreed termination fee. Dylan Field wrote on the Figma blog: “Figma and Adobe no longer see a path toward regulatory approval of our proposed acquisition” (Dylan Field, Figma Blog). Figma continued as an independent company, and on 31 July 2025 its first investor, Index Ventures, wrote about its stock market debut.

#Which Photoshop AI tools replace manual work

Looking at those tutorials, one thing stands out: craft. They demanded manual precision. Today Adobe tools (Firefly, Neural Filters) do the “dirty work”.

• Instead of the Pen Tool: Select Subject, powered by AI.
• Instead of manual shading: Generative Fill adds shadows consistent with the lighting of the scene.
• Instead of hunting for textures: textures generated from a prompt.

#When Generative Fill arrived in Photoshop

Adobe announced Generative Fill on 23 May 2023. According to the Adobe press release, the feature lets users add, extend and remove parts of an image with a text prompt, and the result is created in its own generative layers, which can be reversed. On the day of the announcement it was available in the Photoshop beta app and as a module in the Firefly beta, with general availability planned for the second half of 2023. Adobe also stated that the Firefly model was trained on, among other things, licensed Adobe Stock images.

The release version arrived on 13 September 2023. Terry White of Adobe wrote that day that Generative Fill and Generative Expand work in the release version of Photoshop, without the beta, and are ready for commercial use (Terry White). Less than four months passed between the announcement and the release version.

The skills that the 2008 tutorials taught (understanding light, masks and layer order) decide today whether a Generative Fill result can be corrected and used in a project or has to be thrown away. A generative layer is a normal layer: it can be masked, moved and combined with others just as in 1994.

#Timeline from the Display program to Generative Fill

#Is it worth going back to classic Photoshop tutorials

Despite the AI revolution, working through at least one old school tutorial is a great exercise. It teaches respect for layers and an understanding of how light builds form.

The link to the original compilation still works, but treat it as a museum. Design today is cleaner (flat, Material), more functional and faster. Whether it has the same character as the hand-made graphics of 2008 is for each reader to judge.

Old tutorials teach how to look at light and form, even when the final result is no longer used on a website. What we do with that eye today is described on the WordPress development page.

On the delivery side we cover this topic under WooCommerce developer.