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 recognisably 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!
COMMENT
“The design for our site was inspired by our company’s namesake, the cast iron skillet. A skillet lasts a lifetime, and each one has a sense of history and unique character. Subtle texture was incorporated in most of the design components using a variety of scanned-in materials, which were then bitmapped to create organic texture that maintained a small file size. The cast iron skillet had its heyday in a time when products were simple and efficient, yet advertisements were wordy and hyperbolic. We used a type-heavy design to reflect that time period’s voice.”
Jonathan J Black, Cast Iron Design Company
TECHNIQUE
Retro textured web header
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).
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.
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.
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%.
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.
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.
INSPIRATION
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.
RESOURCE
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 fly-out 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.retro