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

Welcome to the much anticipated part two. My thanks go to everyone who has been spurring me to hurry up and write part 2, so here it is.

In part two of this 4 part series, I will be showing you how to slice the design ready for coding. This is the process whereby we basically cut each element into separate images ready to code into the site.

Continues below...




-

Step 1

Open the result of part 1’s tutorial (link). Create a new folder on your computer and inside this folder add another folder called images.

-

Step 2

Go back to the image and open the Layers dialog, un select the eye next to the logo layer, the menu hover layer and the navigation text layer so that the image now looks like this:

-

Step 3

Now using the select tool click and drag from the very top left corner to the right just above the engraved line, the selected region should be 960px x 108px (look at the bottom of the window by the 100% button whilst dragging to see the selected dimensions)

-

Step 4

Go to the Edit menu and select Copy Visible. Go back to the Edit menu and this time select Paste As and then New Image. This will open a new image of the copied region. Save this image as header.png in the images folder you created earlier.

-

Step 5

Go back to the canvas, if the region is no longer selected then press Ctrl and Z until it is selected. If you hover over near the top of the selected area you will notice that this appears:

-

Step 6

Click and drag this top bar area down over the bottom of the selected area all of the way to the bottom of the header area on the image so that the selection now looks like this, the selected region should be 960px x 42px:

-

Step 7

Now as before Copy the Visible region and paste it as a new image, this time saving it as menulinks.png

-

Step 8

Now go to the Layer dialog and reselect the menuhover layer and go back to the canvas. The area for the menulinks should still be selected, now this time, grab the handle of the right of the selected area and position somewhere inside the menuhover area, do the same to the left handle so that the selection looks something like this:

-

Step 9

Copy the selected area and paste as a new image calling it menuhover.png

-

Step 10

Now select from the left of the image to the right of the image anywhere in the middle section like this:

-

Step 11

Copy the visible area and paste as a new image. Save it to the images folder calling it page.png

-

Step 12

Scroll down to the footer area and select the footer region, it should be 128 100 pixels high. And then, guess what? Yep, you’re right, copy the visible area and paste as a new image and call it footer.png

-

Step 13

Finally, click the eye next to the logo layer and select from the top left of the image to the bottom right of the logo, copy the visible area and paste as a new image calling it logo.png

-

Result

You should now have a folder with a folder called images inside. The images folder should contain header.png, menulinks.png, menuhover.png, page.png, footer.png and logo.png. You can download the .zip file with the cut images and the original XCF file here.

In part 3, I will show you how to start coding the template into valid XHTML and CSS.

-

View Part 3