With the holidays are right around the corner, I though it might be fun to create a tutorial on the popular 3d Wrap-Around Ribbon effect that has been popping up so much this year. This is a great way to add depth to your designs, and it's pretty darn easy to complete. I'll show you some examples of it in action around the web, walk you through the creation techniques in Adobe Photoshop, and then explain the different approaches to coding it.
Examples of The 3D Ribbon in Action
Before we dive into the tutorial, let's take a look at a handful of sites that are using this effect. Note the variety of ways that you can get creative with this, so don't stop at this tutorial alone! The principles behind this are very simple in nature, but as you can see from the following examples, you can get pretty frisky with the execution.
The Tutorial
Alright, now that we've seen a few examples of just how creative you can get with this effect, let's dig into the tutorial. The goal here is to teach the basic techniques - what you do with them is where it should get interesting!
Step 01: Getting Started
Create a new document in Photoshop. The size doesn't really matter... we'll be using a 600px wide canvas for this walkthrough, but you can use your own size if you're working this into a web design.
We want to create some separation right away, so start out by making the background dark, and draw a light colored rectangle on top.
Step 02: Creating the Basic Shapes
We'll start the ribbon by drawing a 310px by 44px rectangle. I'm using a rounded rectangle with a 4px radius, but you can also use a squared rectangle if you don't like the round corner.
Pay attention to the width: You want to use a total width that equals the "width of your content column" + "the width that you want the ribbon to overlap your main background". In this example, I'm using 310px, which is 285px for content, and about 25px of overlap.
Step 03
Next, I want to square off the bottom corner so that it's not round. I move in with the Convert Point Tool, and simply nudge the point so that there is a 90 degree angle.
The reason we're doing this is simple: to complete the optical illusion of the ribbon "folding" in on itself, this corner should not be round. You can get pretty creative with this step alone by creating the illusion of "rounding out" by making the bottom-right corner actually fold down - but we'll keep it simple in this example.
Step 04
Now we want to cut out the shape of the ribbon. Use the Polygonal Lasso Tool to carve out the shape... I'm holding down the "SHIFT" key to force 45 degree angles, but you can carve out any shape that you'd like.
Once you've selected your desired shape with the lasso tool, make this a Vector Mask on top of your ribbon layer:
Step 05
The next step is to create the "shadowed" side of the ribbon that will disappear behind the foreground. Start by drawing a simple square.
Tip: Use a color that's a little bit darker than the front side of the ribbon to help create the illusion of depth.
Step 06
Now we need to create the "fold" effect - using the Convert Point Tool again, move the bottom-right point of the square UP until it's almost to the top-right point.
Your document should look like this now:
Step 07: Layer Styles
Ok - now we have our basic shapes! That means the next step is adding some custom layer styles to our ribbon. You can do whatever you want here, but I'll show you the settings I'm using to create a light, textured appearance.
The following layer styles get applied to the front-side of the ribbon.
A simple drop-shadow is the first step - this creates the initial division between the ribbon and the foreground.
The inner shadow is the crucial element - note the "Noise" levels - that's what's creating the texture.
Adding a light inner glow will help create depth and division.
The following layer styles get applied to the under-side of the ribbon.
Adding a light inner glow will help mimic the one on the front side.
Whallah! Now it should look like this:
Step 08: Adding the Text
Time for some text! I'm using 18pt "Eureka" with a light drop shadow, but you can use anything you'd like.
Step 09: Adding the Dotted Lines
The dotted lines can be done in a variety of ways, but I'll show you how to do it using basic text "dots" - using the "." key. Note the settings up above - the text-layer is set to nearly 50% opacity, and I'm using a variety of character techniques to complete the effect.
Now, let's look at the light "shadow" that helps make the dots pop a little:
Take note that we're not using the "Multiply" method because we actually want our shadow to be light, not dark.
Step 10: Final Effect
That should complete the ribbon for the right rail; You can copy/paste and flip the layer-set to create a version for the left-side.
Ways to Code It
Now that we've designed the ribbon, it's worth taking a few minutes to discuss the three ways that you might use to code it. We won't go deep into the line-by-line code; there are lots of CSS specific tutorials that can help you with this out there (even on our network site, Nettuts!). What I will do is discuss the approaches that you might use as well as sharing a few links where you can find deeper information on them.
Method 01: CSS - A Single Background Image
This is the simplest, most straight forward approach. It uses the basic CSS background properties without any fancy tricks beyond a little positioning. Your ribbon might look slightly different, so I'll walk you through the basic steps:
- Chop: Save your ribbon graphic as a transparent .PNG file (see above)
- HTML: Create a basic DIV or Header element.
- CSS: Style the element to use the graphic as the "background-image".
- Use the "background-position" property to nudge the ribbon into place to complete the effect. You'll likely want to use a negative integer to push your graphic outside of the framework.
- Use the padding property to place your text in the right spot.
Pros: This is the simplest method - it's easy to complete.
Cons: Re-skinning requires opening up a Photoshop file; The element won't "stretch" if you want it to be anything other than a fixed size.
Method 02: Sliding Doors CSS
The classic "sliding doors" method is similar to the first approach, but it'll allow you to stretch your ribbon to fit any size you want!
- Chop: Save your ribbon graphic as three transparent .PNG files (see above)
- HTML: Create three elements - this left, middle, and right approach will allow us to stretch the center element using a repeating background.
- CSS: Style the elements to use the graphics as the "background-image" - the center element should "repeat-x".
- Use the "background-position" property to nudge the ribbon into place to complete the effect.
- Use the padding property to place your text in the right spot. The left and right modules will be empty - the center module will hold your text.
Pros: This is quite flexible - you get the benefits of using images and the flexibility of the sliding doors method.
Cons: This can be quite tricky to get perfect in every browser; Re-skinning still requires opening up a Photoshop file, but now there are three images to save, not just one.
Method 03: CSS3 Techniques
If you're willing to give up some of the details (like the noise texture and the inner glow), it's possible to re-create this in code completely without images. The new rotation method, gradients, and element shadows are the primary techniques (read about them all here).
Read the full CSS based tutorial at Nettuts!
Pros: No images needed! This means it's super easy to re-skin by changing a few values in the CSS.
Cons: In addition to losing the ability to add texture and other highlights, this method won't render properly in lots of browsers. Everything above IE8, Safari 4.0, and Firefox 3.5 will work fine - but you're risking it not working at all in older browsers (which lots of people have).
Conclusion
I hope you've enjoyed this walkthrough! This effect is one of the simplest ways to add the illusion of depth to your designs, and there area variety of ways that you can approach the coding of it. Leave some comments or questions down below :)
