Rapid Fire #7: Shiny Ribbon

Holiday Ribbon

Just in time for the the holiday season, this Adobe® Fireworks® tutorial will show you how to create a silky, flowing ribbon; the type that you could slap onto your graphic elements to make them more festive. I hope you enjoy my tiny Christmas present.

I apologize in advance for the shoddy typography. If anyone knows how to add a nice perspective to Text On A Path, let me know.

Drawing The Ribbon Body

The Flow

Start off with a blank canvas, and use the Pen Tool (Icon) to draw a Bézier curve that will be our basis for the “flow” of the ribbon. (See Figure 1.) Early on, keep in mind the following visualizations:

  • The line will become the bottom edge of the ribbon, and
  • The sharp curves will become the folds of the ribbon.

Ribbon flow
Figure 1. Draw Bézier curve of ribbon flow.

With the curve still selected, Duplicate it (Ctrl+Alt+D) and move it upwards until you get the desired height of your ribbon. (See Figure 2.)

Ribbon height
Figure 2. Duplicate curve for ribbon height.

(Duplicate the same curve again, but this time, hide it from view (Ctrl+L); we’ll need it later.)

The Flare

Use the Subselection Tool (Icon) to nudge the specified nodes of the duplicate curve. (See Figure 3.) This will give us a flared perspective, making parts of the ribbon appear closer.

Ribbon flare
Figure 3. Nudge nodes for flare perspective.

The Snip

With the Subselection Tool (Icon) still active, select one end node of the duplicate curve [1]. (See Figure 4.) Switch to the Pen Tool (Icon) to add a V-shaped “snip” after the selected node. Place the last node of the snip into the corresponding end node of the original curve to connect both curves together [2]. Do the same for the other ends of the two curves to close the shape up [3, 4]. You now have your basic ribbon structure with snipped ends.

V-shaped snips
Figure 4. Add V-shaped snips to close ribbon shape.

Fill our ribbon shape with a nice, rich base color of your choice. In keeping with the holiday spirit, lets color this one festive red. (See Figure 5.)

Color me red
Figure 5. Fill the ribbon shape with color.

Use the Pen Tool (Icon) to draw shapes that will fill in the empty parts of the ribbon shape. (See Figure 6.) Notice that I drew in concave curves where the folds of the ribbon will create edges. Once you’re satisfied with the overlapping of the images, select them all and do a Union (Modify → Combine Paths → Union). (See Figure 7.)

Filling in the gaps
Figure 6. Draw shapes to fill in the gaps.

Solid shape
Figure 7. Union to create a solid ribbon shape.

The Guide

Remember the duplicate curve that we hid previously? Bring it back into view by selecting the layer for that curve, then put it above the layer of the ribbon shape we just made. (See Figure 8.) This line will serve as our guide for drawing the rest of the stuff into the ribbon.

Guide curve
Figure 8. Bring back original curve as guide.

Adding The Details

Now on to the fun part: putting in the shadows and highlights! You’ll be using the Pen tool exclusively for the rest of the steps, so get your wrists and fingers warmed up properly.

The Front Section

Draw a shape that will trace over the front section of the ribbon, leaving a small gap of about 1 pixel along the top edge. (See Figure 9.) Fill this shape with a gradient going from left to right (black:100 → black:0 → black:0 → black:100)*, and give it an opacity of 30%. This will create shadows towards both ends of the front section. The small gap we left at the top creates a subtle highlight for the top edge. Can you say, “two birds, one stone?”

Shadow 01
Figure 9. Add shadow to the ends of front section.

Next, draw a shape that roughly covers part of the front section not affected by the shadow we drew in earlier. (See Figure 10.) Leave a small gap along the top edge, just the same, but also leave a gap of about 2 pixels along the bottom edge. Fill this shape with a gradient going from left to right (white:100 → white:0 → white:0 → white:100), and give it an opacity of 30%.

Highlight 01
Figure 10. Add highlight to front section.

Between The Folds

Now, draw a shape that traces over the left middle section of the ribbon (the one between the two folds), leaving a gap along the top edge, as well. (See Figure 11.) Fill this shape with a gradient going from left to right (black:100 → black:0 → black:0 → black:75), and give it an opacity of 40%. Space the gradient opacity handles such that the middle handles are closer to the right; this will give the appearance of darker shadows inside the fold than the outside.

Shadow 02
Figure 11. Add shadow to middle section.

A Secondary Shadow

Let’s add another shadow; one that’s caused by a point source, such as a spotlight (as opposed to ambient light that’s diffused). Draw a shape inside the last shadow that swishes from the upper edge of the left fold moving towards (but not touching) the lower edge of the right fold, and close it by tracing back up along our curve guide. (See Figure 12.) Fill this shape with a gradient going from left to right (black:100 → black:0), and give it an opacity of 20%.

