Ken Mitchell

Introduction

In this HowTo I will explain how to create website templates in Gimp that can be easily colored by adding a color layer and using the “Addition” blend mode. This is helpful when you want multiple color schemes for the template.

Theory

A little background as to how this is going to work. I will be referring to colors with their RGB values. For instance, the color #0066AA. #0066AA is actually 3 hexadecimal numbers together representing the values of Red, Green, and Blue respectively. Further detail would escape the scope of this HowTo.

Gimp has a blend mode known as “Addition”. What that means is that if a layer is set to “Addition” blend mode, it will add the value of the pixel on that layer to the value of the pixels beneath that layer. So to demonstrate:
#0066AA + #555555 = #55AAFF.
Note: Values can’t be higher than FF, which means I couldn’t use #666666 here because then the Blue value would be higher than FF.

So in essence, if you took a gradient tool to the bottom layer and faded from #000000 (black) to #555555, then made another layer above and filled it with #0066AA and set the blend mode to addition, the resulting image would be a gradient from #0066AA to #55AAFF.

Step 1 - Setup

Open a new canvas the size of your emblem or icon. Mine is 300×300. Make sure that your background color is black and open the color dialog by double-clicking on the foreground color. This is where you will set the difference in the colors. I used #555555. Remember that this will not represent the resulting color, but the difference in colors that you use in the end. Create a new transparent layer and name it “Shape”.

Step 2 - Create the shape

Select all by Select>All or by hitting Ctrl+A. Now go to Select>Rounded Rectangle and set it to “40%” then hit “OK”. With the gradient tool, drag from the bottom left corner to the top right. Make sure the “Shape” is set to “Linear”.

Now shrink the selection by 5 pixels (Select>Shrink) and drag the same gradient from the top right to bottom left corner. Shrink the selection again by 7 pixels and drag the gradient from the bottom left corner to the top right.

Select none (Select>None or Ctrl+Shift+A) and you should have something like this.

Step 3 - Add a letter

Create another new transparent layer and name it “letter”. Grab your text tool and favorite font and put a white letter in the center of the emblem. I used “Beware” which is a neat fat font. Merge the text layer down on “letter”. Right click the “letter” layer and select “Alpha to Selection”. Then invert the selection (Select>Invert). Add a drop shadow by going Script-Fu>Shadow>Drop Shadow. I put the Offsets to 3 and the “Blur Radius” to 5. The color should be “Black” and opacity “80″. Uncheck “Allow Resizing”. Select none again and set the blend mode of the “letter” layer to “Overlay”.

Step 4 - Color the Emblem

Create a new transparent layer between “letter” and “shape” named “color”. On that layer, fill it with whatever color you wish. Set the blend mode to “Addition”.

Now your finished. I realize the image is quite primitive here, but the idea can be used to far greater extent. Imagine building an entire website using this method. You could easily go from one color to the next. Experiment with it. Show me what you can come up with.

This entry was posted on Tuesday, October 2nd, 2007 at 12:17 pm and is filed under Gimp, HowTo.You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.