How To Create a Vintage Postcard Design (Illustrator & Photoshop Tutorial)

everyone this is Chris from Spoon Graphics back with another video tutorial. Today I’m going to take you through the design
process for creating a vintage postcard design, based on the postcard design style known as
“large letter”, which was popular throughout mid-20th century. Often accompanied by the words “Greetings
from…”, these postcards presented the name of a place with faux 3D type effects
and featured a variety of pictures of that locale clipped within the text face of each
letter. The style has become iconic and is referenced
by designers who want to create artwork with a nostalgic or retro theme. In today’s tutorial I show how to create
a vintage style large letter postcard design, using the tools available in Adobe Illustrator
and Adobe Photoshop to replicate the visual traits of those original souvenirs. But first, if you want to get your hands of
thousands of assets to use in your designs, check out Envato Elements. To familiarise yourself with this iconic design
style, Google the words “Greetings from postcards” to see hundreds of examples from
across America. You’ll notice the large lettering effect is common throughout, often
warped in various angles and accompanied with bold colours. One of the key characteristics
is the series of photos from the region clipped within each letter. We’ll use the powers of both Adobe Illustrator
and Adobe Photoshop to produce the effect. Illustrator for its useful tools for editing
vector text shapes, then Photoshop for working with raster images and textures. So to begin, open up Illustrator and create
a new document. It doesn’t really matter what the size is, but I’m using units of pixels. Select the Type tool and set out your place
name. Choose a strong and bold font. I’m using Futura Condensed Extra Bold with the
tracking reduced to -50. Convert the live text into shapes by going
to Type>Create Outlines. Head to Object>Path>Offset Path and enter
2px. In the Joins setting, choose Round. Click a light grey colour swatch to have it applied
to this outline. Due to the way the letters are laid out, the
outline overlaps some of the black letters. Right click and choose Arrange>Send To Back. Head straight back to Object>Path>Offset
Path and add another outline. This time give it a blue fill and send it to the back again. Make a selection across all the text and go
to Effect>3D>Extrude and Bevel. Configure the settings to 1 degree in the
X and Y axis, then 0 for the Z axis. Set the Extrude Depth to 1000pt, then change the Surface
to No Shading. To permanently apply the effect and convert
the text back into shapes, go to Object>Expand Appearance. Many of the real large letter postcard designs
used multiple colours in the 3D text effect. Choose the Direct Selection tool and hold
the Shift key while clicking on every bottom face of each letter. Give these shapes a new
orangey-red fill. In order to create an extra outline around
the text, we first need to make a duplicate. Go to Edit>Copy, followed by Edit>Paste
in Front. Click the Unite button in the Pathfinder panel
to merge all the individual shapes into one big silhouette, then right click and choose
Arrange>Send to Back. Swap the blue fill to a stroke in the toolbar,
then in the Stroke panel, configure it to 2pt and aligned to the outside. Finish off the type design with a couple more
text elements to add the words “Greetings from”. I’m using a nice brush script named
Signpainter. Select all the objects that make up your design,
then go to Object>Envelope Distort>Make With Warp. Choose Rise from the options and set the Bend
to 30%. That’s the main work done in Illustrator,
so now let’s set up a document in Photoshop to begin working on the textures and vintage
postcard effect. Download my collection of free Vintage Postcard
Textures from Spoon Graphics and open one into Photoshop. I went with number 15 from
the blank postcards set. These textures were originally saved in CMYK
format, so quickly convert them to RGB, otherwise some of the tools we need to use won’t be
accessible. Next, find a bunch of landscape photos to
use within the composition. You can find loads of high resolution, free photos at sites such
as or Pexels. I’ll link to the ones I used in the video description area. Open up the main background photo you want
to apply to the postcard, then Select All and Copy. In the postcard texture document,
paste the image and scale it to size with the CMD (or CTRL on Windows) and T shortcut. Double click the Background layer to turn
it into a regular layer, then drag it above the photo layer. Change the blending mode to Multiply to allow
the underlying photo to show through the texture, then reduce the opacity of the photo layer
to around 70% to tone it down so it isn’t so vibrant. The photo currently extends beyond the edge
of the postcard, so add a layer mask to the photo layer, then Select All with CMD+A With the marquee tool active, right click
and choose Transform Selection. Hold the ALT key while scaling down the selection to leave
a border around the edge of the postcard. Go to Select>Inverse, then fill this area
with black to erase this area in the mask. To eliminate the straight edge of the mask,
go to Filter>Distort>Ripple. Configure the settings to Large at around 20% to add
some rough edges to the border. Switch back to Illustrator and make a copy
of the artwork, then paste it as Pixels within the Photoshop document. Scale it to size to
fit on the postcard. The colours from Illustrator look a little
too vibrant to suit this vintage postcard effect, so go to Image>Adjustments>Match
Colour Select the current document as the Source,
then choose Merged as the layer option. Adjust the sliders to better balance the colours,
taking the Luminance down to around 10, then bringing back the contrast with around a 40%
Fade. In order to make clippings of each letter,
we need to create separate layers. Use the Magic Wand tool to make a selection of the
first letter face. Add a new layer, then use the ALT+Backspace
shortcut to fill the selection with black. Press CMD+D to Deselect. Activate the artwork layer again in order
to make a selection of the next letter with the Magic Wand, then add a new layer and fill
this new selection. Repeat the process for each letter until you
have individual layers for every letter of the word. Open up one of the other landscape images
and copy and paste it into the document, placed above the first individual letter layer in
the layer stack. Hold the ALT key and click between the two
layers to make a clipping mask, so the photo will only show in the area of the letter face. Press CMD+T to Transform, then scale and position
the image so a suitable portion of the landscape fills the area. Open up the next landscape image and repeat
the process. Copy and paste into the document above the next letter layer. ALT+Click between
the layers to make a clipping mask, then scale and position to fit. As landscape images are placed within all
the letter faces, the vintage postcard effect begins to take shape. The final artwork is a great tribute to those
classic postcard designs. Illustrator’s 3D tool helped to produce a similar text treatment
that was used in the original designs, whilst the image and texture adjustments in Photoshop
gives the artwork an aged and distressed appearance to achieve the nostalgic vintage look. If you enjoyed this video or learnt any new
tricks, be sure to give it a like to help spread the word. Subscribe to the channel
to stick around for more, and if you want to get your hands on more free resources like
those postcard textures, join my mailing list over at Spoon.Graphics. As always thank you very much for watching,
and I’ll see you in the next one.

