How to Create a Vintage Rusty Metal Sign Using Illustrator & Photoshop

everyone this is Chris from Spoon Graphics back with another video tutorial. Last weekend I was enjoying myself wandering
around the stalls at a classic car show admiring a collection of vintage automotive signs,
which featured various lubricant and fluid brands on old rusty metal plates. It has taken over 70s years to slowly decay
those tin advertisements into vintage memorabilia, but they gave me the idea to use the aesthetic
to create our own rusty sign effect using Illustrator and Photoshop. Follow along with today’s tutorial to produce
a simple motor oil brand sign with a 50s inspired design, using type and colours that are based
on authentic examples. We’ll use Illustrator to construct the design
for its powerful shape and text editing tools, then we’ll transfer the artwork over to Photoshop
to distress it using a rusty metal texture. I’ll show you how a simple layer mask trick
can instantly take your crisp digital design and give it a realistic weathered patina look. But first So to create your rusty metal sign, begin
by opening Adobe Illustrator and create a new document. I’m just using a basic A4 artboard, but you
might want to enter specific dimensions if you’re creating your own print. Grab the rectangle tool to draw a shape that
covers the artboard to act as a background. It’s so much easier to find the corner of
the artboard if you have Smart Guides enabled from under the View menu. Click and drag the shape to the opposite corner. By default shapes have a white fill and black
stroke, so in the toolbar, clear out the stroke, then double click the fill block to choose
a new colour. You can find some great inspiration for 30s-40s-50-60s
era automotive memorabilia on Google and Pinterest, which can help you come up with colour scheme,
type and layout ideas. My background colour is going to be a subdued
indigo. Draw another rectangle that forms a stripe
across the artboard. Edit the fill block to alter its colour. Rather than choosing pure white, an off-white
with a hint of yellow gives the design more of an antique look. Using the Selection tool, select both the
stripe and the background shape while holding the Shift key, then give the background an
extra click to make it the key object. In the Align panel, choose Vertical Align
Center to move the shape into the middle. Click anywhere on the area beyond the artboard
to deselect, then select just the stripe shape. Go to Object>Transform>Shear. Choose Vertical, then enter -5 degrees to
add a slightly diagonal angle to the stripe. Grab the rectangle tool again and draw another
shape that covers the lower portion of the background. Change the fill to a dark green, or whatever
colour palette you’ve chosen. Right click and choose Arrange>Send Backward
to place this shape underneath the stripe, or use the CMD+[ shortcut, or CTRL and [ on
Windows. Use the Text tool to lay out the name of your
fictional automotive brand. I’m using McQueen, set in a script font available
on Adobe Fonts named CornerStore. Scale the text to fit within the stripe, then
apply the same Shear adjustment so the angle matches. Select both the text and the background shape,
giving the background an extra click to make it the key object so it doesn’t move out of
place, then align the text centrally. Add more text elements using a complementary
sans-serif. Brandon Grotesque has a geometric style that
is common in advertisements of the era. Set the fill colour to the same colour used
in the stripe by sampling it with the Eyedropper tool. Scale the text to suit the layout, then align
it centrally. Rather than make the background shape the
key object, you could also change the settings of the Align panel to align relative to the
Artboard. With the Selection tool active, hold the ALT
key and drag a copy of the text element. Place it in the lower portion of the layout
and alter the wording. This simple layout has the visual style of
an old advertisement sign, but it needs to decay over decades to achieve the natural
patina of authentic vintage memorabilia. Thankfully, we can simulate the look in just
a few clicks digitally. It is possible to create rust effect using
various filters, but the best result comes from using the real thing by finding a rust
texture photograph. There’s loads of stock photos of dumpsters
and other grungy metal surfaces with flaking paint and various levels of decay. If you’re watching this tutorial within the
first week, there’s currently a great 99% discount on a Textures and Patterns bundle
at Design Cuts. The texture file I’m using in this tutorial
is an asset from that collection, so I’ll put a link in the description for you to pick
it up yourself. There’s loads of other useful texture resources
in there too! While Illustrator was perfect for constructing
the design, Photoshop is much better suited to working with raster images and effects. Draw a selection across everything in Illustrator,
then hit CMD+C to Copy. Open up your rusty metal texture in Adobe
Photoshop, then press CMD+V to Paste. Choose Pixels, then scale the artwork to fit
over the texture before hitting Enter. Toggle off the visibility of the artwork layer
for a moment by clicking the eyeball icon next to the layer. Switch over to the Channels panel, then click
each Red, Green and Blue channel in turn to find the one where the rusty parts are the
darkest and have the most contrast against the painted area. Since this particular texture has a blue surface,
the blue channel is the best. Hold the CMD key and click on the channel
thumbnail to make a selection. Click the RGB channel to bring all three channels
back to show the full colour image, then switch back to the layers panel. Turn back on the visibility of the artwork
layer, then apply a Layer Mask, this will automatically use the selection we’ve just
made of the rusty areas. To adjust the mask, use the CMD+L shortcut
to open the Levels window. Move the Shadows and Highlights sliders to
alter the contrast, This helps you to bring back some of the colour in the non-rusty areas,
or make the rust expand further into the design. The mask erases the areas where there is rust,
but because this texture has a bright blue area, that colour is showing through onto
our custom artwork. Turn off the visibility of the artwork layer,
then select the Background. Add a Hue/Saturation adjustment layer above
it. Click the pointer icon in the Properties panel,
then click on a blue portion and drag to the left to desaturate this colour sample. Turn back on the visibility of the artwork
to see the blue colour cast has been eliminated. The final result is a rusty sign effect that
looks like it has been naturally decaying over decades. The use of a real rust texture ensures the
effect looks as realistic as possible. If you enjoyed this tutorial or learnt any
new tricks, a thumbs up to help recommend the video would be really appreciated. Subscribe to stick around for more tutorials
for Illustrator and Photoshop, and be sure to join my mailing list at Spoon Graphics
to bag yourself my free bundle of design resources. As always thank you very much for watching,
and I’ll see you in the next one.

18 Replies to “How to Create a Vintage Rusty Metal Sign Using Illustrator & Photoshop”

  1. I think the rust looks great but the letters still look too clean. Wouldn't they chip/peel off over time as well? (looking more worn)

  2. Wouldn’t it be better to move the rust image into Illustrator? At least you would maintain editability of vector objects and text. If you commit the rust layer and mask to a regular layer with transparency, save it as a PSD, and then import into Illustrator, it should provide the same effect. Or you could combine them in InDesign, but that’s a whole ‘nother episode.

    Either way, the rust won’t scale up like text and vectors, but if the rust image is natively 300 ppi or better and free of compression artifacts or other issues, it should do pretty well. I find that rust is a forgiving subject when it comes to upscaling. Besides, if you’re going really big, one could always consider a carefully executed vector trace and a little bit of cleanup, but that is admittedly a rather different can of worms.

    Anyway, mate, really great video. Your technique is quick, effective, and looks great. I just have a wild hair for preserving vectors wherever possible.

  3. Hi Spoon,
    could you say what is the title or the kind of music you use in the background. I will not use the same, but one in the same style and I can not find what I want.

    Thank you !

Leave a Reply

Your email address will not be published. Required fields are marked *