Website theme and Gimp tutorial

I finished modifying the slash theme for this website. The default is blue, but registered users can change it:

Here are some close-ups of my new logos:

Keep reading to see the procedure I used to make them. It's scary.

I wanted to base the logo on the Gallery2 watermark I made last year, but I had to learn Gimp all over again to do it. Therefore, this procedure is as much for myself as anyone else.

Note: This guide was written using Gimp 2.4.
Note: The images have four main parts: the color blend, the texture, the shadow, and the background color.

1) Reset all windows to default using File -> Dialogs -> Create New Dock -> Layers, Channels & Paths.
Note: You should repeat step 1 any time you accidentally close something you need. You really need the "Layers, Channels & Paths" window. I've mentioned the most important operations, but you may need to change some visibility/layer positions on your own, so here's how: Change the layer order by clicking on a layer and dragging it higher or lower. Higher layers cover lower layers. Click on the left icon for each layer to temporarily show/hide that layer.

2) Create a new 180x57 image.
3) Make the white background transparent (Layer -> Transparency-> Color to Alpha)
4) Use the text tool to insert white text using size 46? Verdana bold. In this case, "dwm.cc"
5) Make sure the text has sufficient room around it for a shadow.

6) Create a new transparent layer called "texture" and use the "Bucket Fill Tool" to "Pattern fill" the "One Small Step" pattern.
7) Create a new mask for the texture (Layer -> Mask -> Add Layer Mask). Choose Black with full transparency.
8) Click on the text layer and choose "Copy" from the Edit menu
9) Click on the texture layer and choose "Paste" from the Edit menu
10) Zoom in and use the Move tool to move the pasted text over the original white text. Don't worry if the white text hides the textured text.
Note: If the text does not look textured, then make sure you selected the texture layer before pasting from step 9. You may also want to move the white text layer down in the layer queue a bit so that it doesn't cover everything. You want it to remain visible because you'll be lining everything up on top of it.
11) Choose Anchor Layer from the Layer menu.

Note: You should now have a layer displaying textured text. The next steps will create a partially transparent layer with color-blended text.

12) Create a new transparent layer called "Color Blend".
13) Click on the "Blend Fill" tool and choose a foreground color that matches the theme you're aiming for. The background color should be white. The mode should be "Normal" and you should leave the default gradient, but click "reverse" so that the color is on the right and the white is on the left. Change the shape to "Radial".
14) Click on the "Color Blend" layer where you want it to appear the whitest and drag to the farthest edge of the picture. In this case you'd click on the right border of the "w" and drag to the middle of the right edge of the picture (a horizontal line). This is not the center of the picture because it looks better when the white is between the "w" and "m".
Note: The color blend will completely hide the rest of the picture. This is normal. Just make sure to remember the areas you clicked so that you can do it again (doesn't have to be exact). If the white text layer is still on top, then you can use that as a visual reference.
15) Create a new mask for the Color Blend layer (Layer -> Mask -> Add Layer Mask). Choose White with full opacity.
16) Repeat step 14 using the same settings. This will cause the white area to appear the "thickest", and the colored edges to be the most transparent.
17) Right click on the layer and select "Apply Layer Mask" (or Layer -> Mask -> Apply Layer Mask). This allows us to do the next step.
18) Create a new mask for the Color Blend layer (Layer -> Mask -> Add Layer Mask). Choose Black with full transparency.

Note: Steps 19-22 are similar to steps 8-11.

19) Click on the text layer and choose "Copy" from the Edit menu
20) Click on the Color Blend layer and choose "Paste" from the Edit menu
21) Zoom in and use the Move tool to move the pasted text over the original white text. Don't worry if the white text hides the blended text.
Note: You should see the textured text under this if it isn't hidden by the white text. You can hide the white text layer if it is in your way. If this isn't the case, then make sure you pasted it after you selected the Color Blend layer.
22) Choose Anchor Layer from the Layer menu.

Note: The next steps involve creating a shadow. This is complicated because the default tools do not create dark enough shadows for what I wanted, so additional work is needed.

23) Select the text layer and change the text color to black.
Note: Hide the other layers for now because they'll just be in the way.

24) "copy" the text layer
25) Create a new layer called "Shadow"
26) With the shadow layer selected, "paste" the content from step 24.
27) Line the text up so that it overlaps the text from the text layer (using the Move Tool).
28) Choose Anchor Layer from the Layer menu.

29) Still with the Shadow layer selected, "paste" the content from step 24 again.
30) Manually position the text so that it is down and to the right 3 pixels. (I hope you are doing all of this zoomed in)
31) Choose Anchor Layer from the Layer menu.

32) Duplicate the Shadow layer (Layer -> Duplicate Layer). This is automatically called the "Shadow copy" layer.

33) Select the original Shadow layer and apply a Gaussian blur (Filters -> Blur -> Gaussian Blur) with the following settings: Horizontal 15, Vertical 15, RLE
Note: This is a nice shadow, but it destroys most of the original drop shadow. Hide everything else and you'll see what I mean. We will now overlap the original drop shadow and do another Gaussian blur with tighter blur settings.

34) Select the "Shadow Copy" layer and choose "Copy" from the Edit menu.
35) Select the original Shadow layer that was just blurred in step 33, and choose "Paste" from the Edit menu.
36) Choose Anchor Layer from the Layer menu.

37) Select the original Shadow layer and apply another Gaussian blur (Filters -> Blur -> Gaussian Blur) with the following settings: Horizontal 5, Vertical 5, RLE
Note: This preserves the area shadow from step 33 while adding a new localized drop shadow that is dark enough to do what we want.

38) Make sure that the Shadow layer is under the texture layer, and that the texture layer is below the Color Blend layer. Hide all the other layers.

39) Save the file as an xcf and a png.

Note: IE does not handle transparent png images well (or anything for that matter), so additional work is needed.

40) Open the png file and add a new transparent layer. Make sure this is on the bottom. The only other layer should be the image from step 39 because png files do not have layers.

41) use the Bucket Fill Tool to fill in the bottom layer that you just made from step 40 (make sure it is selected so that you're filling in the right one). The color should be based on the theme you're trying to match.

Note: The Color Blend isn't very exciting, so some additional work is needed.

42) Select the top layer containing the image from step 39 and select the "Curves" utility from the Color menu.
Note: If the Curves utility starts changing the background color instead of the text color, make sure you selected the correct layer.

43) Adjust the color curves so that the image looks nice for the desired theme.
Note: I pretty much saturated the blue for the blue theme. For the red theme, I enhanced the red, left the green, and lowered the blue to create an orange effect. The green theme was a bit harder because it was really a blue-green (#006666) which takes on too much blue when it's made lighter. I had to play with it some. Basically I dropped the red a little and carefully raised the green. The human eye sees green the easiest, so I had to be careful not to saturate the texture from steps 6-11 (now merged). I think everything turned out well enough. Here they are again: