Converting a Gimp .xcf to HTML/CSS

October 26, 2009, in CSS,HTML,Web Design, by Eric Bannatyne.

Last week, I posted a tutorial on creating a website design with Gimp. Today, we will be converting that design to an HTML/CSS design.

Cutting Up the .xcf Into Pieces

First, we need to take the .xcf image we created last time, and get some smaller images from it.

The first part to cut out is the gradient from the boxes. Get the Rectangle Select Tool, and set Fixed: Size to 1x80px. Making sure you're on the layer of the box you're cutting from, make the selection, and use CTRL+C to copy it. Create a new image with a size of 1x80px and paste in the image you copied. Create a new directory called images and save it as gradient.png.

cut1

The next piece to cut out is the background image. Be sure to uncheck "Fixed" and use the Rectangle Select Tool to select the image in the corner of the background and copy it. In the toolbox, you should see some boxes showing the size of your selection. Create a new image with this size. Save it as bg.png.

Do the same thing with the logo. When creating the new image, be sure to set "Fill with" to Transparency, under "Advanced Options". Name the file logo.png.


cut3

Be sure to move any other images that you have into the images directory.

Create the HTML

Open up a new file called "index.html" in a text editor. Put in your basic divs to get the general layout of the content.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<!DOCTYPE html>
<html>
<head>
    <title>Fantastic Web Design</title>
 
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body id="home">
 
    <div id="header">
        <h1>Fantastic Web Design</h1>
        <div id="logo"><a href="#"></a></div>
    </div>
 
    <div id="wrapper">
 
        <div id="main">
 
            <div class="box" id="featured">
            </div>
 
            <div class="box" id="latest-posts">
            </div>
 
            <div class="box" id="latest-work">
            </div>
 
        </div>  
 
        <div id="sidebar">
 
            <div class="box" id="nav">
            </div>
 
            <div class="box" id="ads">
            </div>
 
        </div>
 
        <div class="clearing"></div>
 
        <div id="footer">
        </div>
 
    </div>
 
</body>
</html>

(Sorry the code is a little painful to read. If anyone knows of a good syntax highlighter for WordPress that works well on dark themes, please let me know.)

I think I've named the IDs appropriately, so you should be able to easily add in your own sample content to test it out.

The CSS

Next, we have the CSS. First, we will use the Eric Meyer Reset to set all browser defaults to a default value. Place it in a file called reset.css.

Create a new file called style.css. We will use @import to bring in the reset stylesheet.

@import url('reset.css');

The first part of style.css that we will be changing is body.

html, body {
    background: url('images/bg.png') top left no-repeat #1e1d1a;
 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 95%;
    color: #dbdbdb;
}

Then, we have the page layout.

/*=== Page Layout ===*/
 
/*== Header ==*/
#header {
    margin: 0 20px 5px 20px;
    background: transparent;
}
 
#logo {
    width: 332px; height: 38px;
    margin: 75px 0 0 0;
 
    background: url('images/logo.png') top left no-repeat;
}
 
#logo a {
    width: 332px; height: 38px;
    display: block;
}
 
h1 {
    width: 0; height: 0;
    overflow: hidden;
}
 
/*== Main wrapper ==*/
#wrapper {
    background: #1e1d1a;
 
    width: 945px;
    margin: 0 20px;
}
 
/*= Left =*/
#main {
    float: left;
    width: 665px;
}
 
.box {
    background: url('images/gradient.png') top left repeat-x #27211b;
    border: 2px solid #272421;
 
    padding: 2px;
}
 
#featured {
    width: 661px;
    margin: 0 0 20px 0;
}
 
#latest-posts {
    width: 290px;
    float: left;
}
 
#latest-work {
    width: 340px;
    float: right;
}
 
#latest-work img {
    margin: 10px;
}
 
/*= Sidebar =*/
#sidebar {
    float: right;
}
 
#nav {
    width: 240px;
    margin: 0 0 20px 0;
}
 
#nav li {
    list-style-type: none;
    margin: 0 0 0.4em 0.3em;
}
 
#nav a {
    font-size: large;
    color: #7b7b7b;
    text-decoration: none;
}
 
#ads {
    width: 240px;
}
 
#ads img {
    margin: 18px;
}
 
/*== Footer ==*/
#footer {
    margin: 10px 0;
}