26 Replies to “How To Create a Vintage Postcard Design (Illustrator & Photoshop Tutorial)”

  1. Hey Chris is this a recording from 08/05 – 2017 🙂 when you made the Tutorial for your blog ? or have you remade it and the recorded it ? It is so Funny i have made 3 artworks of that kind a month ago. I always love to see other designers workflow. because I can always learn something new or get inspiration how to approach a design/artwork process in another way that i normaly would do
    Keep up the good work.
    By the way you would be a wonderfull skillshare teacher if you had nothing else to do lol

  2. Great tutorial. Don’t have illustrator. Could you show how to create text in photoshop, would be huge. Thanks

  3. Are you freaking kidding me?! I've been doing the shadows manually this whole time! Thanks so much for this tutorial! Gonna speed up my workflow tremendously!

  4. Hello, Spoon,i'm your great fan from Russia.You make really good tutorials)
    Can you make pls a video how to personalize your workspace in ai and ps in the most comfortable way)ty

  5. WOW. You pack so much in under nine minutes. I started this thinking, I'm not slowing my computer opening Illustrator and Photoshop at the same time. You have changed my mind! This is SO worth postponing opening Photoshop a couple minutes! THANKS AND GOD BLESS!

  6. THANK YOU for all of your wonderful resources!! I love all of your tutorials and grateful that you've kept them free! Your the BEST

Leave a Reply

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