GIMP Graphical Content Divider

In this reference we’ll take a look at creating a nice content divider for a web page that repeats horizontally. I don’t know the exact term for an effect like this but “Graphical Content Divider” will suffice. The end product can be seen below:

GIMP Divider Finished Example

First of all we need to know what colours we are going to use. The footer colour for this example is #2a2a2a. Create a new image (200×30) with the background colour set to 2a2a2a. As we are working with a small image you will probably want to zoom in by around 300%.

Once your new image has opened, with the background set to 2a2a2a, create a new layer. Now we are going to use the paths tool (B) to create the jagged lines. Take note that as we want the image to repeat horizontally you need to start the pen tool at the same height as your going to finish. In this reference we’ll start at 15px high and end at 15px high.

With the path tool dot the path like the image below:

GIMP: Path Tool Selections

Once finished press SHIFT-V to select the area. Now fill the area using the Bucket Fill Tool with the content colour (f8f8f8) and then duplicate the layer (SHIFT-CTRL-D).

Once the layer has been duplicated press CTRL-SHIFT-A to deselect the selection. Now go to Colours > Colour Tool set the Lightness to -100 and click OK. Go to Filters > Blur > Gaussian Blur, set everything to 10.0 and click OK. Press CTRL-L to bring up the layers menu and place the top layer in the middle.

GIMP Divide 03

Now you have a simple content divider that can be repeated horizontally. I’ve seen this technique come up quite a bit recently and though I would share.

You will most likely want to play around with the paths you create making them more or less jagged. You may also want to move the shadow layer down slightly. Just have some practice until you get the perfect divider.