3D Meets Retro Text Effect

3D Meets Retro Text Effect


As you know nowadays 3D is a very popular term, especially in web design so, lets try to combine old with new? Got a 3D retro text effect as the result of my playing with old retro style and 3D effect. To create this unusual combined text effect let’s see what we need.

How to Create a 3D Retro Text Effect

First part will include the work with illustrator and 2nd will be with Photoshop. So, let’s start creating this hip text effect.
Before going ahead with the tutorial, do have a look at the final image.

Step1:

First thing first, open your illustrator CS5 and create a fresh new document of size 600px X 841.89px.

Step2:

Choose the colors for fill (you can use any color). I’ve used here a slightly darker shade of pink color # CD4F9D.

Step3:

Now select the color for stroke. I’ve selected a light shade of pink color #F48D9E.

Step4:

Okay, now we’re going to select the font style. For this text effect I’ve selected “Abode” style and its size is 230.95pt. You can also make the font bigger using selection arrows.

Step5:

It’s time to give 3D effect to our text. For that go to “Effect” and from the menu select 3D and then select Extrude & Bevel… option from the menu as shown below in the picture.

Step6:

Okay now set the position of the text according to the setting shown below in the picture. Keep the extrude depth 19pt. No Bevel is selected here for this text. I’ve added 2 more light spots on the text as shown below in the setting window.

Step7:

Now you will have something like the image shown below.

Step8:

Here our basic work is done and from now on we’ll just add layers to our text to add color and a retro styling. To do that select the text, go to “Edit” copy the whole thing.

Step9:

Now paste in place.

Step10:

Keep the selection on and now change the colors of Fill and stroke for the copied text. I’ve selected grey color # 6D6E71 for the Fill and dark grey color # 231F20 for the stroke. I’ve made the first layer invisible to show you the second copied layer with changed colors.

Step11:

Keep the selection on and press the “down” key on your keyboard. It should look like the image shown below.

Step12:

For third layer again copy the single layer of text and paste it in place. Change colors to white # F1F2F2 for the fill and light grey color # BCBEC0 for the stroke. As shown below.

Step13:

Again repeat the same process and press down key on your keyboard to place the 3rd layer as shown in the image below.

Step14:

Now add another layer same way we did before and change colors. For 4th layer text, Fill is light orange color # F7941E and stroke is dark orange color # F15A29.

Step15:

Move the layer down as shown below by pressing down key on key board.

Step16:

For 5th layer text, Fill is light Blue color # 27AAE1 and stroke is dark blue color # 1C75BC.

Step17:

After moving this layer a bit down you will have something like the image shown below.

Step18:

I’ve added a black layer again repeating the same process as others.

Step19:

Then added a drop shadow by going to Effect and selecting Stylize from the menu and then selected the drop shadow.

Step20:

Now our 3D retro text is complete and with that the role o illustrator is also finished. Now we are going to open this text in Photoshop and work on its back ground.

Now the Photoshop Part

Step 21

Now we will add a nice background, for this open the text file in Photoshop. Then create a new layer and place it under the text layer.  Select the paint bucket tool and fill the layer with #7bd6d8.

Step 22:

Now create another layer and select soft round brush use it around under the text with color # ffffff. Then create another layer and select the round brushes mentioned above. Use them randomly over our text and then reduce the opacity to 25%. And we are done.

You can use different colors for this text like these: