3D Meets Retro Text Effect

Hey guys!  Today I’ve brought something new for you. Instead of an article or a list of resources, I’m going to do something creative and share it with you. As you know nowadays 3D is a very popular term, especially in web design so, I though why not combine old with new?

Well, I did that and 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.




Program:            Illustrator CS5, Photoshop CS 5

Approximate time:       25 – 30 Minutes


Circle brushes

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.


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


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

 text effect tutorial


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

 text effect tutorial


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.

 text effect tutorial


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.

 text effect tutorial


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.

 text effect tutorial


Now you will have something like the image shown below.

 text effect tutorial


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.


Now paste in place.


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.

 text effect tutorial


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

 text effect tutorial


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.
 text effect tutorial


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

 text effect tutorial


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.

 text effect tutorial


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

 text effect tutorial


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

 text effect tutorial


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

 text effect tutorial


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

 text effect tutorial


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

 text effect tutorial


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.

 text effect tutorial

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.

 text effect tutorial

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:



  1. Thank YOU for this tutorial. I really appreciate it! Amazing stuff on your site!

  2. Great design man, love the colors. Thanks for the tutorial.

  3. Awesome tutorial, thx

  4. I like the effect is very good.

  5. Berrie jay /

    Great tutorial, I really like the white effect under the text. Nice add to the retro style :)

  6. Samiullah /

    So easy and so simple effort results into amazing effect, retro effect rocks

  7. Lindsey Kokoszka /

    Real clear site, regards for this tutorial.

  8. Tapping Gie /

    You should take part in a contest for one of the best blogs on the web. I will recommend this site!

  9. Micki Brumlow /

    I just want to say I am newbie to blogs and really savored you’re page. Very likely I’m likely to bookmark your blog . You certainly come with awesome articles and reviews. Bless you for revealing your web site.

  10. Robert /

    Excellent tutorial for everyone. Thanks


  1. 3D Meets Retro | Photoshop-Weblog - [...] Tutorial 3D Meets Retro Text Effect wird im Streifenlook ein dreidimensionaler Text umgesetzt. Nicht das beste Tutorial, aber [...]
  2. Illustrator Tutorial 86 – 3D Retro Text Effect - [...] be completed in less than 30 minutes. Head over to websoulz.com now and check out this tutorial on how ...
  3. Elements Of A Web Design That Visitors Love | Website Design blog, Tutorials and Inspiration .... Websoulz - [...] all. Recent CommentsTecson on 5 Useful Photoshop Graphics Tips for BeginnersMicki Brumlow on 3D Meets Retro ...
Wordpress Themes - Wordpress Video Themes - Wordpress Travel Themes - WordPress Restaurant Themes