Wednesday, January 18, 2012

More on the header image part one: The logo

Right, so the last post about the header image wasn't very informative on a technical level, was it?
It was a personal victory for me and I felt the need to share :-)
Thankfully some of my more critical readers immediately put me back with my two feet on the ground and told me that this was supposed to be a blog with technical information for web developers, not a diary of personal victories. So to make it up: Here's how I created the header image.

I will split this up in two separate posts: one about the logo and one about the title text.
Part one is about the logo.

Like I said in the previous post: The entire thing was created with the GIMP

The logo
Like I said before: I had no prior experience with creating such kind of imagery, so I had to look for some good tutorials myself. The one that I found most helpfull can be found here.

Okay, so obviously you start by creating a new image:

Go to File -> new.
I made mine 150 x 150px


Next we need to create the background.
We start by creating a new layer for it.
In the Layers, Channels, Paths, ...-dialog: click on the "New layer" button


And give your layer a name.
As you can see in the image above, GIMP already creates a layer called "background" for you, but you can just delete that one. We don't want a white background, we want everything that we did not draw to be just transparant.

Next we need to draw our actual background. To do that, we first choose our colour.
In my case the bright green is colour #53DF00.
We pick our colour by first clicking on the 'foreground colour' button

And then we just enter the colour we want in the "HTML notation" textfield:

Now to draw the actual background, we first need to select a rectangle with rounded corners.
In my case, I picked a radius of 20px for the corners.

Select the "Rectangle select tool", check the "Rounded corners" checkbox and set the radius to 20px


Now draw a 150 x 150 px rectangle on your image so that it covers the entire canvas and finally right-click again and select "Edit" -> "Fill with FG color" from the menu.
And: tadaaaaaaaa: we have our background!

Now we will spice it up a little by just making the bottom a tiny bit lighter. This will add to the global shine effect that we're trying to accomplish.
First set your background colour slightly lighter than the foreground colour (in my case: #72FF00)
Then select the gradient tool and click the "Inverse" checkbox (we're going to be drawing from the bottom up)

Now draw the gradient from the bottom to exactly the half of the image (that is: 75px)
You can hold the Ctrl-button to get a straight line (one that snaps to the grid) that makes it easier to get exactly to the middle.
That's it for the background! On to the next layer.
We're now going to create the shine-effect on top. Start by creating a new layer and call it, for example, "Shine".

Now use the rectangle select tool again, with the same rounded corners setting, and select the top-half of the image, leaving a small border. Like this:
Now set your foreground colour to white, and your background colour to the bright green we used as the background (#53DF00) and draw the gradient from top to bottom in the selected area.
The image should now look like this:

Finally, we'll lower the opacity of the "Shine" layer which will soften the white part and hence will improve the shine-effect we're looking for.
You can lower the opacity (or increase the transparency, whichever name you prefer) in the layers dialog. Set the opacity to 75%

That's two layers down, four to go :-)
The next layer will add another shiny effect to our logo, this time it's the one on the bottom.
Start again by creating a new layer and call it for example "Shine 2"

We will use a different technique this time. Start by selecting the pencil tool and pick the "Circle (05)" brush.

Now draw a straight line near the bottom edge of the image (right above where the corners start rounding) and make sure that it is exactly the same width as the shine we drew on the previous layer. Like this:

Hint: hold shift to draw a straight line with the pencil tool

This time we will just blur that line to get the softened 'glossy' effect.
In fact, since this line is the only thing on our layer, we'll just blur the entire layer, which is easier.

From the menu, select Filters -> Blur -> Gaussian Blur and select a blur radius of 8px


The result should end up looking like this

Already not bad huh! :-)
Next we'll be drawing our knife and fork.
Once again start by creating a new layer and name it for example: "Cutlery".
Now this is ridiculously easy. Select the "Rectangle select tool", enable rounded corners (radius = 5) and set your foreground colour to #D8F800.
Select a couple of areas and fill them by right-clicking and selecting "Edit" -> "Fill with FG color" from the menu:


The guidelines can be added by clicking and holding in the ruler and then draging your mouse down.
After the narrow pieces have been drawn, change the radius of the rounded corners to 9 and draw the final two parts:

And that's all there's to it!
Our entire picture now looks like this.

That's already pretty neat. All we need is some finishing touches. We will be adding two kinds of shadow to our image. 
  • A drop shadow around the entire image. This is not the type of drop shadow that you used to see in the late nineties that made some logo look like it was hovering 5cm above your screen :-) but rather just a very narrow constant width shadowline around the image.
  • An inner shadow on the cutlery which will make it look a bit sunken.
Let's start with the easy one: the drop shadow.
Start by drawing a rectangular selection with rounded corners (radius: 20) that extacly covers the entire image (i.e. the green background rectangle). Now go to the "Filters" menu and select "Light and Shadow" --> "Drop shadow..."
A new dialog wil open:

Set both offsets (X and Y) to 0. Because of this we will not have the typical nineties hovering effect.
The blur radius is something you can play with. I set it to 5.
The most important thing to remember here is to deselect the "Allow resizing" checkbox.
If we wouldn't do that, GIMP would resize our image and we don't want that.
Now just click ok and enjoy the result :-)

The drop shadow filter will automatically create a new layer for the generated shadow.

Now on to the final step: the inner shadow.
This requires some trickery :-).
Start by making only the cutlery layer visible. Choose the "Select by color" tool from the toolbox and click on either the fork or the knife. Both should then be selected:

Now from the menu choose "Select" --> "Shrink" and shrink the selection by 1px.
Next: from the menu choose "Select" --> "Feather" and feather the selection over 5px.
Feathering a selection blurs the selection border so that it fades out smoothly.
Next: from the menu choose "Select" --> "Invert".
We're now ready to draw the shadow. First create a new layer and name it for instance "inner shadow". Set your foreground color to some sort of dark grey (I picked #666666) and select "Edit" --> "Fill with FG color" from the menu. Make sure that you do this on the new layer you just created, not on the cutlery layer!
It should now look like this:

You can already see the effect of the shadow, but we have too much grey of course. To remove that you need to do the following:
  • Change the current layer to the cutlery layer
  • Via "Select by color" select the fork and knife
  • Via the menu choose "Select" --> "Invert" (hence selecting everything BUT the fork and knife)
  • Change the current layer to the inner shadow one again
  • Press delete, hence deleting everything on that layer that isn't contained within the fork and knife.
It should now look like this:


And that's it! The logo is finished! Set all layers to visible to see the finished result: