Retro colors are a great way to give your website an older/vintage feel; it can give your design a little something different from the regular fully saturated colors that you see often in modern-themed designs. This article is both a showcase of retro-colored themes in existing web designs, as well as a tutorial on how to achieve retro colors using Adobe Photoshop (you’ll learn about five different techniques).
Retro colors in web design
Before we delve into using retro colors, first let’s peek at some existing web designs that use retro/vintage colors really well.
Kitschen Sink
Huxley Prairie Festiva
Clickfarm Interactive
Douglas Menezes
The Literary Bohemian
Michela Chiucini
Hope Unlimited
Design Log of Ayaka ito
f claire baxter
Mia Mäkilä
De PSD a HTML
Owltastic
Coopers Kids
SproutBox
Nou Zeppelin
Kingsford Competition Briquets
One Promo
Element Fusion’s Internship Program
Joe Longstreet
Mplusz
THINK. DO. CREATE.
Hardscapes Etc.
Social Snack
web-gab.com
JOBY
Supermercati Motta
How to use retro colors in your designs using Photoshop
Now that we’ve seen some examples of websites with retro colors, we are going to look at a few ways to create them in Adobe Photoshop.
Use the Color Picker to reduce saturation
Click on the Foreground color in your Tools Panel; this will open up the Color Picker Dialog box.
Start with a red color (#FF0000). Now, click directly to the left of the red color you’ve chosen. The more you go towards the left, the more reduced the saturation is.
Drop the layer’s Opacity to reduce saturation
If you drop down your opacity in the Layers Panel, this will also drop down your saturation. The bad (or good) thing about this is that if there is anything behind it, it will show through.
Photo Filter Image Adjustment
In order to reduce saturation by way of the Photo Filter Image Adjustment, we have to first get the inverse of our color; to do this, press Ctrl + I (which is the shortcut keystroke for Image > Adjustments > Invert).
Next, choose the Eyedropper Tool in the Tools Panel and click on the inverted color in your canvas to sample it and set it as your Foreground color. Once you have set your color, press Ctrl + I again to revert back to the original color. Now, go to Image > Adjustments > Photo Filter.
Finally, change the color to our inverted color.
Hue/Saturation Image Adjustment
With this method, we want to go into the Hue/Saturation dialog box by pressing Ctrl + U or going to Image > Adjustments > Hue/Saturation. To lessen the saturation, drag the Saturation option slider to the left.
This is probably the easiest and best way to get your saturation reduced for an entire image.
Using Textures
Using a texture is also a good way to give your website a retro/vintage look and feel. Not only does it change the color, but it also gives you a nice, uneven and worn look.
There are a few ways to change your colors with a texture, and here’s one way to do it. First, we are going to grab a texture from Zen Textures. Open up the texture in Photoshop and place it on top of the red square.
Then change its layer’s blend mode to Screen. Now to make our image less of a peach-colored, drop down the opacity to somewhere around 50%.
We hope that you enjoyed this little article on using retro/vintage colors.
If you have any tips, tricks, and techniques to share with other readers when using this color theme – please be sure to drop us a note in the comments!
Related Content
Related Resources
- How to Design the Web in a High-Def World
- Color: The Next Limited Resource?
- Best Relational Database Management System?
- A Look into Color Theory in Web Design
- 10 Simple Tips for Launching a Website
- The Anatomy of a Website
- Negative Space in Webpage Layouts: A Guide
- Using Charts and Graphs for Content
- Web Languages: Decoded
Marketing Tips for Niche Industries
- Web Design for Excavation Companies: Top 5 Tips (With Examples!)
- 5 Web Design Tips for Fence Installers
- 5 Simple and Successful Web Design Tips for Auto Parts Retailers
- Tips for Medical Website Designs
- Medical Website Design from an Award Winning Agency
- Top 10 Effective Web Design Tips for Auto Service Centers
- Web Design for Renewable Energy: Tips for a Site That Shines
- Insurance Website Design Services
- 5 Web Design Tips for Fertility Clinics
How is your website’s SEO?
Use our free tool to get your score calculated in under 60 seconds.
Continue Reading
Get posts by email
Join 200,000 marketing managers and subscribe to Revenue Weekly!
"*" indicates required fields
WebFX Careers
Join our mission to provide industry-leading digital marketing services to businesses around the globe - all while building your personal knowledge and growing as an individual.