3D Banners / Ribbons, whatever you want to call them are all the rage these days. Ranging from simple to complex, they each have their own place and are a very simple way to make your website look instantly better. They are a great effect and a nice way to denote headers and titles to sections.
In this tutorial we will learn how to create an “over the top” 3D banner. With this tutorial you will be able to apply this technique to any shape / size of banner you want. I am just giving you the basics so feel free to experiment with any of these steps.
The first step is to create a new document in Photoshop. File > New and so on. In this instance I have made the width and height 600px so we have a nice large, detailed area to work with.
Next we want to create the path we are going to work with using the pen tool. Select the Pen tool and draw something similar to what I have here. You can use the shift key to help you keep your lines straight. Honestly, I have not found an easy way to draw this, A lot of it, for me, is using the undo function so that I can get the anchor points to the right place. Trial and error I guess. Anyway, once you have a shape you are happy with, name the path so you can keep it. Just go to the paths area of your toolbar and double-click the default name “work path” you should be able to rename it to something else like Banner Path. After you have given it a name , right-click it and select “make selection”. Now your path is a selection and is ready to fill.
Now that we have made our selection, let’s get to coloring. One of my favorite gradients is a dark red to light red. I think it is very striking and hard to miss. So pick two colors you like and then use the gradient tool to color your image similar to this. I prefer having the darker color at the bottom. But like I said earlier, EXPERIMENT!!
Next we need a texture. I was thinking about what texture would look good on this ribbon and I decided that a leather texture would be pretty awesome. I just google searched for some leather textures but today I found a link to some awesome ones. You can find them here at Spoongraphics about halfway down the page.
Find one you like and place it above your colored in shape layer. Press and hold the alt key and move your mouse onto the border between your original shape and your new texture, an icon that looks like two intersecting circles should appear, click that area (this is all in the layers pane by the way). You have now put your texture “inside” of your shape.
Next, I played with the opacity of the leather texture, I turned it down to about 40% but you should do whatever you feel looks good. Another trick here is to take down the saturation of the leather layer to black and white so that your top color shows through better.
Our next step is to add the “stitching”. There are a lot of stitching brushes out there but none of them that I care for that much. I prefer to do it by hand which can create a much more organic look. So create a new layer!First, go into the brush menu and find the brush that looks like the one in the bottom left of this image (the 7px size one) Next click on brush tip shape in the menu (near the top) then set all of the settings as they are in this picture. We will be adjusting the angle arrow in the center of the brush palette to get the stitching to go the right way. Turn the arrow vertical to do the left and right vertical stitching. So, select your brush (the one you just made) and paint the stitching onto your image.Next, we need to do the angled stitching. Go back into the brush menu and change the angle arrow to about -34 degrees for the one side (when you need to do the other side change it to 34 degrees) and paint on your angled stitching.
You should end up with something that looks like this.
Next we want to create the drop shadow effect. There are a ton of ways to do drop shadow, again I like to do it by hand because there is more control over how it looks and this way is actually pretty easy. Make a copy of your original shape layer and put it on the bottom of the layers pane. Next do a color overlay and make it all black. Then we will select Filter > Blur > Gaussian Blur.
Make the blur about 5px or so. I like to keep the edges pretty small. Looks better in my opinion but honestly, again, just experiment with what looks good to you.
Next we want to warp the blurred layer. Select the layer in your pane, press ctrl+t then right-click inside of the box and you should see a menu, select warp and a grid will appear. You can pull all of these points to make the shadow do what you want. I like to pull mine out pretty far to give it some real depth. Once you are happy with the shape change the opacity of the layer a bit so it doesn’t look so hard.
And there you have it. An awesome looking 3D Banner to use wherever you please. You can apply this process to pretty much any shape and get a cool looking banner to use on your site or wherever. Let me know if you guys have any questions or need a clarification on anything. Also post some links to your designs if you use this tutorial.