1. Create a new image (ctr + n) with a 600×90 pixel and set a rectangular guide using the ruler. Just drag the ruler guide in the top and left portion of the canvas.

2. Then we will create a rounded rectangular with a gradient color. Using the ‘Rectangular Select Tool’ (R) with a 12px of rounded corners, drag it to your ruler guide.

3. Select ‘Blend Tool’ (L) for our gradient, before that set your foreground color to #7b7b7b and #c1c1c1 as your background color. After you select the blend tool set your ‘gradients’ to FG to BG then drag it to your ruler guide from top to bottom be sure you drag it to the selection area of ‘Rectangular Select Tool’.

4. The first gradient will serve as border, now we will create another gradient for the main texture of menu bar, create a new layer (ctr+shift+n) and add another ruler guide about 2px from the edge of the first gradient as you see the image below.

5. Same as step 3 we will create another gradient using the same color but we will reverse the pattern of gradient, the first gradient start at the top and now we will drag it from the bottom.

And now we’re done in menu bar.

6 . And lastly the menu separator creating a nice effect in menu.

a. Create a new image with a 1x50px. Select ‘Blend Tool’ (L) > ‘Gradient’ > ‘Open the gradient selection dialog’. Or simply press the rightmost button.

b. In the gradients dialog create new gradient then right click to it and select ‘Edit Gradient…’

c. After you create the new gradient right click in the gradient editor and select ‘Split Segment at Midpoint’.

d. And it should be look like this, the black arrow is the end point color and we will edit it by selecting each black arrow same as the gradient color of menu bar.

e. To edit the color just right click and select ‘Left or Right Endpoint’s Color’ . We set the color midpoint to white(#ffffff) this will create a gradient effect in menu bar.

f. In your 1×50 px canvas you can already use this gradient then paste it to your menu bar then duplicate it as many as you want… and then you have it!!!!

Note: the image above is for demo only and not the actual 1×50 pixel of image.

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