View Full Version : Slicing an image.

06-18-2008, 02:14 AM
Okay so today I had a few hours off of work, so I decided I would attempt a new look for my website. This kind of layout seems to be quite popular.
So it all started quite well I suppose considering this is the first time I attempted to make a layout using a graphics program.
I finished the layout and discovered that I don't know how to slice an image using GIMP, so does anybody have a decent tutorial or explanation on how to do this?
Find my layout at www.jamiewest.org.uk/css/codingforums/index.jpg
Thanks in advance.

06-18-2008, 03:17 AM
http://www.google.com/search?q=gimp+slicing+tutorial Looks like some good ones near the top.

06-18-2008, 03:22 AM
Hi Rafiki,

There are a lot of tutorials out there and such on this, however I use gimp a lot for my designs and its really quite simple.

The way I choose to is to think about how your layout will look from top to bottom and start slicing in that order :BG<Header<Nav etc

The only tools you really need to use are the "eye" tool so you can see only a certain layer, then right click on the layer and choose alpha to selection, you can then crop some of it if needed, then click "Copy Visible", then "Paste as New Image" and you will have your new isolated image. Save it as you would like and repeat the above steps and then continue with you layout :D

So for yours, I would start with the background image, then slice your header gradient 1px wide and repeat-x.

I highly recommend checking out Gimpology.com (http://gimpology.com), it has some great tutorials and tricks for the GIMP.

Best of luck,


P.S. I noticed on your logo, it seems you were trying to do a gradient from top to bottom, only it shows up in the form of a square box, not just over the letters. To conquer this, choose "Alpha to selection" on your reflect text, then duplicate the layer and use your gradient over it. This will apply it to the text only :)

06-18-2008, 04:37 AM

you can try also gimp grok (http://gimp-savvy.com/BOOK/)


06-18-2008, 08:31 AM
I think above user is right. He has good knowledge. I hope above suggestion will help you.
All the best!!

06-18-2008, 02:14 PM
That was pretty simple actually. It is now all sliced, prepare yourself for loads of "newby" questions in the html/css forum :)