How to Create a Simple Web Site with the Gimp

Posted on February 8, 2011 by David Cicala in Tutorials

 

While Adobe Photoshop continues to be an industry leader in graphic design, another image editor is a great, free alternative. The GIMP allows you to do just as much as Photoshop when used correctly, although it has a steep learning curve. In this tutorial I will be demonstrating how to design a very simple website with the GIMP and code it with Dreamweaver (optional). Of course, if you already know HTML and CSS, or have another program, you can use that instead.

 

DISCLAIMER: This tutorial was written to demonstrate how to use simple elements common in a website. I repeat SIMPLE. It is also aimed at showing how to splice up the layers in GIMP and then use them in DIV layers in Dreamweaver or any other HTML editors. These techniques can be applied to much more advanced designs later. Don’t be a wiseacre about it, especially if you know how to create websites; most people start out as beginners.

 

First go to your desktop and open up gimp.

Create a new document.

File > New > 1024×768

Fill bg with #CCCCCC

Create a new Layer

Use the rectangle tool, 930px, and fill it with white.

Make a new layer

Now make another rectangle box 920 x 150 or so. just make sure it’s even.

Fill with #7e8e9f or even an image that is 920 x 150.

Resize the rectangle select to about 26 px high, at the bottom of the box. shown in the preview.
Create a new layer, fill with black #000000. Change the transparency to about 24% or whatever you like.

Be sure to start naming your layers from this point forward to know what you’re dealing with. (Background, White background, Header, Navbar)

Now you’ll place a logo in your header, if you have one already made, just paste it into a new layer called logo and adjust the placement. If you do not have one, create the new layer, Logo, anyways. Then select the Text Tool and put your text in, editing to how you like.

Now would be a good time to save everything. You want to keep your layers in tact, so be sure to save as a .psd or a .xcf. xcf is what gimp uses, but photoshop and other programs use psd, and is more widely accepted. I prefer psd, so give that a try.

The next step would be to make the bottom of the page, the footer. It is important to make another box, the same width as the header, centered in the middle. Mine is about 920×38. Fill it with a similar color to the navbar or header, in this case I used #5f6c78. This is of course is entirely optional and you are allowed to customize it however you like, but for the tutorial purpose, keep it simple.

This will be all I’m demonstrating with this simple tutorial, now how to splice every element up!

Since the background is a color, we do not need to save that as an image. However the white background needs to be saved. Since it is a single color, use the select by color tool, select it, and copy it. Paste it into a new image and save it as “bg.png”.

Next you’ll want the header. The best way to do that in this case would be to merge the navbar and header layers.

Next, if the colors are different enough, use the select by color tool and select the upper region (not the navbar!). If you used an image or a similar color, you will have to select it with the rectangle tool (you can zoom in to make it more precise).

Now copy and paste it into a new document and save it as “header.png”.

Do the same for the navbar, naming it “navbar.png”.

For the logo, just select all and copy and paste into a new layer. Go to image>autocrop image to reduce in size.

Save as “logo.png”.

Now repeat the steps for the navbar and header for the footer. Save the footer as “footer.png”.

You have now successfully spliced up the website with gimp. Continue reading for how to code the template with dreamweaver. Alternatively, you can code the page yourself with notepad, or download the source files at the end of the article.

Go to manage sites, then select “new…” site.

Give the site a name, you do not need to enter a HTTP address though, but you can if you want.
Edit the settings for your liking. I did not use server technology and I used a specific folder to save things in.

Now click file new and select a blank HTML page. You may use XHTML Strict or transitional, but I use XHTML strict.

Now the basic items in the page are created. You can edit these to your liking. Once done, we will begin to code the page.

Make sure to include an image folder with all your images we created with gimp; you can title it “img”.

Right click and go to page properties. Change the background color to #cccccc, or what you used as the background. Change the top and left margins to 0.

Now you want to create the repeating white background. Go to insert> layout objects > div tag and insert a new css rule. Make sure it’s ID and make it follow a new style sheet file. Name the div id as “bg_repeat”.

Go to background and locate the background-mage. Make the background-repeat y.
Go to box. Set the width as 930px (or the width of the background. Height set to auto. Padding to 0. and Margin to auto. Click ok.

Now to create the header. Delete the words “Content for id “bg_repeat” Goes Here” and put the cursor there.
Insert a new div id called “header”. Set the background as “header.png”. Width 920px; height 125px; 0 padding and auto for margin.

Insert another div id tag, but insert it after “header”. Call it “navbar”. Set the background as “navbar.png”. Width 920px; height 26px; 0 for padding and auto for margin.

Now make a “width” div id tag, set it as 900px wide, and give it a padding of 10px all around. Auto margin.

Now for the footer. Do the same as for the previous ones, insert a new div id tag called “footer”. Set the “footer.png” image as the background. 920px width and 38px height. 0 padding and auto margin.

Now things should be beginning to shape. However if you want the footer to always be at the bottom you’ll need to make these changes to the CSS.

body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
}

html {
height: 100%;
}

#bg_repeat {
background-image: url(img/bg.png);
background-repeat: repeat-y;
margin: auto;
padding: 0px;
width: 930px;
height: 100%;
min-height:100%;
position:relative;

}

#footer {
background-image: url(img/footer.png);
background-repeat: no-repeat;
margin: auto;
padding: 0px;
height: 38px;
width: 920px;
position:absolute;
bottom:0;
left: 5px;
}

Now everything’s good and ready to be filled with content. First the logo.

Select the text “Content for id “header” Goes Here”. Delete it and insert a new div layer id. Call it “Logo”. Go to insert>image and insert the logo. Then feel free to adjust the padding so the logo is located in a nice location.
Select the text “Content for id “navbar” Goes Here”. Delete it and insert a new div layer id called “navwidth”. Make the width 900px, or smaller than the actual navbar. Give it some padding on top (5px) and change the font settings. Then you can enter hyperlinks.

Finally, do the same with the footer and you have a simple layout that is now complete.

All of this can be done differently and to your liking. Please comment with suggestions on making the tutorial easier to understand and what your results were. I will be posting more tutorials in the future, such as using different programs, more advanced, and simpler methods.

This tutorial may not be taken or claimed as your own, but you may link to it.

Don’t forget to share with others through Twitter, StumbleUpon, Facebook, ect!

Download design.zip

Original post imported from davidcicala.com

Tags: code, color, create a website with gimp, css, design, download, dreamweaver, gimp, splice, tutorial, web design