Get The Look - Design Templates

Get the Look: Vintage Retro

Want the secrets to the "old fashioned diner", "vintage", "retro" look? Here's the perfect graphics template for you.

Colors

Vintage colors are ones that have that "really old and worn out" look to them. Try and imagine an old t-shirt from the early 90's that you used to wear all the time; pale orange, grayish-blue, green turned yellow-green, etc. Those are the colors that I went towards with this template.

To get a vintage look, try using three similar tones. For example choose a dark, faded green, a faded green-yellow, and a very pale green (that almost looks gray).

Fonts

Vintage/retro fonts are very noticeable. Just close your eyes and picture and old-fashioned diner sign. The best way to explain it is: they look old-fashioned. One thing to look for is small star shapes throughout the font.

Techniques

1. Old-fashioned, vintage photos in duotone
I found this photo at Google's Image Search, but you can find old photos anywhere. Pick a nice black and white photo, and simply colorize it with your favorite graphics program to get and old look.

2. Old-fashioned sign shapes
I came up with these shapes simply by thinking of old movies and how I picture old diners and gas stations. Come up with your own! Keep in mind the fact that vintage shapes are never symmetrical.

3. Asterisks and stars
These were quite popular elements of design and will help make your Web page scream "vintage!" I simply used the asterisks that came with the vintage fonts I provided here.

4. Small textures: grids, diagonal stripes, cross hatch
This is a very nifty trick that adds a pretty nice touch to the design of your site. Using Fireworks, I simply set the shapes' fill to white, put a check in "Transparent", chose a texture, set the texture to 100%, and added a 1px white border to help the shapes stand out more. See your favorite tutorial Website for more info on how to do this in other programs.

5. Old-fashioned, vintage borders
Just another simple technique that can give your site that touch of retro. The design that I used simply reminded me of old-fashioned architecture. Be creative!

6. Unaligned, 1px borders
This simple technique was used very often in the "old days". Start by drawing a vintage shape (see technique 2) and making two copies of it. Fill one with a color on the lighter side. Set the other shape to no fill and give it a 1px border of a color on the darker side. Now simply "unalign" the two by a few pixels and you're done! This technique is actually making its way back into design today.

7. Dotted lines
I've seen this technique used while surfing through Websites, and I've always thought that it was a cool look. See what you can do with it!

8. Thin, outlined shapes (especially over color)
Another vintage effect I obtained by simply making a number of rounded rectangles with 2px white borders (no fill) and layering them.

Putting it All Together

I made an example "vintage" Website using every technique that I mentioned above. Notice how the unaligned borders, vintage colors, and old-fashioned design elements come together to create one pretty retro site! See what you can come up with!

Example Websites:

• http://www.joanquigley.net/flashindex.html
• http://www.sparkysgarage.com/detected.html
• http://maxfunds.com/

Enjoy!