Create a Quick and Simple Web Ribbon

Web Ribbon preview

In this web design tutorial you’ll learn how to make a quick and simple web ribbon in Gimp. Ribbons like these are very handy for placing in the top right corner of a website, if you have a site that’s under development it’s really handy to create a ribbon that says “BETA” , or if your site is new the ribbon could say “NEW!”.

If you wonder why it says on the ribbon, it’s because that’s the old name of this website 🙂

Step 1

Create a new image size 400×200 with a white background.

Let’s first make something simple to put that ribbon on so we can better see the end result.
Since it’s quite common to put the ribbons in the top right corner of the website, I thought we could create just the top right corner of a simple website header as a background.

Select the Rectangle Select tool, enable rounded corners and set them to 50.

Rectangle select options

Now make a selection as shown in the image below.

Create a selection like this one

Set your FG color to 03e04c and your BG color to 03d176. Then select the Blend tool, create a gradient from the top of the selection to the bottom of it.

FG color and BG color gradient

That should be good enough for our purpose. Now we have a piece of a header to use as background.

header background

Step 2

Now you need to decide what color you want your ribbon to be.
For an orange ribbon, set your FG color to ff8f0a.
For a blue one, your FG color should be 1a94de, and for a purple ribbon the FG color should be ed29ef.

I chose the blue color.

Create a new layer, then use the Rectangle Select tool to create a selection that’s 300×45.
Rounded corners should be disabled.

Disable rounded corners and create a selection

Fill that selection with the color you chose using the Bucket Fill tool. Hang on to that selection,
we’re going to need it in step 3 and 4.

Selection filled with blue

Step 3

Create a new layer. Shrink your selection by 2 pixels, Select->Shrink.

Shrink selection by 2px

Set your FG color to white (ffffff).
Grab the Blend tool, set the gradient to FG to Transparent and create a gradient from the top of
the selection to the bottom of it.

Gradient from top to bottom of selection

Now reduce the opacity of that layer to 50.

Reduce opacity to 50

Step 4

Merge the two top layers together. (right click on the top one in the Layer Dialog, then choose Merge Down).

Shrink your selection by 1 pixel. Select->Shrink.
Then invert the selection. Select->Invert.
This will make it so that only the borders of the ribbon are affected by what we are to do next.

Invert the selection

Now, go to Filters->Distorts->Ripple.
Set Orientation to Vertical, Period to 5, and Amplitude to 1.

Gimp Ripple options

That should make the edges of the ribbon look like this:

Sawtooth edges on web ribbon

Step 5

Now you can get rid of that selection. Select->None.

Choose your favorite font and add some text. I used FreeSans Bold size 25.

Add text to web ribbon

We’re going to give the text a black outline, go to Filters->Light and Shadow->Drop Shadow.
Set Offset X to 0, Offset Y to 0, and Blur radius to 5.

Dropshadow options

It should look like this now:

TExt with dropshadow on web ribbon

Step 6

In the layer dialog, select the layer we made in step 2, that layer with the blue color.
Give it a Drop Shadow. Filters->Light and Shadow->Drop Shadow.
Set Offset X to 0, Offset Y to 8, and Blur radius to 15.

Add dropshadow to layer

That should produce this result:

Web ribbon with dropshadow

Step 7

I added a white line to the ribbon using the Pencil tool. The line is 2px thick. For some strange reason there is no brush that is 2px thick, so instead I used the smallest brush called Circle (01) and made two lines right next to each other.
Hold Shift to go into line mode, and then hold Ctrl to get straight lines.

Web ribbon with white line

Step 8

Merge together all the layers except the Background layer. Now that we have the ribbon on one layer it will be easy to rotate. Select the Rotate Tool and click on the ribbon, set the angle to 45.

Rotating a web ribbon

Now all that is left is to use the Move tool to move the ribbon in place.

Web Ribbon in corner

For completeness sake, here is the ribbon in different colors. I added an extra line at the top on the orange one.

Web ribbons in different colors

Share this tutorial:
Share on FacebookTweet about this on TwitterPin on PinterestShare on Google+Email this to someone


  1. Muhammad Anas

    August 25th, 2010

    nice tutorial … and very easy too!!!
    Thanks for writing it..
    what’s about increasing the scale to 2 of the brush circle (01) in step no. 7 instead of trying to draw two adjacent lines with it???

  2. A ribbon for everynone | gimpowiec

    February 10th, 2011

    […] Here‘s a quick tutorial on creating web ribbons.They seem nice and tidy. […]

  3. Brad in Burnaby BC

    April 8th, 2011

    A good example for a semi-newbie like myself. You have demonstrated a few basic techniques (drop shadowing, gradient shading, ripple effect, etc.) that are very basic and useful to know. Thank you.

  4. uz101

    July 12th, 2011

    this is a reply to Muhammad. you couldn’t do that bacase it would be a 2×2 instead of a 1×2 wich you wan

  5. Paolo

    December 16th, 2011

    Thanks for this, really. Now I have a kickass ribbon for my site!

  6. Yiannis

    May 11th, 2013

    Thanks! That was easier than customizing some of the free ribbon .psd files on the net 😛

Leave a Reply