Tag Archive for 'guide'

Web Development with The Gimp and Blueprint CSS – Part 1

The GIMP is a popular FREE and open source image editing program, Blueprint CSS is a popular and also free CSS framework, it makes web layouts easy and chooses sensible style defaults on your web page. It is compatible with almost all modern browsers and makes designing a website easy and simple.

This first part contains how to set up the files and folders and create the image in the Gimp, the second part will contain how to slice up the image and save it, and the third part (out 14/01/09) will show how to write the code and finish up.

First, a little about my setup. I’m running Ubuntu 8.10 (64 bit version). I have GIMP 2.6, I also am going to be using Firefox 3. The Browser should not matter as Blueprint is tested and works in most modern browsers. I assume knowledge of your chosen OS, that you have the gimp installed and working, and that you know how to open an image in the gimp. It’s also useful if you know what some of the tools are called.

At the end of the three part tutorial you should have something like this in your web browser, with boxes for the content and sidebar etc.:

screenshot-2

Continue reading ‘Web Development with The Gimp and Blueprint CSS – Part 1′