Monday, January 23, 2012

More on the header image part two: The title

Hi all,
and welcome back to part two of the step-by-step guide to how I created the header image for the site. In the previous post we created the logo.
Now we will create the title text and we'll combine both the logo and the text into one final image which will be the header image for the site.

The title

Start by creating a new image and make it 450px x 150px large.
Next, delete the default background layer and then create a new one. Name it "main text".
The font I chose for the text is "Ubuntu-title". Choose the text tool from the toolbox. Set the font to Ubuntu-title, set the size to 130 px and set the color to #BFEE00:

 

Now just click on the image and type "moambe".
Then adjust the location of the text so that it is aproximately in the middle of the canvas:
 

The next step is adding the dark green border around the text.
We start by selecting the entire text. You can do that easily with the "Select by Color" tool.
Now choose "Select" --> "Grow" from the menu and grow the selection by 3px.
It should now look like this:


 
Next, create a new layer and name it "Border". Make sure that it is lower in the layer stack than the "main text" layer. otherwise the border layer will hide the main text layer.
Now just set the foreground colour to #53DF00 and choose "Edit" --> "Fill with FG Color" from the menu to fill the entire selection. The result should be this:

 
Now we will add the glassy effect to the letters. Start by selecting the text with the "Select by Color" tool again. Next pick the "Ellipse select tool" from the toolbox and set the select mode to "Subtract"

 
Draw the elliptical selection so that the upper half of the ellipse crosses the text.
Like this:

Now create a new layer and name it "Glassy effect". This time, make sure that it is at the top of the layer stack. Set its opacity to 30%. Set your foreground colour to white (#FFFFFF) and select "Edit" --> "Fill with FG Color" from the menu. The selection will be filled in white, but will be 70% transparant, since our layer is only 30% opaque. This creates our desired glassy effect:



As a finishing touch, we will also add some drop shadow. You should know how to do this by now :-)
The end result looks like this:


Putting it all together

Now all that's left is adding both the logo and the title together in one image. That will then be the header of the site.
This is the easiest part of it all: just create an image of 600 px x 150 px and copy-paste both the logo and the title in it:


TADAAAAA!!!