GIMP: Simple Web Design

This tutorial takes about 15-20 minutes to finnish. I'm using GIMP 2.6.
This is the final result:




1. Create a new document. I usually start out at a quite large canvas, later on i crop it to fit the work that I've done. Mine is 1024x768 pixels big.

2. Create a new layer, name it "Header".

3. Select the "Rectangle Select Tool" from the "Toolbox" and make a selection at the top of the document. The size of this isn't really important, but if you want to know mine is about 120 pixels high.

4. Select the "Bucket Fill Tool" from the "Toolbox". Click on your foreground colour and in the "HTML notation" text field you type: a0c2de.
Then you press OK and fill your selection with the colour.

5. Now choose the "Text Tool" and write something in your header layer. Make the text white by clicking on the "Color" button in the "Text Tool" settings dialog. The font I use is called "Bitstream Vera Sans Bold".

6. Time to create a new layer. Call it "Menu", make sure it is below your "Header" layer.

7. Select the "Rectangle Select Tool" from the "Toolbox" and create a new selection, you may overlap the "Header" layer since the layer you're working on should be below it. Make the selection around 30-40 pixels high.

8. Now select the "Bucket Fill Tool", set your foreground colour to 76a0c4 and fill your selection.

9. Select the "Text Tool" once again, now it's time to write the options in your menu. Make sure the text color is set to white, then click on your menu box and write your menu options. Mine are "home", "about" and "tutorials".

10. Align your header and menu text by snapping them onto a guide. Create a guide by click and drag from the left (or top) rulers of the document. Drag it about 40 pixels from the left edge. You can see coordinates in the bottom-left corner of the document window.

11. Create a new layer, name it "Side bars". Drag it below the header and menu layers. Select the "Rectangle Select Tool" and make a small selection somewhere in your canvas.

12. Look in the settings dialog for the "Rectangle Select Tool". Fill in 0 in both of the position fields. In the size, type 20 and 768.

13. Fill the layer with the same color as the menu.

14. Now do steps 12 and 13 again but this time the position of the rectangle should be 800 and 0.

15. Select the crop tool and crop your image by the edges of the "Sidebar" layer. Being careful and accurate is good in this step.

15. Your document should look something like this by now:

16. This step is very simple, use the "Text Tool" and write your own welcome greeting and first paragraph.

17. Create a new layer and call it "Content bar". Create a rectangle, choose your own width, mine is quite thin. In your document window, click "Select"->"Border" and apply a 3 pixels wide border. Fill it with the same colour used in the menu and the "Sidebar" layer.

18. Now you are basically done. Here is what mine looked like after some tweaking of the "Content bar" layer. I hoped you enjoyed the tutorial.