Choosing the right layout
Many web template you can choose but in this tutorial i would prefer the usual and common web layout and this must have a header, navigation area, content area and a footer that you’ll find with all web layouts. With CSS design, you have to remember that you can be as creative as you want as long as you think about how the design will be implemented as a webpage as you go along in your design.
Below is a screenshot of the layout that we will be using. To comply with the standard in web layout As you can see, it consist of a header, content, and a footer.

1. Surveying Your Layout


2. Slicing the area

Since Gimp has no slicing tool by default we will use the alternative tool the CROP TOOL or shift+c for shorcut. Now we will slice the image area by area just follow the image below.



* press the Crop Tool then drag it to the guide portion and it will automatically snap to the ruler then press enter or just click it.
* Just apply this procedure to the remaining images below.


* After you crop the photo save it as logo.jpg


*save as banner.jpg


* save as content-bg.jpg
* Since the content-bg.jpg has the same texture form top to bottom we have to repeat this image as I mentioned earlier for the efficiency of the layout.
* For more efficiency I recommend you to cut this image up to 1px of height. I cut this image approximately more or less 25px for tutorial purposes.

* save as footer.jpg
* Since the bottom part of the main content is not the same with the texture content-bg.jpg we have to slice it separately.

* save as menu-left.jpg

* save as menu-middle.jpg
* Same as content-bg.jpg we also have to repeat this.

* save as menu-right.jpg

- now were all done! for importing this sliced images to html please read my next blog post. Click here