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 Gtuts.com 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.

Now make a selection as shown in the image below.

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.

That should be good enough for our purpose. Now we have a piece of a header to use as 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.

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.

Step 3

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

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.

Now reduce the opacity of that layer 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.

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

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

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.

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.

It should look like this now:

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.

That should produce this result:

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.

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.

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

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