Learn To Create A Ribbon Style Header

Good evening, in todays quick and easy tutorial I'll be showing you how easy it is to create a simple ribbon style header which can be used in a number of ways for your websites.

What We’ll Be Creating

Quick & Easy Ribbon Header

Resources Used In This Tutorial

Starting With The Pen Tool

Create a new document (Ctrl + N) 1000 x 450 pixels, before we start let me just explain about the ribbon. The ribbon will be in 3 parts, you will first have the end of the ribbon, the fold then the main part.

Quick & Easy Ribbon Header

Select the “Pen Tool” (P) with the following settings.

Quick & Easy Ribbon Header

Now with the pen tool start to draw the left side of the ribbon edge (1), the edge should have curvy frilly edges.

Quick & Easy Ribbon Header
Quick & Easy Ribbon Header

Still with the “Pen Tool” (P) begin to draw shape 3 which is the main part of the ribbon. Towards the right side of the ribbon (The Main Part) make sure the path lines are straight as this will make it easier when we come to create the right side of the ribbon.

Quick Tip:

Holding down Shift key on the keyboard will give you a perfect straight vertical or horizontal line.

Quick & Easy Ribbon Header
Quick & Easy Ribbon Header

Again with the “Pen Toll” (P) begin to join the ribbon edge and main ribbon part together with a nice triangular shape.

Quick & Easy Ribbon Header
Quick & Easy Ribbon Header

You should now have 3 shapes which make up half of your ribbon all on 3 separate layers.

Making The Ribbon Complete

To make the ribbon complete all’s we have to do is duplicate and flip our layers, BUT before we do this we need to make our main ribbon part (shape 3) a little longer. Select the “Pen Tool” (P) and click he vector mask in the layers window, once you have selected the vector mask the shapes outline should be highlighted.

Quick & Easy Ribbon Header

Now hold down the CTRL key down on the keyboard and highlight all of the anchor points. Left click on the mouse while dragging and you should see a a marquee style type box appear. The image below indicates all anchor points are selected.

Quick & Easy Ribbon Header

Now go to “Edit > Copy” (Ctrl + C), “Edit > Paste” (Ctrl + V) and finally “Edit > Free Transform Path” (Ctrl + T). We now have to flip the shape so go to “Edit > Transform > Flip Horizontally”, move the duplicated shape over until you have the length you require.

Quick & Easy Ribbon Header

Now duplicate the other 2 shapes which make up the ribbon and flip them horizontally. Finally move the shapes into place on the other side of the ribbon.

Quick & Easy Ribbon Header

Adding The Layer Styles

Add the following layer styles to the two ribbon end layers.

Quick & Easy Ribbon Header
Quick & Easy Ribbon Header

You should have something like this.

Quick & Easy Ribbon Header

To the ribbon fold layers add a gradient overlay using settings below.

Quick & Easy Ribbon Header

You should have something like this.

Quick & Easy Ribbon Header

Now, finally add the a gradient overlay to your main ribbon shape using the settings below.

Quick & Easy Ribbon Header

You should have something like this.

Quick & Easy Ribbon Header

Adding A Pattern To The Ribbon

Create a new (Ctrl + N) document 4×4 pixels, select the “Pencil Tool” (B) then simply replicate the image below.

Quick & Easy Ribbon Header

When your done go to “Edit > Define Pattern”, save the pattern then head back to your original canvas. Load a selection around on of the ribbon ends.

Quick Tip:

To load a selection simply click the little layer thumbnail whilst holding down the Ctrl key on the keyboard.

Quick & Easy Ribbon Header

With the selection loaded we now need to contract the selection. Contract the selection by 5px by going to “Select > Modify > Contract”. Select the “Fill Tool” (G) with your pattern which you created earlier.

Quick & Easy Ribbon Header

Fill (G) the selection with the pattern then go to “Select > Modify > Contract”, contract the selection by 5px again and hit the delete key. Finally add a white #ffffff color overlay to the pattern layer.

Quick & Easy Ribbon Header

Repeat these steps for each of the ribbon shapes apart from the fold shape.

Quick & Easy Ribbon Header

Adding Some Grunge

Download the grunge brushes from the resource list.

Add some random grunge to the middle part of the ribbon then set the layers opacity to about 43% and blend mode to soft light.

Quick & Easy Ribbon Header

The Finishing Touches

Load a selection around the either the left or right ribbon ends then select the “Gradient Tool” (G).

Quick Tip:

To load a selection simply click the little layer thumbnail whilst holding down the Ctrl key on the keyboard.

Quick & Easy Ribbon Header
Quick & Easy Ribbon Header

Drag the gradient from the end of the middle part of the ribbon outwards towards the end of the ribbon. Set the shadows opacity to around %40.

Quick & Easy Ribbon Header

Repeat the same steps for the other end of the ribbon. Once your done you can begin to add some of the header elements like navigation and title.

Quick & Easy Ribbon Header

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 Ribbon Header
About Author

Tom loves to write on technology, e-commerce & internet marketing. I started my first e-commerce company in college, designing and selling t-shirts for my campus bar crawl using print-on-demand. Having successfully established multiple 6 & 7-figure e-commerce businesses (in women’s fashion and hiking gear), I think I can share a tip or 2 to help you succeed.