Image may be NSFW.
Clik here to view.
I’m a huge supporter of style in web design and in the past couple of years we’ve seen many popular styles come into the mainstream. From grunge to watercolor, pixel art and retro vibes, the web is looking better and better by the minute. One of the most popular styles of late is the vintage look. So, in today’s tutorial I’m going to show you how to pull off a 40s movie inspired look for your next project.
I’ll start by breaking down the components of the style, then applying them to a photo and, finally, I’m going to show you how to get that same feeling and tone in your web designs. All buckled in now? Good, let’s get this show on the road then!
Clik here to view.
Proper vintage, ey!
What this puppy’s made of
- Black and White:
This would seem like a given, but it is worth mentioning. There should be no tonal variation, no slight hue, no colour information whatsoever. In order to properly recreate this style, 0 (zero) saturation is a must! - Low contrast:
Back in our chosen time period, white wasn’t white – it was light grey. And black wasn’t black either – it was dark grey. - Noise:
Since this is not an animation tutorial, I’ll be referencing noise that appears in old photos. We can’t accurately recreate movie noise because it was, well, moving. - Vignettes:
Back then vignettes were as common as the iconic blue Hi-8 lens flare of the 90s (just look at any old Die Hard movie). They weren’t intentional, though, but rather a defect of the early technology of “moving pictures”. - Blur:
Oh yeah, images were pretty foggy too. But this lack of sharpness also created a smooth, soft, almost warm glow in each and every picture. Quite romantic, really. - Typography:
This is the most fun part of all. The people who were handling typography back then were utter magicians. These people could use 4, 5, 10 font families in one single canvas and still have a cool, interesting and engaging design.
Let’s make some magic
Now that we’ve gone through the elements that make up this style, let’s put them to some good use and turn a regular old photo into an actual old photo.
I do need to point out that I believe in designing without software restrictions, so I won’t be referencing any specific tools here, just the techniques themselves. That means you can follow along whether you use Photoshop, Gimp, Paint Shop Pro and anything in between.
I used this picture from SXC as our base (*thanks to user bwilhelms for his awesome photo).
Clik here to view.
Batter up!
As you can see, it’s not exactly the best picture in the world, but for our needs it’s just right.
Clik here to view.
Blur & Curves
Apply a small Blur (1-3px). Then, pull up a Curves panel. This is, probably, the trickiest part of the tutorial, because this varies from picture to picture. Our original image has a lot of greens, a bit of red, and not so much blue. So, here’s how you do this: in the Curves panel, because we have a lot of green, we’re going to turn it down just a bit; we’ve got a bit of red, so we’ll turn that up a bit and because we have very few blues, we’re going to pump those up quite a bit. Think of it like a balancing act: got a lot of reds in a photo? – turn the red curve down.
I suggest working with Adjustment Layers, if your software of choice allows them. That way you can tweak any settings at a later time, and chances are you will probably need to.
Clik here to view.
Desaturate
Next, we’ll desaturate the image. It looks awful, I know. Don’t worry about it, we’re getting there.
Clik here to view.
Exposure Offset
Pull up your Exposure panel and change the Offset setting to a positive value. Be careful not to over do it, though. Now we’re getting somewhere, right?
Clik here to view.
Contrast
The Exposure Offset is a powerful tool to change the contrast of an image. And sometimes it’s just too powerful. So I toned the image down with a simple, dull, old Contrast change. Again, don’t over do it. Like with so many things in design, subtlety is key!
Clik here to view.
Levels
Back in the day, cameras weren’t fitted with the super-amazing-high-def-blow-your-eyes-out sensors we have today. In fact, they didn’t have sensors at all; they shot on actual film. Because the film got overexposed very fast if left in too much light, the camera cases were very tight and the lenses were very narrow. To make a long story short, movies back then were a lot darker. So, getting back to our business, pull up a Levels adjustment and darken the image a bit. You’ll want to tighten ONLY the midtones. If you tighten the black, as most of us are inclined to do, almost instinctively, you’ll get a lot of contrast. And this is one case when that’s very, very bad.
Clik here to view.
Make some noise!
Next up – the noise part. A bit of regular old noise on a new layer will do; just be sure to blur it afterward (any value between 2-3).
Clik here to view.
Soft Light and Opacity
Now, we’re not going to leave that noise all by it’s lonesome like that. Set the Noise layer to Soft Light and turn it’s Opacity down to about 20%. Also, be careful to keep the noise layer on top of all the other layers at all times, since it needs to affect everything.
Clik here to view.
Making the Vignette
Let’s move on to making the Vignette. In a new layer, make a selection similar to the one above. We’re going to fill this with black in the next step and blur the life out of those pixels.
Clik here to view.
Blurring the Vignette
And here’s what the Vignette looks like. Experiment with different types of blur and values, but this time don’t be subtle. Back in the 40s these Vignettes weren’t all that hard to notice, so you can fool around and still keep within the style of the era.
Clik here to view.
Starting the type treatment
Let’s start adding some good ol’ vintage type, shall we? I used the font AnAkronism, by the way. There are many different ways to bend text the way I did above, depending on what software you use, but most use paths to direct the text. If that’s your case, then be careful to use small angles and soft falloffs. Also, use a medium-light grey for the text’s color. I used #cccccc , but feel free to experiment.
Clik here to view.
Using two typefaces
Remember that in the beginning of this post I mentioned that the old school art directors were magicians when it came to type? How they could use 4 or 5 typefaces and still have amazing results? Well, I know my limitations, and I can safely say that I’m not THAT good. So, I won’t try to pull that trick off and will stick with AnAkronism for the heading and Nathan for the description and copyright notice. Again, all the text is rendered in #cccccc .
Clik here to view.
The mighty Drop Shadow
What would a vintage style design be without a solid Drop Shadow to seal the deal? So go ahead and apply some, making sure to keep the same angle for all your shadows.
Clik here to view.
Blur's the word
Of course, back in the 40s they didn’t have sharp, pixel perfect type, so let’s blur all of our text a bit – try values between 0.5 and 1.
A 40s web
As you can see, it’s all pretty clear cut when it comes to editing a photo and adding some text, but what about us web designers? How can we incorporate these features to really bring the 1940s in the digital era?
Well, I won’t get into too much detail, but I took a couple of hours and I came up with this thing-a-ma-jig as an example:
You can either click here or on the picture above to see the full design.
Break it down. 40s time.
So what did I do here? I’ve simply adapted all the elements we’ve talked about earlier to the web. Of course, limitations were imposed, but I’ll break these down, as well (I’m just that kind of a guy).
The Vignette
While on the baseball photo we were able to just slap a new layer for the vignette, things are a bit trickier on the web.
Image may be NSFW.
Clik here to view.
I’ve made four solid #181818 rectangles on each of the sides.
Image may be NSFW.
Clik here to view.
And then faded them out using Layer Masks.
This way you can be sure that you’ve properly faded into a solid color and don’t get those ugly sharp edges when viewing the website on a large screen.
You could also use my technique for a Pure CSS Vignette, if you’re one of us code crazy designers. Yes, that was a shameless plug.
The Background
Image may be NSFW.
Clik here to view.
For this design I used this very nice image of Melbourne, Australia.
When using large images as background for a website, always consider legibility.
Image may be NSFW.
Clik here to view.
Because the reflections in the water were a bit too sharp, I blurred the image out, while leaving the top part of the picture more in focus. This way, the body copy that will come over the image remains legible.
Other than these few adaptations, the website design follows all the six elements of the 40s style.
So, there you have it lads and lasses, I hope you enjoyed this tutorial as much as I did writing it. And, perhaps, you’ll share your thoughts below, give a bash or just say “hello”. We’d appreciate that.
Exclusive Content
To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!
Current Freebie Code - 7ev165dd