Monthly Archives

December 2010

An example of a web 2.0 pinwheel gradient

HOWTO: Web 2.0 Pinwheel Background Effect made in GIMP

You’ve seen these effects before on peoples websites in the background. I myself wanted to create a large image for this site that I am setting up in a few weeks. We’ll start with creating the gradient, laying it down, applying the correct filters, the final result, as well as some conjecture on making the process more interesting, easier or possibly advancing it.

I wanted to create a particularly large image for this example, so I made a new image with decently size proportions (in this case: 1600×1200 – your own mileage while you create your first test one should probably be smaller)

Create a New Image in GIMP
Creating a new 1600x1200 image in GIMP

Next I created a new gradient by going to the Layers/Channels/Paths/ window, going down to the Brushes / Patterns / Gradients section at the bottom and selecting “New Gradient”.

Create a New Gradient in GIMP
Selecting a New Gradient in GIMP

We now have the Gradient Editor display. We can title the gradient, we can manipulate the gradient by creating & diving sections, we can see what the result will be, zoom-in, zoom-out and save.

GIMP Gradient Editor
A fresh new gradient inside the GIMP gradient editor

The basic original gradient is split up into one Segment which has a left “section” and a “right” section.

When just working with two colors, I set my foreground and background colors in the color tools area as the two respective colors I will be using in my gradient.

Since I want more out of my Gradient than a natual 1 part gradient, we will need to use the “Split Segment at Midpoint” action. Most of the actions inside GIMPs Gradient Editor (and very powerful ones at that) are all accessible by right clicking on the area you want to manipulate.

I begin by right-clicking on the left part of the 2-part segement underneath the gradient, where you can see the white delimiter triangle and its two accompanying black division triangles. Then I select “Split Segment at Midpoint”.

Splitting Segment at Midpoint in GIMP
Selecting the Split Segment at Midpoint option in the GIMP Gradient Editor

We now should have something that looks like the following image, where the gradient now effectively has two segments. A left segment and a right segment (both of which each have a left point and a right point).

A GIMP Gradient with 2 Segments
Inside the GIMP Gradient Editor with a gradient that has 2 Segments

Feel Free to Move the White and Black Triangle Segment Pieces in this Example to Match mine or to create your own original Look

Now that we have our doublly segmented gradient, lets start on changing the colors on the first segment (the left one) by clicking ON that segment, as you can see I am on this next image.

Selecting a GIMP Gradient's Section
Selecting the First (Left) Segment on this GIMP Gradient

You’ll remember that I had chosen my gradient’s two colors ahead of time and setting them as the Foreground and Background colors. So my colors look like this:

Foreground and Background Colors picked in GIMP
I am using an annoying Red and a Depressingly Sick Blue as my Foreground and Background colors respectively for my pinwheel.

So now lets right-click again on the left segment and select “Left Color Type” and choose “Foreground Color”

Then right-click on the left segment once more and select “Right Color Type” and choose “Background Color”.

We’ll do the right (second) segment next but your gradient should now look like the following:

Left Segment in GIMP Gradient has Colors Set
I set the first segment to have its left color be red, and its right color be blue. The right segment stays the same.

To complete setting the colors, we have now clicked (chosen) the second (or right segment) of the gradient and likewise right-clicked to set the Left point as the Background (blue) color and the Right point as the Foreground (red) color.

GIMP Gradient with 2 Segments has both Colors set
The gradient's 2 segments now have their respective end-point colors set.

This makes sure our gradient’s colors have a good flow when they are repeated later in this tutorial. However, I don’t want my pinwheel to have such a soft edge between colors. So we’re going to create a third YES A THIRD segment that will go in the middle of the gradient. So we go ahead and right-click to “Split Segment at Middle Point” again.

GIMP Gradient in Gradient Editor with 3 Segments
Our gradient now has 3 total segment for further manipulation on the gradient's look.

To give the gradient a “harder edge” I begin to move the white and dark triangle segments closer together.

3 Segment Gradient in GIMP with Harder Edged Gradients
The segment pieces in the middle have been moved closer together for a harder look.

Now I am going to go a little more extreme and give blue the most amount of space and take away most of the gradient. After that we’ll be done and can save our new gradient.

A 3-part Segmented Gradient in GIMP is Finished and to be Saved
We are now have the finished three part gradient with two colors and a hard look.

If I were you, I would leave both sides a little more equal, and even allow one segment to have a softer edge/look.

We will now select our fresh spanking new gradient and choose the “Sawtooth wave” repeat option.

Choosing the new custom-made GIMP Gradient

Now lets apply the Gradient to our image by starting at X-coordinate 0 and holding down the Ctrl key so that our gradient line is straight.

Selecting the Area to Lay down the New GIMP Gradient
I've selected just a small portion as I want to the effect to re-peat many times

We should end up with something looking similar to the following:

Newly Minted Background with new Gradient

Then to initiate the Pinwheel Effect we make use of the Polar Coordinates filter.

Polar Coordinates Filter in GIMP

We now have the final product.

Web 2.0 Pinwheel Background
A couple layers of transparent gradient lines later and Voila!

Lastly, I’d like to make mention of a couple different things. First that giving an even harder edge to one side and a slightly (but not so much more) softer gradient look to another when creating your gradient will help give you that look you are seeking. As well increasing/decreasing the size of gradient area or introducing an extremely sharp third color to act as a semi-border between the two major colors.

Another idea would be to make use of the “Transparent” option in the Gradient Editor and using a flat color background in the back.

Either way, enjoy!

Here’s an example of a soft gradient that has more of an equal space for the two color and I’ve overlayed the light color-transparency gradient to run through the middle and the darker color->transparency to run through the top and bottom creating the effect we all know and love.
An example of a web 2.0 pinwheel gradient