Friday 28 October 2011

Kibou Niji Rengou Rainbow Fighters Reborn. How to Make Ribbons, Part I.

Due to a bad case of flu, I've not been online as often as I wanted to, so this entry will also be lacking in contents. But to make things a bit interesting, I thought I'd share how I made the different logos, and more specifically how I managed to create the ribbon-like R with the rainbow gradient.

As people who've worked with graphics editors (whether they are Adobe Photoshop, Adobe Illustrator, the GIMP, or my personal favourite Inkscape) know, creating curved gradients, especially gradients following complex paths (like ribbons) is a challenge. Raster graphics editors can usually use brushes of some kind to handle (more or less) this issue, but vector programs usually can't. And even then it's quite difficult to set up correctly.

However, for my logos (drawn in Inkscape), I managed to find a method that was not only easy to set up, but also easy to extend, allowing me to make not only the simple ribbons of the first two logos above, but also the more complex ones like the last two! And since I didn't develop this method myself, it's only fair that I should link back to the originator. Just click on that link (yes, it's a Flickr page!): it shows an example of a curved gradient, with a link to an SVG file (the format used by Inkscape, but which is also readable by browsers like Firefox) that describes the method used to create it. It should be relatively self-explanatory, and exploits the fact that Inkscape allows one to style paths using markers on their nodes, and that any Inkscape object can be converted into a marker, including one containing a colour gradient. The advantage of the method is that it allows you to tweak things after the fact. Its main drawback is that it only works with smooth curves with no sharp turns. But as you can see with my logos, you can do quite a lot even with this limitation.

To really understand this technique, you need to be at least somewhat familiar with Inkscape. But it's quite an intuitive program to use, so this shouldn't be too much of a limitation (and it's Free Software, available on all main platforms, so you have no excuse not to have it on your computer already!). So for now I will leave you with this, and next week I will explain how I extended this method to create the more complex ribbons you can see on the last two logos above. Please look forward to it!

No comments:

Post a Comment