Design a Retro Postcard with 3D Text

Preview

Click on the image to see it in full size.

Tutorial Resources

Step 1: Finding Inspiration

We are going to start off by getting some examples of actual retro postcards that have a similar theme to what we are going for, with the 3D looking text as our focal point. I went to Google Images and searched for old postcards of New England and Florida for inspiration. If you have a favorite vacation spot of your own, search for it. These are what I found:

Finding Inspiration

Looking at these, we can find some elements that we want to pull out of each, as well as elements that are consistent throughout. Some of the things we will be using are the black stroke with the white stroke inside of it, the 3D text, and the "Greetings from" text at the top left.

Step 2: Setting Up the Text

Now that we have some references, we can open up a 1200x655px document in Illustrator. This size comes out to be equivalent to 11x6in, which is a one of a few common sizes for postcards. You can go to Designers Toolbox to find more dimensions of postcards.

Use the Type Tool (T) with the Molot font to write "DESIGN INSTRUCT" on the artboard. Molot is a good, bold font that also has a retro look-and-feel to it.

Finding Inspiration

Step 3: Adding a Bend to the Text

A few of the postcards we saw in our research have text that bends, and I liked that style, so we are going to mimic that a little bit. We can make our text bend by going to Effect > Warp > Rise. Change Bend to 12%.

Finding Inspiration

What we end up with is text that looks wavy.

Finding Inspiration

Go to Object > Expand Appearance. This will change our text into point and line shapes, which will be easier to work with for the next steps.

Step 4: Change the Stroke and Fill Colors