Take a look at it in your browser. The design should begin to take its own shape about now!

After that, we have some general styles.

/*=== General Styles ===*/
 
.floatleft {
    float: left;
}
 
.floatright {
    float: right;
}
 
.clearing {
    clear: both;
}
 
p {
    margin: 0 0 1em 0;
    line-height: 1.3em;
}

Finally, we have the styles that apply to the home page only.

/*=== Home page styles ===*/
 
#home h2 {
    font-size: large;
    color: #5a5a5a;
    margin: 0 0 0.1em 0;
}
 
#home #featured h3 {
    font-size: large;
    margin: 0 0 0.2em 0;
}
 
#home h3 {
    font-weight: bold;
    margin: 0 0 0.2em 0;
}

Notice that in the HTML, the body tag contains an id of "home". We will use this later to have separate styles for each page. For now, we are just using it for styling the headings.

Notice that this CSS is incomplete. It does not contain a lot of general elements, such as strong, blockquote, and many others. If you have a basic knowledge of CSS, that's up to you to play around with and figure out what looks good.

If you don't know CSS, or you have a very limited knowledge of CSS, you can check out the W3Schools CSS Tutorial as a quick reference for anything you don't understand.

You can click here to download the finished code so far.

Next week, we will begin converting this design into a WordPress theme. For updates, be sure to subscribe to the RSS feed!

Related Posts

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!

15 Comments

  1. Jordan
    November 3, 2009

    It's well done. But can you refer the hole website for example?

    Have a nice day!

  2. Eric Bannatyne
    November 3, 2009

    @Jordan: Do you mean like a demo? If you want to see a working example, download the finished code, extract it, and open it in your web browser.

  3. Tiago Mesquita de Araujo Cunha
    November 5, 2009

    When i see the topic i was thinking that GIMP got some tool to export a CSS ready-to-use created with your font difinitions (in gimp) and others things maybe a size definition to use in Divs... but i don't understand why i will not use illustrator or photoshop to make a design to use GIMP if the way that will end is the same...

    tnx for the topic, good job!!

  4. Eric Bannatyne
    November 5, 2009

    @Tiago Mesquita de Araujo Cunha:

    A little while after I ipublished this post, I thought that the title might be a little misleading. But, It's too late to change it now.

  5. Rafael
    November 9, 2009

    Great tutorial! Thanks!

  6. Andrew @ Incomes International
    November 12, 2009

    Hey Eric, nice tutorial. I would have liked to see a bit more detail in the actual process of exactly what and where to cut a design but other than that it's been extremely helpful.

    BTW, I really don't think the title is misleading at all. The post clearly delivers what the title proclaims.

    Thanks.

  7. Eric Bannatyne
    November 12, 2009

    @Andrew: Thanks. When cutting up the image, just remember to make your selection the exact size, and paste it into a new image that is the same size as your selection.

    For simple repeating gradients, you can just make a 1px wide (or tall) selection, and use CSS to make it repeat.

  8. Tara jackson
    November 30, 2009

    I have not put the new layout up yet..But I'm a little confused...I made my template but as far converting to html...Having a little trouble on what to cut exactly

  9. Eric Bannatyne
    November 30, 2009

    @Tara: Simply cut out any pieces of your theme that aren't solid colours. If it is just a gradient that is being repeated, it can be 1px wide, to reduce download times.

  10. Randy
    December 9, 2009

    Great tut - exactly what I had been looking for since I use GIMP. And thanks for following through with the HTML/CSS conversion. It's amazing how many design tuts are out there that quit with an image file - as though you're done!

    BTW - I downloaded your files and noticed the index file doesn't render properly in Firefox 3.5.5. There is a dark brown block in the top portion of each of the light brown blocks. IE8 and Chrome are fine.

    Thanks again!

  11. Eric Bannatyne
    December 9, 2009

    Thanks, Randy.

    I just checked the files again, and I don't seem to be getting the same problem, in Firefox 3.5.5 on Linux.

    It's also working fine for me in Webkit-based browsers (Google Chrome and Midori).

    If you have the time, perhaps you could show me a screenshot of what's going on.

  12. Fro
    June 19, 2010

    I can find the reset of the tut. How did you convert it into a wordpress theme?

  13. lavel
    February 8, 2012

    is this website code only made for wordpress?

Trackbacks/Pingbacks