Photoshop Tutor

Design a 3D Retro Strip

By Michael in Tutorials

Today i was browsing around some templates and came upon quiet an interesting concept which gave me the idea for this tutorial. Basically its quiet a simple technique to use with a pen tool but it does create some really sweet results. Get ready to create a 3D Retro Strip in ten simple steps.

…………………………………………………………………………………………………………….

I have prepared a background for you however if you wish to make your own, please open a 500×500 Document.

Our first step is to create the foundation of the strip, which is the first layer before it bends to 3D. Following my outline and using the preferences listed below for the Pen Tool, create your own outline:

Looking good, now that we have our foundation lets add some color to it in order to create variation and spacing of colors. Using the same Pen Tool settings, follow the guide below to create a second color inside our main strip:

Repeat the same step over twice again with the following colors (HINT: You can just duplicate and slide the layer over):

Alrighty, now we are beginning to create the depth in our strip. We will begin by creating the corner tip at the right hand side of the main strip. Following the guidelines below and using the same pen tool settings, create the foundation for our corner.

Just like we did for the main strip, we need to add color to our foundation. we have to make sure that our colors come in order so first the beige then the light green:

Okay now lets do the light shade of the green using the same simple technique:

I don’t know if you guys noticed but the idea was to pick a color a shade darker so that we can create depth, as you can see we managed to do that just right. In order to save the work with the pen tool and time, using the original layer of the strip, we will duplicate it move it up to the tip of the corner and cut off the left overs. Not to get you confused, i added a preview of what should of been done before the clipping occured:

Using the same method, lets duplicate our colored strips from the main base over to the sub base of the strip. In other words, here is what you should have:

Now that we have setup our colors and aligned our strip, we already can see the 3D Effect however lets add some glare to it. Take the base and change the color to white then Rasterize it (Make sure its a duplicate). Now using your Eraser Tool with a diameter set to 100px, erase everything off besides the top. So it should look like a fade. When you’re done just set it to overlay.

You’re pretty much done, after playing around a little i came up with this result:

This is a quiet simple tutorial however it gives a nice introduction to the way you can create simple but effective 3D objects that can make your layout just POP. The inspiration came from a layout i found on Monster Templates, take a look below:

These icons link to social bookmarking sites where readers can share and discover new web pages.

You can leave a response, or trackback from your own site.

Patrik
Posted on May 10th, 2008

Love the idea and outcome! Don’t know about the font though. Anyway good work!

Tommy
Posted on May 11th, 2008

Omg, how do you people do that? I have tried many times, but i can’t manage it. Guess I’ll try some more then..

Nice outcome between!

Arnaud Alves
Posted on May 11th, 2008

Very beautiful !

Michael
Posted on May 11th, 2008

Tommy,
How come? Tell me what exactly seems to be the challenge or where are you stuck exactly?

Thank you for the wonderful comments!

Tim Dobson
Posted on May 11th, 2008

Dont give up Tommy, Plenty of people here who can help you. Whats the problem im sure me or Michael can help you out to get you in the right place.

Another good tutorial. Anychance of one on creating borders for things. Got a few here but i rekon you could give us a better one Michael. Looking for one to put around my poems.

Tim,
Can you go into detail exactly what do you mean by a border tutorial? Shoot me an email with a couple of examples and ill see what i can do.

Lakshman
Posted on May 12th, 2008

mmmmm,good work!

craZed
Posted on May 12th, 2008

WOW, realy cool i like it a lot ! Thanx !!

Michael
Posted on May 12th, 2008

Appreciate the feedback guys

Olinka
Posted on May 12th, 2008

gosh! if i had photoshop id be making 3D retro strips and whatnot also! =P
youre the best!

Maybe you should start taking classes Olinka!

Arjan
Posted on May 13th, 2008

Did u made that flower pattern yourself or did u find it anywhere on the inet, if iternet where?

The result looks awesome, nice job

Greetzz

3D-Streifen – The Reaction
Posted on May 13th, 2008

[...] die eigene Website (und wenn sie nur als Inspiration dienen) sind gern gesehen. Im Tutorial Design a 3D Retro Strip wird erklärt, wie eine komplette Seite im Retro-Stil entsteht. Die Streifen gefallen, wenn [...]

Tutorial | Design a 3D Retro Strip « Flash Enabled Blog
Posted on May 15th, 2008

[...] Read Tutorial No Comments Leave a Commenttrackback addressThere was an error with your comment, please try again. name (required)email (will not be published) (required)url [...]

Abhijeet
Posted on June 3rd, 2008

excellent tutorial thanku very much

brad
Posted on June 15th, 2008

nice tutorial, and very nice design. I’m more impressed by the willingness to help people in the comments section. Nice job. I look forward to more of your work

Cinta 3D en photoshop | Hernan Davos
Posted on June 22nd, 2008

[...] Enlace: PhotoshopTutor [...]

Tutoriales photoshop « LaCARPETA
Posted on July 5th, 2008

[...] Book Tutorial Design a 3D Retro Strip Design a Modern [...]