Part 1/4: Design and Code a site with Gimp, HTML and CSS

Many beginner web designers have trouble designing sites and then coding them properly and end up turning to tables and Dreamweaver. In this tutorial I will show you how to design a site in The Gimp and then code it in valid XHTML and CSS with divs and classes (not tables).

This is part one of a four part series on this subject, this part will be focusing on the design in The Gimp, part 2, 3 and 4 will be dedicated to coding it ready for the web. So keep coming back in the next couple of weeks or subscribe to our RSS feed.

So here we go:

-

Step 1

Create a new image in The Gimp, make it 960px (width) by 900px (height) and fill it with dark gray (333333)

-

Step 2

Now create a new layer 900px wide and call it page, fill it with white (FFFFFF). Use the arrow keys to move it into the center of the image like this:

-

Step 3

Go to Filters -> Light and Shadow -> Drop Shadow and set the Offset X and Offset Y to 0 and unclick Allow resizing, then click OK. This will add a shadow to the page area.

-

Step 4

Create a new layer called Header and make it 900px width and 150px height, move it into place like this:

-

Step 5

Set the foreground colour to 205974 and the background colour to 84a3e3 and select the Blend tool. Click and drag from the bottom of the layer to the top to create this effect:

-

Step 6

Select the select tool and click and drag a rectangle of height 5px at the top of the layer and fill it with the foreground colour.

-

Step 7

Now duplicate the layer and press Delete to empty the layer of its contents, this will save you time as you don’t need to create a new layer and position it. With the select tool, click and drag across the layer making a rectangle 100% width and 1px height and fill it with black (000000) and exactly below it do the same, this time filling it with white. Then change the opacity of the layer to 10.0. This will produce this effect (if you have difficulty understanding this, then check out my tutorial on this here:

-

Step 8

Duplicate the page layer and delete its contents, then using the select tool draw a rectangle down the right hand side of the page area with a width of 320px. Fill it with 84a3e3 and change the opacity of the layer to 15.0, this will produce this:

-

Step 9

Now create a new layer with a width of 900px and a height of 100px and call it footer, place it at the bottom of the design like this and fill it with 205974:

-

Step 10

Go to the top and click the Text tool. Click under the engraved area and add the menu items you would like, change the font to Arial Bold size 14 with colour white (FFFFFF) and move the layer so that it looks like this:

-

Step 11

Duplicate the top header layer and delete its contents, now under the engraved lines draw a rectangle and fill it with white (FFFFFF) and change the opacity to 10, this will create this effect:

-

Step 12

Finally, add you logo by using the Open As Layers option on the File menu and place it at the top left of the header area like this:

-

And that’s it for this part, we have created a simple layout which we will slice in the next part of this tutorial and make it ready for coding. There are much better designs that you can do in The Gimp but I just want to show you the basics in this series. As I said at the top, keep coming back or subscribe to our feed to be notified when the new parts are up.

View Part 2