Open source tools to design your own website

There are many ways to create a website. There are expensive ways and then there's the alternative free way.

This is not a tutorial but an outline of the procedures involved when it comes to typical web design.

Two great tools to allow you to create an initial design of a website are Inkscape and the GIMP. Inkscape is vector drawing application in a similar vein to Adobe Illustrator. The GIMP is an image manipulation tool comparable to Adobe Photoshop. But they can both be used hand in hand. There is also Fireworks also from Adobe which is a powerful program and can do everything pretty much from one interface. But it's not the free way!

First of all you may have drawn a website on a scap of paper. Problem is you'll be itching to do something with it. Ideally you will want to load up Inkscape and start drawing your website. If you have a hand drawn design you can either recreate it in Inkscape or scan it in and then trace it in Inkscape.

The advantage of Inkscape is that you can draw lines and boxes and move and scale them without introducing artifacts like you would get when stretching a photo. There are many helpful drawing tools available within Inkscape to help achieve the look you desire. There are also many Inkscape tutorials around if you need a bit of help getting started with vector drawing.

When you have achieved your perfect design you will probably want to slice up the design so you get your logo, icons and background images. This is where the GIMP comes in. From Inkscape you will want to export your full page design as a bitmap image. This will be saved as .png. Load this into GIMP and then you can start slicing. It seems a bit fiddly at first as you have to add multiple guides so set slicing points. But the fun part comes when you run the slice tools. You can use either the guillotine or the slice filter to slice your design. Although it seems the slice filter is not included by default in the Windows version so follow this guide to installing python for GIMP.

The slice tool is the best way to go as it will create the necessary HTML and image for you.The guillotine will work but you will need to put more work in to saving the images and constructing the HTML yourself.

Inkscape and the GIMP make great companions for making a design for your own website and all for the grand total of nothing. Each has there pros and cons and they both have plenty of special effects filters to play around with and should help you get the design you want.