Tutorial Details
- Program: Adobe Photoshop
- Difficulty: Beginner
- Estimated Completion Time: 15 Minutes
Final Product What You'll Be Creating
You don’t have to search the web for very long to find a web ribbon in the corner of an image. In this quick tip tutorial we will show you how to create your own. Let’s get started!
Tutorial Assets
The following assets were used during the production of this tutorial.
Step 1
Create a new document and name it “Ribbon”. For this example, we’ll do a 600×600 pixel canvas.
Step 2
Create a new layer and name it “Background Texture”. Now fill it with a light color (I used #cccccc). Now go Filter > Noise > Add Noise and add some noise to the layer to help create some texture. I used the following settings:
- Amount: 10%
- Distribution: Gaussian
- Monochromatic: Checked
Now set the “Background Texture” layer opacity to 15%
Step 3
Now let’s create the box where our image goes. For this example, I am using the rectangle tool with a fixed dimension of 300×200 pixels.
Just place it in the middle of the canvas and name the layer “Clipping Mask”
Step 4
Add the following layer styles to the “Clipping Mask” to give it a nice shadow and outline.
Step 5
Using whatever image you like (I used the PSD Tuts screenshot) place it in the document, on top of the “Clipping Mask” layer and go to Layer > Create Clipping Mask
Step 6
Now we’ve got our image upon which we’ll place our ribbon. Start by using the rectangle tool and draw the ribbon. You’ll then want to rotate it about 35 degrees. Use the free transform tool (keyboard shortcut for free transform (Command/Ctrl + T) or go to Edit > Free Transfrom). Make sure your ribbon’s corners extend beyond the image mask size.
The ribbon color doesn’t matter right now because we’ll set a gradient overlay in the layer settings. Name the layer “Ribbon”.
Step 7
We’re going to make a layer mask for the “Ribbon” layer. This will hide the parts of the ribbon that extend beyond the image. Do the following:
- Command/Ctrl + Click the vector mask of the “Clipping Mask” layer. This will create a scrolling marquee around the clipping mask.
- We want our ribbon to extend slightly beyond the boundaries of the image, so expand the selection by going Select > Modify > Expand and expand the selection by about 4 pixels.
- With your current selection, choose the “Ribbon” layer and create a layer mask. You can do this one of two ways:
- Layer > Layer Mask > Reveal Selection
- Click the “Add Layer Mask” at the bottom of the Layers panel (see image)
Step 8
Let’s apply some layer styles to our ribbon shape. These styles help give our ribbons some shadows, highlights, and texture to improve it’s look. We’ll apply the following:
- Drop Shadow (outer shadow)
- Inner Glow (texture)
- Bevel and Emboss (edge highlights)
- Gradient Overlay (ribbon coloring)
- Stroke (help define the outer edge of the ribbon)
We now have something that looks like this:
Step 9
No we want to create the folds in the ribbon. Remember how we made sure the Ribbon expanded beyond the image’s edges by about 4 pixels? This is where we will add the fold in the ribbon, as if it is bending behind the image.
- Create a new layer called “Ribbon Fold” and place it above the “Background Texture” and below the “Clipping Mask”
- Select a dark color for the foreground color (I used #240500)
- Select the brush tool adjust the settings to a small sized brush (about 9px) with 100% hardness.
Now use the brush to paint a small circle on both of the bottom edges. Because the layer is below the clipping mask, you’ll only see the dark part of the brush around the ribbon corners that overlap the image.
To help illustrate this point, look at the image below. This is what our PSD would look like if we turned down the opacity on all the layers above the “Ribbon Fold” where we painted with our brush.
Step 10
Let’s add our text. I used the following:
- Chunk Five
- 24pt
- 75 letter spacing
- Color #240500
Place the text on your ribbon and rotate it 35 degrees (using the Transform tool as we did with the ribbon shape in step #6)
Now let’s add some layer styles to make our text appear indented on the ribbon.
Now you should have something that looks like this:
Step 11
Finally we’ll add the stitching to our ribbon. Grab the text tool and type a bunch of hyphens. Then change the character settings as follow:
- Chunk Five
- 13pt
- 200 letter spacing
- Color #700404
- Text Layer Opacity: 50%
Place the text on your ribbon and rotate it 35 degrees (using the Transform tool as we did with the ribbon shape in steps #6 and #10). Now let’s add some layer styles to make our stitching appear more realistic.
Duplicate that text and move it down to the bottom edge of the ribbon. Now you should have something that looks like this:
Step 12
The last thing we need to do is apply a layer mask to our stitching so it doesn’t go beyond the image’s edges. To do this, simply duplicate the layer mask on the “Ribbon” layer and move it to the new text hyphen (stitching) layer.
Apply the effect to both stitching layers and that’s it! You should now have something like this:
Final Image
That’s it! Now you know how to make a simple ribbon in Photoshop. You could play around with other options like changing the colors. Or, you could try making rounded edges on the ribbon where it crosses the image. That could be accomplished by using a combination of the pen tool and the existing layer masks. Good luck!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jim Nielsen
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Awesome, Thanks.
When I saw the title of this post in Google Reader, I was very curious to see how the stitching itself would be accomplished. Using hyphens is something I never would have thought to try. Very clever! Kudos!
Nice and easy
tahnks
Very easy to do, thank you very much for this useful tutorial ^^
I was also curious how the stitching part was done. Using text is indeed a clever idea. What other techniques could be used to make those stitches?
Custom brushes with spacing set high, or use illustrator to create a dashed line and bring into photoshop.
Although, using the text is pretty clever.
Nice way to do the stitches.
Another way to do stitches using a brush:
http://pshero.com/photoshop-tutorials/text-effects/text-in-stitches
There’s a link on this page to download “stitch” brushes that simulate different kinds of stitches. Draw a path, stroke that path using one of the stitching brushes. After creating the layer style needed to make the stitches look more realistic, save as a graphic style. Then in the future, make the stitches and quickly apply the style.
It’s 7,5% letterspacing (75/1000), not 75 pts, other than that I have nothing to complain about.
wowwww. veryy cool tuts ! Love it
tnx :X
awesome, really learn the best way to make the tiny white shadow we see nowadays on those text, ribbon, button on websites :)
That’s cool. I like it. Surprisingly easier than I would have thought, especially the stitching.
Quick, usefull, fun.
Thanks !!
Quick and easy techniques like this always come in handy at some point. Thanks
Great Tutorial!
I’ve done a lot of these corner ribbons before
but the simple technique of two painted circles for the
folds is brilliant! so quick.
Thanks for the tutorial. Well I was trying it with only CSS but can’t get it along. Have to use this now
i have a damn question
why the best photoshop tutorial aren’t in video screencast tutorial!!!???
thank you very mutch
Tutorials that involve many textual inputs are more useful as a series of static images. This allows you to read the content slowly and understand all the values you need to enter into the dialogs. As a video, these values would be entered quickly and disappear from the video forcing the viewer to pause, jog the video playhead back (god forbid it’s a flash video) and replay and pause again when the presenter is entering values.
It would be nice to have both, but having only a video would create frustration for this type of tutorial.
Agreed. Plus for viewers with hearing loss, videos are less than useful if speech is part of the content.
@Jim Nielsen, it’s a nice tutorial. I was curious about the stitching part of it too, which you explained quite well. Thanks.
Saw this tutorial and had to have a look. I see a lot of websites with these kind of graphics on and I really liked the effect you had created. I found this tutorial very easy to follow and the final out come was great. I really liked how you created the stitching. I have already book marked this link and will be using and experimenting with it to see what I can create. Great little tutorial and I will be looking forward to any more you post.
Thanks for the tutorial!
:)
Thanks for sharing this tutorial, I’ve been searching for a while for something similar. Thanks again.
Just tried this tutorial, very quick
Hello. I have to say that this is the best tutorial I ever followed since I first used Photoshop. Thank you!
Wow! I loved this! So fresh thanks for such a good tuts :D
Simple and useful tutorial :) Great job and big thanks for this!
Excellent tutorial, followed it to the tee. There was one part in step 10 where I couldn’t get the overlay to appear in the text, then it hit me that the entire text layer needed to have the overlay. That wasn’t mentioned in the that step but thought I should point it out for us noobs :-P. Thanks again Jim!
Nice I just made mine in fireworks cs5
got the same effect as well. cool tutorial so thanks.
-Phillip
Simple and beautiful tutorial,thax here is my result
http://p.twimg.com/AiF92XHCMAE6lQ-.png
its easy to make such effect using illustrator…but i was not able make such a stitched effect using photoshop.Thanx a lot.
Hello I have to say that this is the best tutorial I ever followed since I first used Photoshop
. Thank you
Wow I loved this! So fresh thanks for such a good tuts
I loveeeeeeeee this! Thank you so much for the tutorial. I am addicted to making these ribbons now! Haha!