Photoshop Tutorials: Retro Web Design

Image Source:

Since the Internet is getting insufferably flat and sans serif these days, I thought it would be fun to look at some interesting techniques and projects that designers could use to make retro web designs. Vintage designs are on the rise along with minimalistic design which means your old style can bring a new flair to your website!

These are 5 Photoshop tutorials taken from around the Internet that teach some interesting skills and layouts for use in retro web work.

1. Lichtenstein-esque Art:

Lichtenstein-esque Art

Melissa Evans is responsible for this gem, and while the technique may not be as advanced, the example has enormous possibilities for background and foreground images in websites. It could be a talking head for a retro-style speech bubble (everyone loves cheesy dialogue) or a background image as a wonderful set-piece (high quality images are being put in this place more and more, and this is an excellent way to establish a theme on a homepage or even intro-page). The added possibility of having other modern personalities like Ms. Johansson here add a possible connection of past and present that could be equally fun to play with.

2. Vintage Collage:

Vintage Look Collage

Okay, so I’m a sucker for set-pieces. Ciara Phelan put together this tutorial for another excellently fluid example of photoshop work. There’s a lot that can be done with something like this, everything from thematic work to interactive work. Something like this could make an excellent point of interaction for viewers, mysteriously poring through pictures of vacation homes or simply checking out old pictures of aged scenery. Something like this takes your audience into a mindset of discovery, as the whole piece just draws you in.

3. Retro Web-Page:

Retro Web-Page

Constantin Potorac created this retro tutorial detailing the creation of a one page site that I’m sure could be expanded upon to make an awesome site. Seeing all those older image styles makes the rather new font that much easier to take, and the hexagons make an awesome alternative way to present both information and images that could well shake viewers out of their normality-created haze. The old-style banner and logo up top are also a treat.

4. Audio Dial Interface:

Audio Dial Interface

Okay, okay, so it’s not the most retro looking thing in the world. But bringing the retro style of twisty knobs to the Internet definitely counts! This tutorial from medialoot details the creation of an audio interface element for use in what I could consider as many a retro style website. If imagery was all you were after, than a vintage version of this could certainly grace any website focusing on sound or music. It would be a welcome relief, I think, compared to the gigantic number of music and radio websites competing to be the sleekest and simplest one around or viewer participation could be added by making the dial one of the ways that people control their music (decrease the volume by turning the dial, give them some visual representation of on-site activity). That would be a huge boon to people’s interactions with their site, and add a wow factor as well.

5. Photorealistic Vintage Sign:

Photorealistic Vintage Sign

Stephan Petrany gives us a wonderful example of the power of Photoshop in this tutorial combining numerous difficult techniques into one photorealistic sign from scratch. This is a wow moment, a set-piece that allows you to show off some serious artistic talent. Right away the possibilities on a design site are numerous, either just displaying examples of greatness in terms of artistic skill or conveying the types of projects that you do very well. Otherwise, the ability to create a retro-style version of your own logo could be an interesting way to break the mold and explore other modes of displaying your image. Too many new Internet companies forget that vintage images hold power, and there are other markets besides those that constantly desire the new and shiny. Take a leap, do some retro work. You might find it was just what you needed.

Leave a Reply