Hari's Corner
Humour, comics, tech, law, software, reviews, essays, articles and HOWTOs intermingled with random philosophy now and thenGIMP tutorial - creating a Kubrick-like website theme
Filed under:
Tutorials and HOWTOs by
Hari
Posted on Mon, Oct 8, 2007 at 13:18 IST (last updated: Sun, May 10, 2009 @ 16:41 IST)
In this series | < Previous | Next > |
Step 1: Get a good header image


Step 2: Round the corners
Choose the menu option Script-Fu -> Decor -> Round Corners....
Step 3: Add a border
Now create a white border around our header graphic. Choose Script-Fu -> Decor-> Add border...
Step 4: Flatten the image
Now your image should look like this (if your border isn't entirely white, fill the non-white regions with white). Flatten the image using the menu option Image -> Flatten image.
Step 5: Create a shaded outer border
Now you need a shaded outer border which will enclose the header, the body and the footer images to use for your theme. Choose the menu option Script-Fu -> Decor -> Round Corners... once again.

Step 6: Cookie-cutting the theme images
From the base image above, you can now cut out suitable images for header, body and footer for the theme to use. Here is an example (select the portion from the base image, use Edit -> Copy visible and paste the results into new files. Remove the inner image clippings from the content background and footer images. Here are the results from the above base image. Header image:


Step 7: Relevant CSS attributes in style sheet
Assuming that theDIV
IDs for header, content body and footer will be header
, content
and footer
respectively. Make sure that you've also set the HTML BODY
background attribute to the exact colour as the background colour used (grey, in this instance).
Here's a sample screenshot of a website with a Kubrick-like web header. Much nicer than a plain header, isn't it?#header { background-image: url('result-header.png'); background-repeat: no-repeat; width: 340px; height: 143px; } #content { background-image: url('result-content.png'); background-repeat: repeat-y; width: 320px; padding: 10px; } #footer { background-image: url('result-footer.png'); background-repeat: no-repeat; width: 340px; height: 45px; }


In this series
- How to touch up and enhance dull photos (GIMP)
- My GIMP video tutorial - creating a website theme
- My first GIMP video tutorial - lighting and bump mapping
- GIMP tutorial - creating a Kubrick-like website theme
- GIMP effect: creating an old photo
Comments closed
The blog owner has closed further commenting on this entry.
13 comment(s)
Comment by Ramshankar (visitor) on Mon, Oct 8, 2007 @ 18:17 IST #
Comment by hari (blog owner) on Mon, Oct 8, 2007 @ 18:30 IST #
Comment by drew (visitor) on Mon, Oct 8, 2007 @ 21:13 IST #
Comment by hari (blog owner) on Mon, Oct 8, 2007 @ 21:19 IST #
Comment by Sudipta Chatterjee (visitor) on Tue, Oct 9, 2007 @ 09:53 IST #
Comment by hari (blog owner) on Tue, Oct 9, 2007 @ 10:19 IST #
Comment by RT Cunningham (visitor) on Wed, Oct 10, 2007 @ 19:43 IST #
Comment by hari (blog owner) on Wed, Oct 10, 2007 @ 19:54 IST #
What I could not figure out how to do was "remove the inner image clippings," as paste to new only gave me one layer.
Do you think you could expand a bit on the directions here?
Thanks.
David.
Comment by Davud (visitor) on Tue, Sep 9, 2008 @ 09:02 IST #
That means, assuming you cut out a part from the main XCF image along *with* the background image rather than hiding the background image before copying the content bit (the thin strip of horizontal line).
Hope that was explanatory. Regards.
Comment by hari (blog owner) on Tue, Sep 9, 2008 @ 13:11 IST #
Comment by mike (visitor) on Sun, May 16, 2010 @ 04:08 IST #
Comment by Hari (blog owner) on Tue, May 18, 2010 @ 20:26 IST #
Comment by hsidhi (visitor) on Mon, Nov 14, 2011 @ 12:53 IST #