Master Retro Looks With Photoshop

Retro looks: Type, bitmap textures, and colour combine to give this site the complete retro look. The visual outcome is something that offers a sense of history and unique character.

Inspiration: www.castirondesign.com

Retro styles have gripped the digital design world, dominating other trends across the discipline. In previous issues of Web Designer we've looked at the reasons behind this trend, but here we’re showing you how to master some of the most useful Photoshop tools to produce your own stunning styles.

We'll be exploring how to create digital textures to replicate real-world examples using the Photoshop Pattern Fill layer style. We’ll also reveal how you can create grain effects using Photoshop brushes and blending modes, all inspired by the designs at www.castirondesign.com. This is a great example of not just the application of effects, but also the use of vintage typography to produce a recognizably old-school look.

We'll also look at ways you can use Photoshop Actions, which we have treated you to a selection of on our resource disc. Enjoy!

#1 - INSPIRATION: Retro showcase at line25.com

Looking for inspiring examples online, for your retro web design projects? Look no further than line25.com. This site describes itself as a ‘drawing board of creative web design’ and its blog on 30 inspiring retro-style websites is a real delicacy. Our favourites presented include our very own www.castirondesign.com, as well as bitfoundry.ca and the wonderful thislandishovland.com.

#1 - INSPIRATION: Retro showcase at line25.com

#2 - RESOURCES: Using Retro Actions

Photoshop Actions are an extremely useful asset to have when creating vintage looks in your designs. These can be applied to all web elements – in particular, photographic images.

You can activate the Actions panel from the Window drop-down menu. From this panel select the lyaout options, choosing Load Action to add those supplied in the Retro Photo Actions pack to your presets. Just click the Play button to automate the effects. You can find tons of useful actions also online, available from content providers. www.deviantart.com is a real hotspot for this kind of thing. These work out cheaper than most plug-ins.

#2 - RESOURCES: Using Retro Actions

#3 - TECHNIQUE: Retro Textured Web Header

STEP 1: New Document

Open Photoshop and select File > New. Set Width at 1px, Height at 3px. Zoom in to your layer at 3,200% and select the Rectangle Marquee tool. Make a selection at the top of your layer covering 1px (a third) of your layer. Fill this with black (Shift+F5).

STEP 2: Save Pattern Preset

Deactivate your selection (Cmd/Ctrl+D) then select Edit > Define Pattern. Name this pattern ‘Retro texture horizontal’. Select Image > Image Rotation > 90 degrees CCW. Once more, select Edit > Define Pattern, saving as ‘Retro texture vertical’. Now you have effectively created the building blocks for a retro texture in Photoshop, applicable from your Layer Style options.

STEP 3: Apply Pattern Preset

Select File > New, setting Width at 1,536px, Height at 2,048px. Add a #B6AC95 colour to your background. Draw out your header backdrop using the Rectangle shape tool. We’ve used a #D1C4AA colour. Now activate the Layer Style options (fx) from the foot of the Layers Panel and Pattern Overlay.

STEP 4: Add Noise Texture

We’ve applied the Retro texture vertical pattern at 8% Opacity. Next, create a white web header shape and apply Filter > Noise > Add Noise. Set your Amount between 25% and 30%, activating Uniform and Monochromatic. Set the layer blending mode to Multiply, with Opacity at 25 & 30%.

STEP 5: Add a Scatter Brush

Create a new layer, blending mode set to Dissolve, Opacity 1% and Fill 10%. Select the Brush tool. Set Brush Size at 2,500px and Hardness at 0%. Press F5 and activate the Brush Tip Shape options. Set Spacing at 1,000%. Deactivate all other option sets. Click your brush once on your new layer.

STEP 6: Final Layer Styles

Duplicate, invert (Cmd/Ctrl+I), resize and reposition your duplicate layer. You can now merge these two layers and edit the strength of the effect through layer opacity values. Finally, add a subtle Drop Shadow layer style to your header shape to create the illusion of 3D; set Opacity at 20%, Size 20px.