Shadow 02a
Figure 12. Add secondary shadow to middle section.

Repeat the last couple of steps to add shadows to the lower fold. (See Figures 13 & 14.) Draw your shapes within the right half of the area of the left bottom section of the ribbon (the one with the snip), this time with the gradients going from right to left.

Shadow 03
Figure 13. Add shadow to bottom section.

Shadow 03a
Figure 14. Add secondary shadow to bottom section.

Snip Highlight

Next, draw a shape that traces along the left half of the bottom portion, leaving a small gap along all edges you encounter. (See Figure 15.) Fill this shape with a gradient going from the apex of the snip towards the right (white:100 → white:0), and give it an opacity of 30%. This will highlight the end of the ribbon, as well as create shadows along the edge of the snip.

Highlight 02
Figure 15. Add highlight to end of ribbon.

Mirror The Details

Lastly, repeat the last several steps for creating the highlights and shadows on the right side of the ribbon. (See Figure 16.) You’ll need to draw the shapes manually to get the right curves, but for copying the gradient values over, you can follow my…

Gradient Mirroring Mini-Tutorial
  1. Select the shape whose gradient you want to mirror, and Copy it (Ctrl+C);
  2. Select the shape to which you wish to apply the mirrored gradient, and flip it (Modify → Transform → Flip Horizontal/Vertical) according to the direction of the gradient (in this case, horizontally);
  3. Paste the attributes (Ctrl+Shift+Alt+V) of the copied shape onto the selected shape;
  4. Flip it back the same way you did in #2 (in this case, horizontally); and
  5. Yell, “kick-ass!”

Mirror details
Figure 16. Mirror details onto other side of ribbon.

As a finishing touch, change the color of our curve guide to a dark red and move it up to the topmost layer. This will create a pronounced bottom edge shadow.

And there you go: you’ve a.) completed a graphic element that’s ready for use, and b.) created a new canvas on which to put other stuff to make it more attractive/functional. For instance, you can add some text to the ribbon. In my final product, for example, I created a Text On A Path (Orientation: Skew Vertical) and adjusted the size of each letter (poorly) to allow it to flow with the ribbon. (See Figure 17.) You can also add some Victorian or Celtic accents, like those intricate decorative ribbons have.

Final product
Figure 17. Final product.

I hope you find this useful, even after the holidays are over. If you have suggestions of other things to put in the ribbon, or if you get to use this in a project, do drop me a comment; I’d appreciate it. Merry Christmas to all!

