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).
Before we delve into using retro colors, first let’s peek at some existing web designs that use retro/vintage colors really well.
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.
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.
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.
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.
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 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!
