Design Slicing With Gimp

Skip to content

Don’t Click On MeMy Personal Hub…

BlogAboutArchivesRegister

« Amlog Version 0.1 releasedWeb Development with The Gimp and Blueprint CSS – Part 2 »

Web Development with The Gimp and Blueprint CSS – Part 1

PublishedbyFelixon January 13, 2009in Uncategorized. 3 Comments Tags: blueprint, css, framework, gimp, guide, howto, HTML, tutorial, walkthrough, website.

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 easyand 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 notmatter 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, andthat 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.:

Web Development with The Gimp and Blueprint CSS – Part 1 at Don’t Click On Me http://dontclickonme.com/2009/01/web-development-with-the-gimp-and-blueprint-css/

1 of 10 10/26/2010 1:41 AM

At the end of the first part you should have something vaguely like this in the gimp:

For this project, I have one folder in my home directory, this will contain all the files to be uploaded, including all CSS, image and HTML files. It would be agood idea if you create one now.

To start with you need to download the latest version of blueprint from the Blueprint website. Extract the archive and copy the “blueprint” folder from withinthe archive to the folder we have just made (in the home directory).

Next, create “index.html”, a blank file, “style.css”, also blank, and an image folder (I’m calling it “img”). The index.html file will hold the design when we’refinished. We have created our own style.css file to house custom colours etc. And the “img” folder will contain the images once we have sliced them.

It should look similar to this:


2 of 10 10/26/2010 1:41 AM

Now you’re ready to open the Gimp and start making things… So, open the Gimp, create an image 950px wide and around 850px high (not crucial). Thendrag out guides by clicking on the rulers (the guides with the numbers on, at the (left) side) and draging out to where you want the guide to go. It’s useful tozoom in to around 200% to do this, (view menu >> zoom >> 200%). You need to put one at 30 pixels out and one at 40, one at 70 and one at 80, do this rightthe way accross the page, see the image below if you are unsure. Or you can download one I made earlier. Which is probably easier. If you made your ownguides, your background will probably not be the same colour, this is not a problem, it will work just the same. There is a picture of what your screen shouldlook like if you downloaded the “one I made earlier”.

The guides don’t technically serve a purpose in this tutorial, because I have given you the values of where to place things. But when you design your ownwebsites they become very useful for aligning content and text. As well as that they help you check to see if you have done things right as we go along.

Don’t forget to save as you go along , and when you’ve finished.

It should look like this (this picture does not include the toolbox or the layers dialogue, so there will be a little more to it on your screen).


3 of 10 10/26/2010 1:41 AM

I have then created a new layer called Holder to put the design into:

Use the Align tool and click on the layer, little squares will appear in the corner of the layer. Click the button on the toolbox that has two arrows pointing intothe middle (horizontally). The layer should move into the middle of the image.

I have then used the fill tool, to fill the layer with white, this is going to be our main content area. Although we are going to place the sidebar and the headeron top of it.

Your image should now look like this (but there should be space at the bottom of yours, I need to re-screenshot this…):


4 of 10 10/26/2010 1:41 AM

You may wish to fill the background, but it’s not mandatory. It is however, a good idea to fill the backgroundif you are going to use my CSS code later. I’m going to use #cccccc to fill the background layer. Select the background layer (the layer at the bottom) byclicking on on it in the layers dialogue, and then clicking on the empty space near the edge to fill it. The yellow and black line will surround the layer and youcan then then click on the layer to fill it. You need to have the colour selected first. Only the outside should look gery, the rest of the image will remain white.

I’m also going to create a drop shadow, which won’t show up particularly well, but will make it more interesting nevertheless. Click the Filters Menu >>Light and Shadow >> Drop Shadow. It will bring up the box below, make sure you use 0 as both the offset X and Y leave the colour and opacity and untickAllow Resizing. You need to have the layer you want to have the drop shadow selected and also bear in mind that in these screenshots the bottom 50px ischopped off. It should look like this before you hit ok:


5 of 10 10/26/2010 1:41 AM

The image window should now look something like this:

Now create another new layer called header, make it 870x wide and 150px high. Use the same technique we did earlier to move it into the centre (the“alignment tool”).


6 of 10 10/26/2010 1:41 AM

Fill this new layer with a gradient of your choice, I’m using #0084ff and #81c5ff. You need to choose the Blend Tool(the Gradient Tool) and then click + drag to create the gradient (vertically to get the same effect as this one).

You can use these same techniques to position/colour/align other aspects of your page such as footer and sidebar, but for this tutorial we are not going tomake them a different colour, we will define them with their allignment on the page later with Blueprint.

So far we have:


7 of 10 10/26/2010 1:41 AM

You can download the XCF file here.

I’ll see you in part 2 where we are going to chop the image up and save it ready for the web.

« Amlog Version 0.1 releasedWeb Development with The Gimp and Blueprint CSS – Part 2 »

3 Responses to “Web Development with The Gimp and Blueprint CSS – Part 1”

Feed for this Entry Trackback Address

1 bobbieApril 16, 2009 at 8:33 am

cool cant wait for the next part

1.

2 webmasterdubaiJune 19, 2009 at 5:33 pm

2.


8 of 10 10/26/2010 1:41 AM

great job im using Blueprint css for my projects.

1 Blue Print CSS Framework | Obb on the LeafPingback on Aug 26th, 2009 at 3:55 pm

1.

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

Recent Posts

TheMirrorA premature UberLog announcementRejected Don’t Click On Me themeWeb Development with The Gimp and Blueprint CSS – Part 3Web Development with The Gimp and Blueprint CSS – Part 2

Links


9 of 10 10/26/2010 1:41 AM

Don’t click on me Code Bin

Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Any content on this site which I have made myself, and is not already under another licence, is under the licence below:

Powered by WordPress2.8.4 and K21.0-RC7

Entries Feed and Comments Feed

23 queries. 0.7310 seconds.


10 of 10 10/26/2010 1:41 AM

Documents

Design Slicing With Gimp