TechnoMono

I’m going to show you how to create a complete web layout using GIMP. This tutorial consists of two parts: The first part covers creating and preparing the graphics for the layout. The second part will go over marking up the layout in XHTML 1.0 Strict and styling with CSS 2.0.

(Click on the thumbnail below to see a live version of the layout)

Part I: Creating the graphics

In this part we’ll create a mock-up of the layout, from which we’ll save the graphics for the template.

The headers

We’ll begin by creating a new image of 800×600 (CTRL+N). Fill the image with #292929 (SHIFT+B for fill tool, or CTRL+, to fill with current foreground color). Create a new layer (Layer > New Layer) called ‘headers’. Make a rectangular selection that spans the top of the image with a height of 140px (the width is not so important).

Fill the selection with a gradient of #0394FD to #0077F8 (L for gradient tool). Make another selection, 28px tall, about an inch away from the selection we just filled; the width isn’t too important. Apply the same gradient as before to this selection, then deselect (CTRL+SHIFT+A). You’ve just made a content box header.

Create a new layer (Layer > New Layer) called ’stripes’ and fill with the Warning pattern (CTRL+SHIFT+P will show the pattern dialog). To apply the pattern, just click and drag it onto the canvas. It is not the color we want, so to change it go Colors > Colorise (GIMP 2.2 users go Tools > Color Tools > Colorise) and set Hue:180, Saturation:0, Lightness:0. Change the layer mode to ‘Overlay’ (drop-down bar at the top of the layers window) then lower the layer opacity to 6 % (top right of the layers window).

Notice the stripes cover the entire image; we don’t want that. Right-click the ‘headers’ layer and choose ‘Alpha to Selection’. Click on the ’stripes’ layer in the layer stack, then invert the selection (CTRL+I or Select > Invert) and press delete (GIMP 2.2 users press CTRL+K).

Now we’ll add the highlight along the top of the headers. Right-click the ‘headers’ layer and choose ‘Alpha to Selection’. Create a new layer called ‘highlights’. Press D then X (to reset and swap current colors) then fill the selection with white (#FFFFFF). Now deselect (CTRL+SHIFT+A). Make a selection along the lower half of the top header and delete like so:

Now do the same for the smaller header:

Now lower the ‘highlight’ layers opacity to 8%. To finish off the headers, we’ll add a border to the bottom of the large header. Create a new layer called ‘headerBorder’. Now we need to draw two lines with the pencil tool. Select the pencil tool (N) and change the brush size to 1px (named ‘Circle (01)’ in the brush list in the tool options directly below the tool box).

Note: If you click once at the start of where you want the line to begin, then press and hold SHIFT+CTRL and click where you want the line to end, GIMP will draw a straight line for you.

Set the color to #2598E6 and draw a line along the bottom of the large header, then draw another line directly below that one but with a color of #0067BE:

This step is optional because we’ll add this through XHTML/CSS, though it will give us an idea of how the layout will look when its done. Create a new layer called ‘contentBG’, then make a rectangular selection directly below the small header, make it the same width and a decent height. Fill it with #3C4040, then deselect (CTRL+SHIFT+A or Select > None). Now select the move tool (M) and press the down key once. You may not have noticed any change but what you’ve done is given a 1px space between the small header and the content background; this gives the header more definition:

The Logo

Now to add the logo. I’ve made a very simple text logo with my site name, though you can use whatever you wish. To make the same as mine, use the text tool (T) and click on the image to add your text. I used Arista font at 38px. Set the color to white. Use the move tool (M) to move the text to the left of the large header, about half way down:

Duplicate the text layer (Layer > Duplicate Layer) then go Layer > Transform > Flip Vertically (this will be the logo’s reflection). Move the duplicate text down with the move tool:

Right-click the duplicate layer (in my case ‘TechnoMono#1′) and choose ‘Add Layer Mask’, this will bring up a little dialog with many options, choose white and click Add. Reset your colors (D then X) and apply a gradient to the reflection:

Lower the layer opacity to about 24% and save your file as ’simplyBlue.xcf’.

OK, we have now completed the first part of the web layout. Next up, the cropping of the layout, after which we’ll cover the XHTML & CSS. Though I won’t go into detail, I will explain what each section does and provide further resources for learning XHTML & CSS.

Preparing the template images

You should have your simplyBlue.xcf file open in GIMP; if you don’t, then open it up.

We shall start with the header background. Make a 20×142 selection on a clear part of the header (not over the logo). This selection needs to start at the end of a dark-blue stripe. You will need to zoom in: Hold CTRL and scroll mouse wheel (GIMP 2.2 users press SHIFT instead).

When you have a selection, go Edit > Copy Visible (this will copy everything visible within the selection). Now we need to paste it to a new image: Go Edit > Paste as > New Image (GIMP 2.2 users go Edit > Paste as New). Go File > Save (CTRL+S) and save as ‘headerBG.jpg’, a dialog will pop up with a message like ‘JPEG can’t handle transparency’, just click Export. This will bring up some options: Set the quality to 95% and expand Advanced Options, make sure ‘Progressive’ is checked then click Save. One image down, two to go

Now for the logo. Make a selection 142px tall and wide enough to encapsulate your logo (the width MUST be a multiple of 10 to line up with the ‘headerBG.jpg’ tile, mine is 280px wide). Make sure to start the selection at the end of a dark-blue stripe, finishing at the end of another dark-blue stripe after your logo (as we did with the header background).

Copy the selection (Edit > Copy Visible) and paste it (Edit > Paste as > New Image) then save it as ‘logo.jpg’ using the same settings as before.

Last one! Zoom in on the small header and make a selection 20×32 like so:

Then copy and paste as previously done, and save it as ’smallHeaderBG.jpg’. Our cropping is now complete. You can now save your work and close GIMP. Next up we code the layout.

Next: SimplyBlue web layout - Part II