I really like retro and vintage stuff… websites, posters, print, adds, everything. I think it’s amazing how an ‘old style’ still get our attention and appreciation. For this selection of retro and vintage web designs, you will see retro and vintage elements, fonts, images, colors, textures, etc. I hope you enjoy the selection. And of course, if you have a cool retro/vintage site to share with us, the comments are open.

Eighty Two Design

targetscope

singularityconcepts.com

fortyseven media

thigpendesigns.com

icblind.com

edgewater

WebDesigner.ro

Level 2 Design

Custom Design

Kretivia, New Media Production

Big Rig Design

THUNDERfuel

Thrush

mediaBOOM

Radio – The New York Moon

fivecentstand.com

LATAKA

Ali Felski

The Dollar Dreadful

phizz.biz

Style 4 you

Mister-Aero

iso50

Tricycle Terror

sensisoft.com

Small Stone re-cordings

prahba.com

tomatic

Visit Cascadia

Tennessee

jacksonfish.com

Carrozzeria Verga

the Retrovert

Sauro Motel

Antique Piano Shop

painisgood.com

Eric Henning Magic

The Wayward Irregular

flatwoodsfolkart.com

Brocante Boutique

Buy Vintage Clothing

Farinella

What’s your Problem?

Hipstery

readymadedesigns.co.uk

Team Fannypack

thisbythem.com

huxleyprairiefest.com

bullet

Here’s what we’ll be creating. Click on the image for a full preview.

Step 1

Create a new canvas in Photoshop, we’ll be working on a 250 x 180 mm sized canvas in RGB mode at 300 dpi. This is important because the values for filters that work on pixel sizes will need to be amended if you’re working on a different sized canvas.

Step 2

In Photoshop select the Gradient Tool (circled) and click the Gradient Editor (circled) on the Options Bar (Window > Options) to edit the gradient. Change the two colour values as in the screen grab, you’ll need to click the little colour tab and the rectangle marked ‘Color’. Enter the two values in the field marked ‘#’ in the Color window that pops up. Change to a Radial gradient in the Options bar and draw from the center outwards.

Step 3

Select the Horizontal Type Tool and a font you want to use. I’ve gone with a classic, if not overused, sans serif font called Avant Garde. I then did a version using Century (a serif font), which worked a lot better.

Type in SHINY and then go to Layer > Layer Style > Gradient Overlay and set up as in the Photoshop screen grab.

Then add a Stroke and an Inner Shadow layer style to the text using the screen grabs as guides.

It’s also worth mentioning that I had to reduce the Kerning in the ‘N’ and the ‘Y’ to even out the spacing.

Step 4

Create a new layer beneath SHINY, then select both SHINY and the new layer and go to Layer > Merge Layers. This will cause Photoshop to rasterize both the text and the Layer Styles so that we can build more Layer Styles on top. There’s possibly a better way to do this though simply rasterizing the text layer will not do this, not in CS2 anyway.

Then add a Gradient Overlay Layer Style as shown in the screen grab.

Repeat the layer merging process and add another Gradient Overlay (with the black and 50% black). Once again, repeat the merge process so there are no editable Layer Styles left on your text.

Your text should look something like the screen grab.

Step 5

Duplicate SHINY (Layer > Duplicate Layer) and apply an 8 pixel Gaussian Blur filter (Filter > Blur > Gaussian Blur) to the copy. Make sure the original is above it in the Layers palette.

Step 6

Duplicate SHINY (the un-blurred layer) and go to Filter Blur > Radial Blur. Set it to Zoom, Best quality and apply at 100%. Set start point to be centered at the bottom in relation to your text.

Step 7

The zoom isn’t quite the right size for our needs. Go to Edit > Free Transform to bring up the Free Transform bounding box. Hold shift whilst manipulating the corner points to constrain the aspect ratio.

Then add a Smart Sharpen (Filter > Sharpen > Smart Sharpen). Add a Layer Mask (Layer > Layer Mask > Reveal All) and erase the parts you don’t need using the Eraser Tool as set up in the screen grab. Rename this layer ZOOM_BLUR.

Step 8

Duplicate ZOOM_BLUR and set the copy’s Layer Blend Mode to Multiply.

Step 9

CTRL+Click on ZOOM_BLUR’s Layer thumbnail (not the Mask thumbnail), this will create a selection from it. Then go to Select > Inverse Selection.

Create a new layer beneath ZOOM_BLUR and call it FILL_LIGHT and fill it with White.

Apply the same Gradient Layer Style (don’t do the Inner Shadow or Stroke) as you did for the text in Step 3.

Create a Layer Mask and use the Eraser Tool to delete any unwanted areas. I find you get better results by reducing the Opacity of The Eraser Brush to around 30% and repeatedly chipping away at the mask so it blends. Use the screen grab as a guide.

