Creating a Web 2.0 logo in GIMP

Instead of working today, I decided to revamp the iChurch logo using the GIMP. It came out alright so I decided to create a short tutorial on how I did it. That didn't work so I made a really long one.

Here's what it looked like originally:



and here's the final product:

Setting up the text path

First start with a same size as the original image. I use the FreeType filter (found under Filters>Text>FreeType...) rather than the standard Text tool. The FreeType filter gives you much more control over the spacing and size of your text.

Firstly, we'll create the word "Church". I used Verdana for its clean look, and moved the letter spacing to -160 in order to bring the letters closer together. Spacing can make a world of difference. Play around to get what you need.



Make sure that you tick the "Create Bezier Outline" checkbox so that we can use the selection over and over.

Click OK and you'll see the newly created path (if you can't see it, go to the Paths tab on the Layer, Channels & Paths dock and make it visible.)

Filling the church

Create a new layer (Layer > New Layer ... ).



Create a selection from the path.



Select the gradient tool and choose a dark colour and a light colour. I chose dark blue to light blue. Create a linear gradient from top to bottom, with the lighter colour at the bottom.



Next, we'll create an inner shadow. First create a new layer. Select the PaintBrush tool and choose the Circle Fuzzy (03) brush. Choose black as the foreground colour.

Making sure that you still have the selection, go to the paths tab on the Layers, Channels and Paths dock and right-click on the Church path. Select Stroke Path from the menu.

Choose "Stoke path with a paint tool" and make sure that the PaintBrush is selected.



The result should look like this:



Now, add a new layer and get the selection from the path again. Create a white-to-transparent linear gradient from the bottom of the text that just covers the lighter blue shade.



Set the Mode on the new layer to Overlay and move it below the Inner shadow layer.

Bringing in the bling

Now we'll add the token glass finish that everyone loves so much. First select the Paths tool from the toolbox:



Create yourself a wavey path over the text by clicking and dragging the Path tool. Make sure that you leave space above the text. When you're done, hold CTRL and click on the first point to close the path.



Now comes the super sneaky bit. In the Path tab of the Layers, Channels and Paths dialog, select the first text path and create a selection from it (right-click and select Path to Selection. Then right-click the new wavey path and select Intersect with Selection.



It should look like this:



Create a new layer and select a White-to-transparent linear gradient. Apply the gradient to the selection with the white at the top. Make sure that you end the gradient a fair distance below the selection so that the edge of the selection is sharp. Set the Opacity of the layer to 75%.



Create another layer and create another White-to-transparent gradient inside the selection. This time end the gradient a third of the way down the selection.



Deselect everything (Select > None) and create yet another layer. Select the dark blue colour again and go to the Paths dialog. Right-click the 'Church' path and choose Stroke Path....

In the Stroke Path dialog, choose Stroke Line, 1.0 px and Solid.





Using the same technique I created the 'i' in red. I used orange for the lighter part of the red gradient because a lighter reddish pink looks far less vibrant.

Finishing touches

Soft shadow

Hide the white background layer by clicking the eye in the Layer dialog. Select Copy Visible from the Edit menu, and then Paste (also in the Edit).



In the Layers dialog, there'll be a new layer called 'Floating Selection'. Right-click on it and select new Layer. (This creates the pasted layer as a new layer. If you select Anchor Layer, it pastes the copied layer into the current layer. This frustrated me to no end when I started using GIMP).


Go to Script-Fu > Shadow > Drop-shadow. Set the Blur radius to 9 and the Opacity to 37. Click OK and wait for your shadow to be cast.



If you want, you can select the Move tool and move the shadow layer around until you are happy with how it looks. You can also adjust the Opacity of the shadow by adjusting the layer's Opacity.

Reflection

Select the Layer that you pasted to create the soft shadow from. Flip it vertically by going to Layer > Transform > Flip Vertically.



Select the Move tool and move the layer to a couple of pixels below the original text.



Right-click on the layer and select "Add Layer Mask...".



Choose the default "White (full opacity)" option when asked what you want to initialize the mask to. Right-click on the Layer and select "Show Layer Mask". Make sure that "Edit Layer Mask" is still selected.

Select the gradient tool and make a White-to-Black linear gradient over the layer mask with the white at the top.



Right-click the layer and unselect "Show Layer Mask" and "Edit Layer Mask"

And that's it.