Mon, 8 Oct 2007

GIMP tutorial - creating a Kubrick-like website theme

Filed under: Tutorials and HOWTOs by Hari
Posted at 13:18 IST (last updated: Sun, 10 May 2009 @ 16:41 IST)
In this series < Previous Next >
Kubrick is the default theme used by WordPress and it's a quite popular theme to build upon, but the plain blue header image used is quite unattractive. Here I'll show you how easily you can create web headers which look like Kubrick but with header graphics of your own choosing. All you need is to choose a decent image to use as a header and you can prepare it in GIMP to use with your style sheets. A good header looks extremely attractive in a curved, fixed width theme and here's how you can get the images you need to create your style sheet.

Step 1: Get a good header image

Screen 1

Open a good header graphic you want to use in GIMP. I've chosen a simple blend effect as a background image, but you can use cross-sections of good photos or any other background image which you think fits in well with your theme.

Click on a page number to continue the tutorial. :)

Step 2: Round the corners

Choose the menu option Script-Fu -> Decor -> Round Corners....

Screen 2 Disable Add drop shadow and Work on copy. Choose the radius as 10. If you prefer you can experiment with this value to get the effect you want.

Step 3: Add a border

Now create a white border around our header graphic. Choose Script-Fu -> Decor-> Add border...

Screen 3 Make sure the border colour is white and ensure that the border width is slightly higher than the round radius value you chose earlier. This will allow you to "cookie-cut" the theme images from the base image we're creating.

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.

Screen 4 Your image should now appear like the one shown in the screenshot above.

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.

Screen 5 Let the shadow offset for x and y be 0 and choose a blur radius of 8 (you can experiment with this value to get different results). Adjust the background colour to whatever you want for your body background before you apply this script. Your image should now look like the one in the screenshot below.

Screen 6

Fantastic, you now have the base image from which you can "cut out" your theme.

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:
Header image

Content background image:
Content background image

Footer image:
Footer background image

That's all.

Step 7: Relevant CSS attributes in style sheet

Assuming that the DIV 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).

#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;
}

Here's a sample screenshot of a website with a Kubrick-like web header. Much nicer than a plain header, isn't it? ;)

Sample screenshot

You should, of course, customize the above CSS code to ensure best results. Your theme is now ready to use.

In this series

13 comment(s)

Leave a comment »
  1. Great tutorial. Now make one for Photoshop.

    Comment by Ramshankar (visitor) on Mon, 8 Oct 2007 @ 18:17 IST #
  2. You're better at Photoshop, so you do it. ;) Besides I don't have it installed, as you very well know.

    Comment by hari (blog owner) on Mon, 8 Oct 2007 @ 18:30 IST #
  3. No need for photoshop when gimp is just as good. I coverted several years ago, don't miss photoshop at all. :)

    Comment by drew (visitor) on Mon, 8 Oct 2007 @ 21:13 IST #
  4. Well, I must admit that there are some very cool effects in Photoshop which are difficult to achieve with GIMP, but in general, I find GIMP to be much more user-friendly. Photoshop's interface can be intimidating for newbies. It's a power tool.

    Comment by hari (blog owner) on Mon, 8 Oct 2007 @ 21:19 IST #
  5. For the colorfully challenged like me, it doesn't really matter whether it is gimp or photoshop. They need a certain amount of time and mental effort to get used to, which I don't have. But will keep this tutorial in mind if I ever decide to dabble in this :)

    Comment by Sudipta Chatterjee (visitor) on Tue, 9 Oct 2007 @ 09:53 IST #
  6. Sudipta, I hope you find it useful, some day. :)

    Comment by hari (blog owner) on Tue, 9 Oct 2007 @ 10:19 IST #
  7. Great tutorial, Hari. I'll remember to come back and look at it when and if I need it.

    Comment by RT Cunningham (visitor) on Wed, 10 Oct 2007 @ 19:43 IST #
  8. Thanks RT. Have it stashed away in your bookmarks somewhere :D

    Comment by hari (blog owner) on Wed, 10 Oct 2007 @ 19:54 IST #
  9. I got to this page OK, then selected a thin horizontal slice for content, copy visible, then paste as new.

    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, 9 Sep 2008 @ 09:02 IST #
  10. Davud, what I meant was remove the colour band from the content bit.

    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, 9 Sep 2008 @ 13:11 IST #
  11. I wish i found this earlier. Been looking for a week but nothing so i just sat down and got on with it. The gimp is so powefull. So much better than photoshop because its open source you can change its look and feel and of course there are hundreds of free great tutorials just like this one.

    Comment by mike (visitor) on Sun, 16 May 2010 @ 04:08 IST #
  12. Thanks Mike. :)

    Comment by Hari (blog owner) on Tue, 18 May 2010 @ 20:26 IST #
  13. Thanks Mike :-) Nice tutorial, I'll use it for my Blog header.

    Comment by hsidhi (visitor) on Mon, 14 Nov 2011 @ 12:53 IST #

Leave a comment

First-time comments on this blog are moderated.
Your name*
Email ID*
(wont' be published)
Website
Your comments*
(No HTML allowed)		 :-) :-D :biggrin: :-P ;-) 8-) :-( :mad: |-| :oops: :-/ :-| :roll:
bold italic quote code
Code* captcha Enter the code you see in the image
* required fields