Finally, reduce the Layer’s Opacity to 50% and move it below SHINY in the Layers Palette.

Step 10

Select the Line Tool. Set it to Shape Layers on the Options Bar, with an 8 pixel Weight. Draw in a white Line. Use Rectangular Marquee Tool to mark off a rectangle spanning the length of the line you just made.

Select the Paintbrush Tool and set up a big soft-edged brush. Take the Flow down to 21 and start to draw in some glow, making more passes over the edge that connects with the line. Use the Screen Grab as a guide.

Select this layer and the line layer and merge them. Rename this layer TWINKLE and apply a Gaussian Blur (Filter > Blur > Gaussian Blur) as in the screen grab.

Step 11

Use the Eraser Tool (set up as in the screen grab) to delete the hard edges.

Duplicate TWINKLE and move it parallel. Duplicate it again and use the Free Transform Tool to rotate (90 degrees), resize and reposition.

Step 12

Create a new layer and fill it with black. Go to Filter > Render > Lens Flare and set up as in the grab.

Try and center the flare so all the elements line up on top of each other.

Adjust the Levels (Image > Adjustments > Levels) to knock out unwanted glow and increase the center. Then go to Image > Adjustments > Desaturate.

Select your four associated layers (TWINKLE and its two duplicates and the lens flare) and group them, call the group STAR.

Step 13

Use the Free Transform Tool to rotate, resize and reposition the star. Make duplicates of the STAR group and rotate, resize and reposition. As each element of the STAR group is on its own layer you can tweak each part of the star until you’re happy.

Create a new layer beneath all your STAR groups and call it GLOW. Select the Brush Tool and set up as in the screen grab, then draw some extra glow behind each star picking a brush size to match.

Step 14

Group all your image layers (except the background) together and call it SHINY. Duplicate this group and go to Edit > Transform > Flip Vertical. Create a Layer Mask for the group (Select the Group and go to Layer > Layer Mask > Reveal All) and use the Gradient Tool, set to Linear with white and black colours to mask off the bottom, creating a reflect effect. Reduce the Layer Opacity to around 50%.

Step 15

Now go grab your favourite old paper textures. These ones from bittbox are pretty good. I used paper2.jpg, pasted it into the document and moved it to the top of the layer palette. Change the Layer Blend Mode to Multiply.

It looks too dark currently so go to Layer > New Adjustment Layer > Levels, check the box marked ‘Use Previous Layer To Make Clipping Mask’ and set up as in the screen grab. To increase the texture, duplicate the paper layer, desaturate and set it’s layer Blend Mode to Hard Light. Drop the layers Opacity down to 58%.

Step 16

Select ALL of your layers and merge them together. Put this new layer at the top of the layers palette (we’ll keep the originals just in case). Duplicate this layer and desaturate it.

Then go to Image > Adjustments > Invert. Apply a 40 pixel Gaussian Blur, turn the layer Blend mode to Overlay. Add a Levels Adjustment Layer (Layer > New Adjustment Layer >Levels) as in the screen grab.

Step 17

Go to Mode > Grayscale. Select Flatten in the pop-up window. Then go to Mode > Bitmap and follow the screen grabs to deal with the Bitmap and Halftone Screen pop-up windows.

Once it has been applied, select the entire canvas and load it onto the clipboard (CTRL+C). Go to your History palette (Window > History) and click back to just before you changed to Grayscale Mode. Then paste the copied bitmap layer and move it to the top of the Layers palette.

Select the Magic Wand Tool and un-check the Contiguous box on the Options bar. Use the wand to select any patch of white on the bitmap layer, then delete all the white.

Step 18

Change the bitmap layers blending mode to Soft Light and it’s opacity to 80%. Then tweak the opacities of your other three final layers as shown in the screen grab. These should be your merged art layer, the copy which was desaturated, inverted & blurred and the Levels Adjustment layer. The copied art layer should also be set to Overlay.

Conclusion

That’s mostly it… But if you want to get proper old then head over to Deviantart.com or brusheezy.com and get yourself some dirty/grunge brushes and paint in a final layer of scuffs and dirt. Don’t use white but a creamy off-white such as #ddc8b3 as your foreground colour. This will add to the aged feel. It’s worth creating a new layer to draw on and experiment with your brushes.

WDL Premium members can download the source Photoshop file below.

Download the Photoshop source file

About the Author

James Davies writes tutorials for various magazines and websites when he’s not designing gig posters, t-shirts, catalogs, magazines, etc.

Here’s a look at the final result. Click on the image for a larger version.

Step 1

