Quick & Easy Ribbons

Quick & Easy Ribbons

What We’ll Be Creating

Quick & Easy Ribbons

Creating The Ribbon Left Side

Lets jump straight in, create a new (Ctrl + N) document 800 x 400 pixels with your desired background color/effect.

Quick & Easy Ribbons

Set the foreground color to #656565 then select the “Rectangle Tool” (U) with the following settings.

Quick & Easy Ribbons

On the left side of the canvas drag out a rectangle.

Quick & Easy Ribbons

We now need to drag out a 2nd rectangle but subtract it from the original rectangle. To do this select the “Rectangle Tool” (U) then select the “Subtract From Shape Area” option in the top options panel. Once selected drag out another rectangle over the original rectangle, once you drag it over you should notice the part which overlaps disappears.

Quick Tip:

Make sure the path is selected in the layers window before subtracting.

Quick & Easy Ribbons

Creating The Fold

With the “Rectangle Tool” (U) create a small rectangle the same height as the ribbon end but not as wide then go to “Edit > Transform > Perspective”. Drag the top left anchor point downwards until you have something like the image below.

Quick & Easy Ribbons

Once the fold has been created add a gradient overlay to the “Ribbon End Layer” using the settings below.

Quick & Easy Ribbons

Now add a gradient overlay to the “Fold Layer” using the settings below.

Quick & Easy Ribbons

You should have something like this.

Quick & Easy Ribbons

Creating The Ribbon Front

With the “Rectangle Tool” (U) drag out a rectangle the same height as the smallest part on the fold and as long as you want the ribbon to be.

Quick & Easy Ribbons

Quick & Easy Ribbons

Now add a gradient overlay to the “Ribbon Layer” using the settings below.

Quick & Easy Ribbons

You should now have something like this.

Quick & Easy Ribbons

Adding The Right Ribbon End

Creating the right ribbon end is a piece of cake, highlight the “Left Ribbon End Layer” and “Left Ribbon Fold Layer” then right click and go to “Duplicate Layer(s)”.

Quick Tip:

Make multiple selections by holding down the CTRL key on the keyboard.

With the duplicated layers still selected go to “Edit > Transform > Flip Horizontal”. Now drag the rectangles across the other side of the ribbon. If you have global lighting settings enabled you might have to change the angle of the gradient so it matches that of the left side.

Quick & Easy Ribbons

And that’s all there is to it, now just personalize it to your liking.

Conclusion

Thanks for taking part in this tutorial, if you managed to finish this tutorial I’d love to see some of your results. Feel free to post them up on our Facebook Fan Page.

Quick & Easy Ribbons

Purchase Psd Now

About the Author Wilma Hamlin

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

Leave a Comment:

13 comments
john says

Very easy to do and useful, thanks

john

Reply
rajasegar says

Great tutorial and techniques well explained!
Thanks for sharing…
Bookmarked!!

Reply
Web Design Sheffield says

An easy ribbon that can be used anytime. Great tutorial and it is easily understood.

Reply
samir says

please explain how to subtract 2nd rectangle from 1st rectangle in details

Reply
abd says

thanks man

Reply
Frank says

How do you rotate the 2nd rectangle?

Reply
Riz says

Quite Easy tutorial & Result comes very nice,
Thanks for the Tutorial Richard.

Reply
Shibby - Web Development says

Very usefull and easy tutorial.
Thanks you very much!

Reply
roali says

awesome, thank u so mach

Reply
Raven says

same problem as the rest of the folks. no explanation of how to rotate the second rectangle. and I have tried numerous methods that all seem to fail. is the author of this tutorial even paying attention to the feedback?? because I don’t see a response to this question.

Reply
Richard Carpenter says

if its a shape layer, select the path then press ctrl + t and rotate.

Reply
Prashant Chourdia says

great thanks for share…

Reply
Josh Lake says

Cheers for posting this tutorial, I will be using these techniques in my web design work as I have noticed that ribbons seem to be the new big thing to include to draw attention to certain elements. Personally I feel ribbons that have a stitched effect around the edge look more realistic and interesting. Is there any way that you can use a dashed stroke to achieve this? Once again, thanks and I look forward to more posts and tutorials to come from you.

Reply
Add Your Reply

Popular posts

css.php