* Gradient notation: (color1:opacity1 [→ color2:opacity2 [→ ... colorN:opacityN])

Need a quick sample to study? Download the source PNG (tutorial07.zip, 84KB) for this tutorial.

27 Responses to “Rapid Fire #7: Shiny Ribbon”


  • Wow, excellent tutorial! I think this will make the christmas happier for my Fireworks hahaha – excellent! I don’t imagine all the work to write the text and place the images.
    []‘s

  • Very nice tutorial, thanks for sharing. Fireworks is very powerful, keep learning

  • just great! Thanks for that tutorial. Merry Christmas!
    For the text distortion you can try NNTransform extension. It is hard to make good results, because it has no preview, but it is powerfull.

  • What a waste of a tutorial. You end up re-drawing multiple times because you chose to merge the sections instead of keeping the outlines you actually needed. Even when you kept the outline you only used it as a ‘guide’ and retraced anyway. Plus the pen tool is a pain to just jump in with from the start (it’s impossible to get mirror sides like that), it’s easier to use a line tool then go to the pen afterwards to turn them into curves. Either way Fireworks is way behind Flash for making those easy drawings for some bizarre reason I can’t understand. Where’s the bending lines without needing to add bulky annoying as hell bezier curves? Why can’t I find an auto magnet to join vertices like in flash? Why is it treating my drawings as if they are all on different layers even when they are on the same layer? fuck.

  • bliznakov: Thanks for the link. Judging from the screenshots, it looks like it might do the job. I’ll give it a spin sometime.

    sam: There’s always more than one way to draw a ribbon base shape, and there’s no stopping anyone from doing it differently than what I showed here. I may like to draw a solid base shape, but others are free to draw it in 5 or so parts; it’s all about preference.

    With regards to the Pen tool, I never said it’s for everyone. It may not be the easiest drawing tool to use, but it’s powerful as hell. And as for the mirroring, I was referring to the gradients; I did state that, “You’ll need to draw the shapes manually to get the right curves…”

    Fireworks and Flash (which I both use and love) are both wonderful programs, and they each have their purposes, which is why they have different implementations of curve-drawing. I agree with you that Flash makes it easier to draw curves, but that’s as far as it goes. Flash is an animation tool, and should be treated primarily as such. Still, I’m not sure why you’re annoyed at Bezier curves; vector-lovers swear by it’s awesome power for precise curve control. ;)

    It’s obvious that you’re more of a Flash user, and that’s a good thing. Just don’t be all up in Fireworks’ face because you prefer Flash’s vector and layer functions over it. Respect goes both ways.

  • @sam,

    Why are you reading a Fireworks tutorial if you already closed your mind and decided that you hate it?

    Your “each object on its own layer” complaint is ridiculous. Fireworks does it the correct and intuitive way. Every object should be it’s own separate thing and not auto merged to a single layer. If that were the case then you would need a fantastically retarded feature like History save (cough)Photoshop(/cough) in every source image. Fireworks does it right.

  • Craig: Hey, thanks for dropping by and adding your thoughts on layers. I do agree; Fireworks does it best when it comes to layers: it just gives you much more control over every bit of element in your canvas.

    And oh, that is one kick-ass redesign you did with sDS! Congrats! ;)

  • Hi there, im trying this tutorial now. But I notice I have to somewhat have the original independent curve lines at some point. How do I disconnect the path points again — coz I forgot to copy the original unconnected path. I tried trying certains tools but It won’t split the points…

    Like this image: http://img4.picsplace.to/img4/29/ex_000.gif

  • neo: you can use the Knife tool for that. Cut across the line that you want to remove, then delete the points that are created from that.

  • Thank You Very Much Brownspank,

    It works hehe. Your site is awesome. Thank You for doing this, you’re a very big help to us. Keep up the great work!

    neo.

  • EXCELENTE MEN; MUY BUEN TUTORIAL!!!!!
    HAPPY SEASON!
    RICHARD

  • great stuff. Didnt know ribbons can be made that way.

  • Hi Brownspank, I hope you had a wonderful easter.

    I have a question if you don’t mind. How do I contract or expand a vector shape in its precise form. I have tried using the inset function on fireworks and setting variable input limits but the result is not perfect and accurate. Sometimes a shape with both square and curve edges , turn square edges into curve.The only perfect inset it has done is square. How do I solve this problem.

    Thank you in advance,
    Neo

  • neo: From my experience, Fireworks’ Inset Path function has some problems. It seems to work fine with small Width values (10-15), but becomes unpredictable with larger values.

    With that in mind, always choose the sharp corner option to avoid curving sharp edges. Also, if you’re doing large insets, do it in increments of Width(10) or smaller. That should take care of your inset problems. ;)

  • Muy buenos los efectos siga asi, he aprendido mucho si quieres hecha un vistaso a mi flog http://www.fotolog.com/kristking

  • This one of the best installments yet, second only to the photo-realistic legend you started with! When do we get to see the next one?

  • Aaron: I’m glad you like it. Rest assured that I haven’t abandoned Rapid Fire, I’m just swamped with a lot of work that I haven’t been updating my blog lately. But I’ve been trying to finding time (and ideas) to release another tutorial. ;)

  • very nice job, I agree with Aaron, when can we get a new one?

  • This is really cool but I must admit it makes me feel totally talentless. I would like to see a tutorial on how to create a certificate seal.

    I am trying to create certificates for those who pass a training program. The seal would be used in a PDF document.

  • very nice tutorial. i realy like it. thanks

  • I am very happy that I found this site.

  • Oh no… curves.

    Even with a simple tut like this, I freak out when I see curves.

    I’ll keep trying.

    Great Tut.

    Keith D

  • Wow! excellent! Very simple yet very elegant tutorial. Thanks for sharing this. I am very thankful that I found your site, now I can learn many wonderful tips from you.

  • Wow, Excellent effect. Thanks for your tutorial. I wait for another effects more…

  • How in the world can I do the first curve lines with the pen tool? I’m stuck right from the beginning. I’m a newbie and don’t know how to make the lines to curve nicely the way you did from the get go. thanks.

    • Don’t worry if you don’t get it smooth the first time around. Bezier curves require quite a bit of practice. You can download the source PNG (link provided at the end of the article) and inspect each of the points, if that helps.

  • Wow! I am digging an old post like this, old yet like an antic jewel of information, there are so much gems in this post that can help me to a successful graphic artist! Though I find it difficult to follow some of the steps, I find it very interesting. I know I need more time to learn all this things. Nice tutorial! Thanks!

Comments are currently closed.