Set up a new document. Make it an A4 canvas at 300 dpi in RGB mode. Go to Deviant Art and get this image from fahrmboy-stock. Select the Pen Tool and set it to Paths in the Options bar (Window > Options). Zoom into the image 200% and begin drawing a path around the figures. Imagine you’re cutting them out using scissors and adjust your technique accordingly. Use single clicks to add anchor points rather than dragging to give them curves. You can be pretty loose here. We don’t want the heads either so level them off.

Once you’ve finished your path, go to the Paths palette (Window > Paths) and CTRL+Click the path thumbnail to turn it into a selection. Copy and paste it onto your blank canvas.

Step 2

Go to Edit > Free Transform and use the bounding box to resize the image to 70%. Hold the SHIFT key whilst you drag the corner points to maintain the aspect ratio. Select the Pen Tool and switch it to Shape Layers in the Options bar. Select a light yellow colour as your foreground colour and draw in a circle with a flat bottom edge. Don’t be too precise here but click and drag the points to add handles. Then use the Direct Selection Tool to tweak any of your points or their handles if needs be.

Step 3

With your new HEAD layer selected, go to Layer > Duplicate layer and rename it HEAD_LADY. Use the Free Transform tool to rotate and resize accordingly. Your HEAD_LADY should be below your HEAD on the Layers palette.

I forgot to add a curve in the flat edge of the circle, my bad. Select the Path Thumbnail of either HEAD layer and use the Pen Tool to add an anchor point in the centre of the straight edge. Then nudge the new point up a few taps of the Arrow key. Repeat for the other HEAD layer.

Step 4

Select a darker yellow and use the Pen Tool to draw in the inside of the head where it meets the neck. This layer should be below the PEOPLE layer in the Layers palette.

You’ll need to split the point’s handles for this. Draw in a point with handles as normal and then hold the ALT key and click the point, dragging a new handle out upwards.

Step 5

Move your layers to match the screen grab. You’ll notice the neck sticks out over the head so CTRL+Click the HEAD_LADY path thumbnail to make a selection from it. Then use the Eraser Tool to delete the excess.

Step 6

Use the Ellipse Tool set to Shape layers and draw in a white ellipse for the LEFT_EYE.

Go to Layer > Layer Styles > Stroke and add a black, 12 pixel stroke. Use the same tool to draw in a black PUPIL.

Then, working on the PUPIL layer still, set the Pen Tool to Subtract from path area in the Options bar and draw a triangle in the top right of the PUPIL. Select PUPIL and EYE_LEFT in the Layers palette and go to Layer > Group Layers. Call the layer group EYE_LEFT. Duplicate this and rename the duplicate EYE_RIGHT.

Use the Free Transform to rotate them slightly away from each other.

Step 7

Create a new layer and call it MOUTH. Select the Paint Brush Tool and change the options so it’s a 12 pixel, 100% hardness brush. Then select the Pen Tool and set it Paths, and draw in a mouth like in the screen grab.

Select the path from the Paths palette and then select the little arrow in the top right of the palette to bring down the menu. Select Stoke Path.

Repeat this process to draw in two cheeks. Group EYE_LEFT, EYE_RIGHT, PUPIL and MOUTH and call the group MAN_FACE. Duplicate this group and call it WOMAN_FACE. Use the Free Transform to resize, rotate and position both FACE groups.

Step 8

To create a dirty texture, I scanned in my scanner with nothing on the bed. I then tweaked the levels to boost the contrast and finally, desaturated it. You can download it with the other source files at the end of this tutorial.

Cut and paste it onto your canvas and change the Layer Blend mode to Multiply.

Then use the Free Transform Tool to resize and reposition it.

Step 9