I like the idea of having the strong contrast of the red and black shadows like in the Massachusetts postcard, so let’s pull that concept out and into our design. All we need to do for now is change the Stroke of the text to red (#D22323) and the Fill to white (#FFFFFF). We’ll complete this look in the next steps.

Finding Inspiration

Step 5: Make the Text 3D

To make the 3D text, go to Effect > 3D > Extrude & Bevel. Adjust the Extrude & Bevel options so that your text has an angle similar to what is shown below, with the text facing up and to the left. Set Extrude Depth to 80pt as well.

Finding Inspiration

Finding Inspiration

Step 6: Adding a Black Stroke

Go to Object > Expand Appearance to convert our 3D text into vector points and lines.

With the 3D text selected, ungroup it by going to Object > Ungroup. Around each letter should be a red stroke. Click on each one and change their color fills to black.

Adding a Black Stroke

Step 7: Add a Black Shadow

Next, we want to start adding in the black part of our shadow. Depending on the font you use, you may have some extra pieces on each side of the letter.

Add a Black Shadow

First, make sure the Pathfinder Panel is visible; if it’s not, go to Window > Pathfinder. We want to select all the pieces using the Selection Tool (V) and then, in the Pathfinder Panel, click on the Add to Shape Area button. Afterwards, change the Fill color to black. Do this for each side that is facing down. You can ignore the curved shapes for now.

Add a Black Shadow

Add a Black Shadow

Step 8: Adjusting the Curvature of the Letters

Now we can adjust the bends manually on some characters. We’re going to work on the shapes of the "D", "R", and "S". First, select the curve shape, and then duplicate it by going to Edit > Copy (Ctrl/Cmd + C) and then Edit > Paste in Front (Ctrl/Cmd +F). Change the color of the duplicate object to black.  Switch to the Pen Tool (P) and click on the anchor points shown below to delete them. Delete the anchor points until you get half way through the curve.

Adjusting the Curvature of the Letters

Step 9: Connecting the Red Shadows

Like we did is Step 7 (with the black shadows), we want to select all the red shapes that are next to each other and connect them with the Add to Shape Area command in the Pathfinder Panel. Change the Fill color of the red (#D22323) that we used earlier on.

Connecting the Red Shadows

Step 10: Adding a White Stroke

We want to create a white stroke inside the text, so first, what we want to do is select all the letter faces by holding Shift and clicking on each one to add them to the selection. After selecting all of them, change their Fill color to white.

Adding a White Stroke

Now go to Object > Path > Offset. Change the Offset to -2px. Change the color of the new shape created by the Offset command to a blue color.

Step 11: Bringing the 3D Text into Photoshop

We can now bring the text into Photoshop. To start, create a new 1200x655px document in Photoshop. Bring our text into the Photoshop document by copying it from Illustrator and pasting it into the new Photoshop document. Adjust the size of the text so that it fits comfortably within the canvas.

Bringing the 3D Text into Photoshop

Note: Typically, if we are creating a postcard for print, we want to make the document 300 dpi, but for this tutorial, we are going to keep it at 72dpi for file size purposes. To read more about preparing your artwork for print, please read our guide to preparing files for print.

Step 12: Getting Rid of the Blue Parts

Using the Magic Wand Tool (W) with Tolerance at 30, click on the blue part of the text. Then go to Layer > New > Layer to create a new layer and then fill the selection with black using the Paint Bucket Tool (G). Don’t deselect yet.

While we still have the selection, go to Select > Modify > Expand. Expand the selection by 2px. Switch back to the original text layer and fill the selection with white. This will get rid of the blue color, and we will use the layer with the black fill as a mask for our images later on.

Getting Rid of the Blue Parts

Step 13: Preparing the Background Image

We can now start adding in some photos. Let’s start with the background of our postcard. We are going to use the Field 4 stock photo because it’s a simple image that won’t detract a lot of attention away from our foreground (our 3D text).

Download and open up the field photo in Photoshop. Next, we’re going to adjust the colors of the background image — do so by going to Image > Adjustment > Curves; adjust the curves to what I have below:

Preparing the Background Image

Now we want to adjust the color of the grass to give it a more faded appearance, which will go well with our retro theme. Go to Image > Adjustment > Replace Color. Hold down Shift and click on the green areas in the canvas until you have selected everything. Press OK when you’re satisfied with the color replacement adjustment.

Preparing the Background Image

Time to bring the processed field photo into our main Photoshop document; place it as a layer behind the text.

Preparing the Background Image

Step 14: Adding the Letters

Let’s start placing photos inside the 3D letters. We are going to do one photo per two letters. Let’s start off with the Rhino 3 stock photo. Open it up in Photoshop, then bring it into our document. Ctrl-click/Cmd-click on the layer with the black letters (created in Step 12) to load a selection around the letters. Choose the Polygonal Lasso Tool (L) from the Tools Panel, hold down Alt/Option, and then create a shape around all the letters except the first two letters ("D" and "E"). This will remove the selection around everything except the first two letters.

In the Layers Panel, click on the rhino layer and go to Layer > Add Layer Mask >Reveal All. This will make it so the rhino image just shows up within the "D" and "E" letters.

To change the size of the image, click on the link icon between the layer and the mask, then click on the layer. This will allow you to change the size of it using Free Transform (Ctrl/Cmd + T) and move it around within the mask.

Adding the Letters

Repeat the same process for the other letters. You can use the stock images referenced in the Tutorial Resources section above, or use photos of your preference.

Adding the Letters

Step 15: Adding a Border to the Canvas

Go to Layer > New > Layer to create a new layer. Go to Select > All (Ctrl/Cmd + A) to load a selection around the canvas. Go to Edit > Stroke, change the Color to white (#FFFFFF), Width to 20px and Location to Inside.

Adding a Border to the Canvas

Step 16: Add Greeting Text

Use the Horizontal Type Tool (T) to write out "Greetings From" with the Honey Script font. Change the color to a yellow; you can sample a yellow color from one of the photos using the Eyedropper Tool (I).

We are also going to add a bold, black shadow to the greeting text. With the "Greetings From" text layer the active layer in the Layers Panel, go to Layer > Layer Style > Drop Shadow and then use the following settings:

Add Greeting Text

Step 17: Bringing in Some Texture

Now we are going to bring in this Paper Texture to give our piece an aged look. Once you’ve placed it in the Photoshop document, change its layer’s Blend Mode to Linear Burn and Opacity at 50%.

We are going to lighten up the texture a little bit, so go to Image > Adjustments > Curves and using the following settings:

Bringing in Some Texture

Step 18: Adjusting the Color

Let’s perform some color adjustments. Go to Layer > New Adjustment Layer > Hue/Saturation; use the settings shown in the image below:

Adjusting the Color

Now go to Layer > New Adjustment Layer > Gradient Map and use the settings shown below:

Adjusting the Color

Step 19: Creating a Subtle Vignette

Select the Rectangular Marquee Tool (M) and, in the Options Bar, change Feather to 60px. Create a new layer then drag a box around the whole canvas. Go to Select > Inverse and fill the inverted selection with black in the new layer, then change the layer’s Blend Mode to Overlay.

Creating a Subtle Vignette

Step 20: Adding Some Light

Finally, we are going to add a little bit of light in the middle of the postcard. Click on the Gradient Tool (G) and, using a white-to-0%-opacity radial gradient, create a small circle with the Gradient Tool in a new layer. Using Free Transform (Ctrl/Cmd + T), stretch the radial gradient to each side. Afterwards, change the Blend Mode to Soft Light.

Adding Some Light

Tutorial Summary

In this tutorial, we created a retro-styled postcard with the help of Illustrator and Photoshop. We gathered inspiration from existing postcard images, used Illustrator’s powerful vector-drawing capabilities (including the 3D Extrude & Bevel effect) and finished the piece in Photoshop using its handy photo-editing functions. Below is a preview of the final result:

Download Source Files

  • HI for quite sometimes I am not able to see images on your site. I first thought it was temporary, but now it is the same story with every post. I really love your posts, but can’t get the site working. Hopefully you will be able to fix it soon.

  • Valerie

    I would love to know how to “antique” the images further. In many of the retro postcards, the pictures look distressed or illustrated. Any ideas?

  • Haha.. I actually laughed out loud when I say this. This is amazing! Well done – way to work the PS. I’m going to check all your blogs out now, in the hope of finding something remotely as cool as this! I especially like the fact that it’s different pictures in the different letter – I like that.

  • This is a solid tutorial – I actually had to create a similar postcard not too long ago for a job I did and what I found interesting was your method for placing the images inside of the letters. It works very well actually and I just wanted to say that an alternative to doing it that way would be to place the image you want just above the letters and then holding the Control Key and clicking the photo layer and selecting ‘Create Clipping Mask’. I like this method also because you can move the image around inside of the letter without moving the entire mask.

  • Bonifacio Ferndinand

    Great Tutorial, but I cant follow because I have a problem, I have Photoshop CS5 and I cant get the 5 step:
    [Step 5: Make the Text 3D
    To make the 3D text, go to Effect > 3D > Extrude & Bevel.]

    where are that effect? I have the option “3D” but many choice but I cant see the “Extrude & Bevel ???
    please, any Idea ? thanks

  • Thanks for sharing! Great tutorial. Bergdorf’s had a Christmas window with black and white wintery retro lettering and I loved it! Your post has inspired me for a project I’m working on.

  • Thomas

    The extrude & bevel is in Illustrator, not PS.

  • The 3D text is made in illustrator and then brought into Photoshop

  • this is a very difficult technique. I have done many times have yet to be

  • Bonifacio Ferndinad

    thanks Mr Tyler.. well I need to try do this in illustrator… thanks again, for me ( I dont do it yet ) but for me its a great great tutorial…

  • Neato. Nice tutorial. This sort of retro postcard look has been a favorite of mine.

  • Overall a nice tutorial. Your result looks great.
    However, I am pretty certain you left out some important information and steps. I am quite well practiced with Photoshop and Illustrator, and there are points in this tutorial when your guidelines will not get the results you produced; especially in the texture adjustment layers (did you forget an opacity setting for the gradient map?)
    Sorry to pick it apart, but that’s just my observation. I have seen too many tutorials that seem to leave out things, it makes me wonder.

  • D. Scott

    Hi, in step 10 adding the white stroke, offsetting the object path seems to produce an outline that is larger than the letter that it is intended to add the white stroke to. The stroke floats above the letter.

    Any suggestions?

  • That was part of the problem I had. You have to set the stroke to the inside of the letter shape before offsetting the path.

    I even went so far as to add the images to the letters in Illustrator before importing into Photoshop. You’ll have to Make each letter(s) (however many that will show the image through) into a Compound Path first, and then place the image behind it – selecting both image and path – and then Make a Clipping Path. That way you can move the image around inside the shape.

  • Here’s my results;
    http://adf.ly/157HS

  • Nice!

  • Tyler, thank you SO much for this tutorial. I have tried unsuccessfully in the past to create this effect, but needed your help! I created my new postcard with it:
    http://twitpic.com/4hnxdx

  • Excellent work Carrie!

  • That’s pretty cool, Carrie. A definitive vintage feel to that.

  • Emanuele

    I also think that the tutorial it’s a little bit too fast. Some other steps should not be a bad idea…
    Stemp 8 it’s not very clear. Anywawy… I will try to do it again from the start… Maybe it’s my fault.

  • Allen

    Step 8 is killing me. Every time I delete the anchor points, the top layer that I copied stays black. The black layer will not delete and expose the original red layer no matter what I do. Am I doing something wrong?

  • What I ended up doing was;
    – using the white selection arrow individually select the pieces you want to join for the shadow (for each letter, and shadow area, separately)
    – If you want, copy & paste in front – but I skipped that part
    – change to the color you want and then
    – connect them using the “Pathfinder >Add To Shape”
    – Use the pen tool set to subtract, and remove the extra anchor points in between the corners and curves – a little trial and error

    This will take some time to do, but it ends up being so much cleaner and easier to follow.

  • Allen

    So this is literally the first time I’ve ever used Illustrator, so I may be making a fool of myself here. However, I simply set the offset value to -2px instead of 2px. It worked wonderfully…for step 10 anyways. Am I setting myself up for a ton of frustration later?

  • Honestly, just do what you think will accomplish what you want and see how it goes. And save often. Use multiple artboards in the same document, that way you have a duplicate at a certain stage of the process.
    These tuts are really more about sharing one methodology – just a basic guide to help you see the process. But it’s always up for interpretation and experimentation.
    Have fun.

  • Oh, I also meant to say, I think I actually did something similar to what you did – set a negative offset, or another method that got similar result. I believe the other way as described in the tutorial was overlapping the underlying shapes, causing some bad layering.. at least for me.

  • Donna

    This was hands down the best, most clear tutorial I’ve ever found. THANK YOU.

  • Toni

    Is there a way to do the entire thing on Photoshop alone?

  • Claire

    Hi, I find some of your instructions unclear (reference step 14 – I just add layer mask from layers window and it works, it doesn’t work if I use your instructions) and from Step 17 onwards the pallet boxes which you depict are totally different to mine. I am working on Photshop CS5.1, are you working on an older version?

  • Stef Silvano

    Great, great tutorial! Super easy to follow. I’ve been using PS and AI for years, and it’s always cool to learn a few new tricks. My postcard for a party invite came out totally awesome! Thanks so much for posting this.

  • Ken Chambers

    First time to use AI and I’m stuck on step 5.

    I select the text tool, choose a font from the list, type it in, change the stroke and fill, highlight it, click effect and highlight 3D.

    The 3D options (Extrude & Bevel, Revolve, Rotate) are all grayed out. They can’t be selected.

    This is in CS3. What am I doing wrong?

  • Laura

    Thank you! I tried it and this worked for me too!

  • Mandy S.

    Hi, I’m new to this site but this seemed like a fun tutorial to try out a bit of creative text editing. However, I found parts of this very difficult to follow, as some (or most) of the photoshop tabs you mention aren’t available in CS4, which was confusing.

    For example, I’m having a hard time turning the text into a 3D object. Where can I find Effect > 3D > Extrude & Bevel? There is no “effect” tab in photoshop?

    Also, there is no “Object” tab in CS4- how can we expand this if we cannot find the tab?

  • JC Parmley

    The first part of the tutorial is done in Adobe Illustrator, and this is where you would find Effect > 3D > Extrude & Bevel. Once your 3d text is created, Photoshop comes to play in the latter part of the tutorial to finish off the scene and complete the tutorial.

    I hope this helps 🙂

  • Wow, SJones, your is even better than the one here.

    What function makes the letters different sizes to fit the swooshiness that lets you put Ohio under Lancaster?

  • Otkon

    Not a very good tutorial. shading the curvatures is needlessly complicated. the offest streak creates a mess. and chunks of explanations are missing.

  • Dexter Taylor

    I’m lost on what to do on step 14. It’s unclear and the photo won’t go into the letter space. Any help would be great!

  • All we are doing in step 14 is selecting the “DE” from the layer with the black text on it and then masking the image.

    If you select the black text layer and then go to Select>Load Selection. This will select all of the black letters. Since we only want the “DE” we are going to use the Polygonal Lasso tool (holding down Alt/Option) to subtract the rest of the letters.

    A easier but less precise way would be to select the black text and use the Wand Tool (W) to select the “DE”.

    Once you have your selection go to Layer>Add Layer Mask>Revel Selection. This should make the image just inside the “DE”.

    I hope that helps!

  • Scott

    Stuck on step 10. Have no idea how to apply the white stroke. When I select shift the entire text turns white after I select fill. Seems to be a step missing. Can anyone help. I’d like to finish what I started.

  • JC Parmley

    Hello Scott, did you do the following after you have filled your selection with white?

    “Go to Object > Path > Offset. Change the Offset to 2px. Change the color of the new shape created by the Offset command to a blue color.”

    This should lead you to step 11, which starts using Photoshop.

  • Tyler

    You are half way there. After you turn the text white go to object>path>offset. Change the offset to a -2px and click OK. This will make a copy of the white text and shrink it proportionally 2px. You may have to play around with the offset size to get the effect.

  • Scott

    Thanks guys. I don’t think I explained myself well, so I uploaded an image to describe my dilemma. Hopefully someone can help.

    http://i39.tinypic.com/262pl50.jpg

    I would also like to add that I left out step 9 because I did not understand why you had to change the fill color when it was already red. Everything else I followed.

  • dina

    I refer to this tutorial so much while working on projects. THANK YOU, TYLER & DESIGN INSTRUCT!

  • Daniel

    Step 12
    how do i switch back to the original text layer

  • cliff

    awesome that way worked! thanks!

  • OG

    This was great, thank you!

  • Titanium Dragon

    This is a wonderful walkthrough. Thank you, I learned a lot!

  • Dani

    Please help, I am trying to do this for an assignment
    I have photoshop CS6 and I am stuck on step 3, I do not understand how to get those lines or change the stroke colour

  • Brian F.

    Hello,
    When i try to paste my illustrator vector to photoshop it loses all of its quality and becomes this big pile of blurry crap. I was wandering if anyone on here could help me out with this step at its the only thing I’m having trouble getting past.
    Thanks
    BF

  • Well, I see your problem; you are using Photoshop instead of Illustrator. The first paragraph says, “We will use Illustrator and Photoshop in concert to come up with an awesome retro postcard.” and the first line in Step 2 says, “open up a 1200x655px document in Illustrator.”. I don’t know why, but too many people are failing to see that Illustrator is used exclusively up until Step 11 where the tutorial then switches into Photoshop. So, once you realize that, it should be much easier.

    I realize this reply comes too late, but did you read through all the comments too? There are a lot of answers that help people get past the errors or omissions in the tutorial.

  • Did you create a new 1200x655px document in Photoshop, with a 300 dpi resolution? I find its far better to drag and drop from Illustrator to Photoshop than to cut and past.

  • John

    Hello and thanks for the tutorial!

    I am so frustrated that I wanna jump from my balcony (not literally)
    I just can’t delete those Black lines on the 3D Text… OW MAAAn!!!
    I’m so angry rigt now..

  • great work! i like it!

  • Alexandre Gepard

    Thank you so much!

  • Jason Kralka

    Outstanding tutorial!

  • Owen Magalogo

    Does anyone know how to do step 12? I am lost on how to do this step, especially the step on how to change the colors from blue to black, then white, then back to black. Confused… I need help.

  • WilliamCheese

    That is the dumbest tutorial ever, you sucka! How the fuck to do at 8, 10, 11, 12?! Fuck off! -_-

  • Kristen F.

    How can you do it on a PC?

  • Iva

    Can you please tell me how to place photo from photoshop to illustrator?

  • Nate

    Step 14 is PAINFULLY lacking detail and description. It was so bewilderingly frustrating that I actually just had to give up on the whole project. I literally spent hours trying to figure out what the hell you meant and were trying to do, and got NOTHING. Thanks a million

  • jj

    honey script is no longer available 🙁

  • Atyh

    Hi can you please do a elaborated with images explanation on step 14? whatever i do doesn’t seem to be working out.

  • Brittany

    Any interest in making a custom one for me? I am not great on computers but have a pretty easy idea in mind.

  • Kolya

    For step 14, I found this method to work….Place your image below your black text layer, then select the image box within the layer panel and hold ctrl and select the black text image box within the layer panel. After this select the lasso tool and hold alt to make your selection as referenced above. Once selected, go back and click on just the image layer and select add vector mask. After you do that, drag the image layer above the black text layer and it should show just the image where the letters are. You can adjust the image by unchecking the link icon in the layer panel.

  • Kolya

    For step 14, I found this method to work….Place your image below your black text layer, then select the image box within the layer panel and hold ctrl and select the black text image box within the layer panel. After this select the lasso tool and hold alt to make your selection as referenced above. Once selected, go back and click on just the image layer and select add vector mask. After you do that, drag the image layer above the black text layer and it should show just the image where the letters are. You can adjust the image by unchecking the link icon in the layer panel.

  • Hank

    I cannot for the life of me figure out Step 14. I’ve been working on this for 3 days and nothing is doing it for me. I even followed the other steps provided in the comments. Granted, I’m a photoshop novice, but when you cant’ get the results by following step-by-step directions, that’s kinda bad…help anyone?

  • Keith

    The instructions are apparently for a prior version and many of the things you have to do here don’t work correctly, esp. in Illustrator CS6

  • Alex Resnikoff

    Step 14 Doesn’t Work!!!

  • Alex Resnikoff

    Nevermind about step 14. His directions are unclear for that step, for the most part. After making the selection with the polygon tool, all you had to do was hit the mask button in the layers panel. Way more simple than what he was trying to get through.

  • BVT

    I FINALLY GOT TO FINISH IT. i didn’t fully follow his step 14, but thanks to the comments and his instructions combined and a little bit of experimenting i did it. thank you.

  • Jason

    Could you explain this step more clearly?

    Specifically the part about opening up the photo and bringing it into the document and which layer to place it above/below.

    Thank You!

    Step 14: Adding the Letters
    Let’s start placing photos inside the 3D letters. We are going to do one photo per two letters. Let’s start off with the Rhino 3 stock photo. Open it up in Photoshop, then bring it into our document. Ctrl-click/Cmd-click on the layer with the black letters (created in Step 12) to load a selection around the letters. Choose the Polygonal Lasso Tool (L) from the Tools Panel, hold down Alt/Option, and then create a shape around all the letters except the first two letters (“D” and “E”). This will remove the selection around everything except the first two letters.

    In the Layers Panel, click on the rhino layer and go to Layer > Add Layer Mask >Reveal All. This will make it so the rhino image just shows up within the “D” and “E” letters.

    To change the size of the image, click on the link icon between the layer and the mask, then click on the layer. This will allow you to change the size of it using Free Transform (Ctrl/Cmd + T) and move it around within the mask.

  • andy

    i followed dis step by step and i ended up with my thumb in a donkey’s butt hole. bad tutorial, did not get the results i wanted. next time be more specific.