Today, I was browsing around some web templates and came upon quite an interesting concept, which gave me the idea for this web design Photoshop tutorial. Basically, it’s quite a simple technique to use with a pen tool, but it does create some really sweet results. Get ready in this web design tutorial to create a 3D Retro Strip in a series of 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, let’s 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):
Alright, 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 let’s 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 leftovers. Not to get you confused, I added a preview of what should have been done before the clipping occurred:
Using the same method, let’s 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 set up our colors and aligned our strip, we already can see the 3D Effect; however, let’s add some glare to it. Take the base and change the color to white, and 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 quite simple tutorial; however, it gives a nice introduction to the way that you can create simple, but effective, 3D objects that can make your layout just POP. The inspiration came from a layout that I found on Monster Templates. Take a look below:
3D retro strip design design tutorial is really nice and i am looking for some tutorial like this and i found it here at your site. Thanks for sharing this.
ReplyDeleteSolid modeling shortens design cycles, streamlines manufacturing processes, and accelerates product introductions by improving the flow of product design information and communication throughout an organization, as well as among its suppliers and customers.
ReplyDelete