Select the Background layer and fill it with a light blue colour (#cadbd4). It’s worth mentioning that I wasn’t happy with the shape of the heads at this stage so I used the Direct Selection Tool to shift the points around until I was happy.

Select the PEOPLE layer and go to Image > Adjustments > Desaturate. Then go to Image > Adjustments > Levels and tweak as shown in the grab.

Finally, select the Burn Tool and set it to Highlights at 45% exposure. Use a big soft-edged brush to burn shadows onto the necks of the PEOPLE.

Step 10

This next bit is tricky so stay awake. Duplicate the PEOPLE layer. Create a new layer beneath it and fill it with white. Select the PEOPLE copy layer and the white layer and merge them (Layer > Merge Layers). Add a Noise Filter (Filter > Noise > Add Noise) as in the screen grab.

Then add a Gaussian Blur (Filter > Blur > Gaussian Blur) as in the grab.

Add a Smart Sharpen filter (Filter > Sharpen > Smart Sharpen) as in the grab.

CTRL+Click on the PEOPLE layer thumbnail to create a selection, then go to Select > Inverse, select the PEOPLE copy layer and hit delete. Set the Layer Blend mode to Multiply and delete the original PEOPLE layer.

Step 11

Create a new layer at the top of the Layers palette and call it Shadows. Use the Eyedropper Tool to select the darker yellow colour used for the bottom of the head. Select the Paintbrush Tool and set up as in the screen grab.

CTRL+Click on the HEAD_MAN’s path thumbnail to create a selection from it and then paint a shadow onto SHADOWS layer. Then CTRL+Click on HEAD_LADY’s path thumbnail, CTRL+ALT+Click on PEOPLE COPY’s layer thumbnail and CTLR+ALT+Click on HEAD_MAN’s path thumbnail. Paint in some more shadows. Deselect everything, make your Paintbrush smaller and paint in some cheeks.

Step 12

Select the SHADOWS layer and hide all other layers. Go to Image > Mode > Greyscale and then select Merge in the pop-up window. Then go to Image > Mode > Bitmap and opt to Flatten Layers. When the Bitmap window appears, select a 300 dpi output and use the Halftone Screen method, OK this. The Halftone Screen window will appear, Set it as in the screen grab.

Once it’s OK’d go to Select > All and then copy onto the clipboard (CTRL+c). Open the History palette (Window > History) and select the last instance you used the Paintbrush.

Press CTRL+v to paste the contents of your clipboard and rename the layer BITMAP_SHADOWS. Select the Magic Wand Tool and set-up as in the screen grab.

Select any patch of white on the BITMAP_SHADOWS layer and press delete. Go to Layer > Layer Styles > Color Overlay and sample the darker yellow used on the head. Finally delete the SHADOWS layer.

Step 13

Make all the layers bar layer groups MAN_FACE and WOMAN_FACE. Select each group in turn and go to Layer > Merge Group. CTRL+Click HEAD_MAN’s path thumbnail to create a selection, select WOMAN_FACE and press delete. Use your favourite grunge brushes to erase parts of MAN_FACE and WOMAN_FACE. Finally bitmap in the same way as you did before, using the History palette to return as you did before. Use the MAN_FACE and WOMAN_FACE layers to create selections from to remove the excess white on your newly pasted bitmap layer (call it BITMAP_FACE). Finally, delete MAN_FACE and WOMAN_FACE.

Step 14

Rasterize the HEAD and NECK layers (Layer > Rasterize > Layer) and run them through the same Noise, Gaussian Blur and Smart Sharpen filters as in step 10.

Select the Pen Tool and set it Shape Layers. Draw in some simple Lightning Bolts emanating from the womans hand. Select all the LIGHTNING layers and merge them, apply a 7 pixel Gaussian blur followed by a 64 pixel Smart Sharpen at 500%. Use your favourite grunge brushes to erase parts of the lightning, then tweak the Levels as in the screen grab.

Finally bitmap, halftone and remove all the white using the Magic Wand as before. Remember to switch all other layers visibility off, return to your images state prior to bitmapping using the History palette and then turn all the visibility back on. I also added a Color Overlay, sampling the NECK colour.

Conclusion

Add some other elements using the techniques you’ve learnt here. At this stage I added some dashed lines (imported from Illustrator), played around with the colours (Layer Styles are easily editable, access them from the Layer drop down menu) and adjusted the Hue/Saturation of the SCANNER layer (click colorize in the Hue/Saturation window and play with the sliders). As I’m not running through all the text that was created for the poster, I’ve cropped the image to better suit the composition.

Download the Photoshop Source File

About the Author

James Davies writes tutorials for various magazines and websites when he’s not designing gig posters, t-shirts, catalogs, magazines, etc.

Create Vintage Traveler Diary in Photoshop

Creating A Retro Grunge Poster

Super Cool Retro Poster in 10 Steps in Photoshop

Gigposter Design

Old Fantasy Map of Your Area

Creating an Awesome Retro Collage

Create a Wicked-Worn Vintage Pop Art Design

Mix Cool Retro Curves Into Your Photographs

DIY vintage T-shirts

How to Create a Retro Boxing Poster in Photoshop

Antique Ace Of Spades

Creating an Old-Collage Effect Poster

Photoshop vintage effect

How to Design a Rockin’ 80’s Party Poster

The Louis Daguerre Effect

Design a Vintage Car Poster

Creating Old Paper With Custom Brushes

Custom Hang Tag

Create A Retro Cosmic Design in Photoshop

Retro Lighting – Ford Mustang

Retro Photoshop Fun

Create a 60’s Psychedelic Style Concert Poster

Creating A Cool Vintage Collage Design In Photoshop

Amazing Retro Rainbow Curves

A Retro Wallpaper

Create a vintage looking image with Photoshop

Make a Turn of the Century Vaudeville Poster

Add Retro Look to your Images

Super Retro Game Cartridge Design

Retro Text