Next: Installing Fonts in The Up: The WebSiteRepairGuy Gimp Tutorial Previous: Taking a Color Sample Contents
Slicing images is important when building web pages. A common approach to web page design is to first layout the image of the page in an image editor like The Gimp.
Later, the web page image can be sliced into sections that are then marked up using HTML.
Gimp provides a reasonably straight-forward way to slice web images into smaller images. Basically, it is just a copy and paste operation.
What are you copying? A small section from the larger image. This small section only becomes one of the slices after you've pasted it and saved it as a file.
The most important operation in Gimp image slicing is the copy and paste operation. For this you could use the edit menu, but I suggest you use the equivalent keyboard shortcuts instead.
To copy a section of your image, you type Control-C. To paste the most recently copied section, you type Control-v.
In essence, this is all there is to slicing a small section out of a larger Gimp image.
Between the copy and paste, you need to insert the operation that creates a new image.
Why? Because when you attempt to paste the image as your next step, you need a place to paste it to.
Again, you can use a menu--in this case the File Menu--to create the new image for the paste operation. However, I recommend you do it differently; I recommend you use the keyboard shortcut instead. To create a new image using the keyboard shortcut, you type Control-n.
The ``n'' in this case is mnemonic for new image.
So far, we have 3 steps to slicing a Gimp image:
It is worth noting that a Control-n that immediately follows a Control-c will size the new image just right.
This is important as the Control-n is basically just creating a canvas and a canvas can be any size. So be sure that the Control-n immediately follows the Control-c. Otherwise, your canvas will be the wrong size.
If you mess up and get the wrong canvas size with the Control-n, you can always back your way out of the situation with the Control-z. What does Control-z do? It undoes the last step.
Once you've hit Control-z an appropriate number of times to back yourself out of your mistake, you can pick up the operation again where you left off just prior to the mistake.
An aspect of The Gimp that takes some getting used to is the fact that a newly pasted image has to be anchored before it can be saved as a file.
This seems odd but it is due to the fact that The Gimp allows the image to float on the canvas prior to being anchored. Floating is basically a click and drag operation that allows you to float your image to its final resting place.
Presumably, you might wish to float the slice to just the right location on the canvas. Of course, a slice that fits the canvas precisely cannot possibly be floated anywhere. That's because there is no wiggle room horizontally or vertically. The slice is an exact fit on the canvas.
Confusingly enough, you have to anchor the slice in spite of the fact that there is nowhere for the slice to float. The way to anchor the image is with the keyboard shortcut Control-h.
Once you've anchored the slice, there is nothing left to do but save it to a file.
Finally, we are ready to save the image to a file. Once again, this can be done with a menu--the File Menu. The operation you would choose is Save As.
I recommend that you bypass the File Menu and use the keyboard shortcut Control-s (mnemonic for save) instead.
The Control-s will cause a prompt to appear for the name of the file--since no name has yet been given. Be sure to choose a proper extension for your file-- typically .jpg or .gif
The 2 most common image file formats for the web as of this writing are GIF and JPEG. Which should you choose?
I'd recommend GIF for images that have 255 or less colors and JPEG for images that have more.
The nice thing about GIF is that it compresses nicely for images that have relatively large areas of uniform color and no areas with highly variegated colors.
On the other hand, for images that have lots of subtle tonal changes--such as a large photo of a person's face--I recommend JPEG.
To keep it simple, I suggest you use JPEG for a highly detailed photo of a Persian carpet. For your company's logo that consists of nothing but a background that is one color and foreground lettering that is another color, I recommend that you use GIF.
However, if you have a color gradient (a constantly shifting color) in your company logo, perhaps you should use JPEG instead. In other words, when in doubt, use JPEG because of the limitation in the number of colors that can be represented in a GIF.
Both image formats have their relative weaknesses but JPEG is definitely better at representing many colors.
Before you can copy and paste an image slice in The Gimp, you need to choose one. For this, you need a selection tool.
If all you are doing is slicing your web page up into sections, the only logical choice is the rectangular select. The rectangular select is the rectangle icon in the toolbox. (The toolbox is the first thing that appears on your screen when you invoke The Gimp.)
To choose the rectangular select, you click on the rectangular icon in the tool box.
However, since image slicing is a highly repetitive operation, I recommend using the Control-r instead to invoking the rectangle select. Control-r is mnemonic for rectangle.
To do the actual selection, make the image you wish to select active by clicking on it. Next, hit Control-r. Next, click and drag from one diagonal corner of the rectangle you wish to select to its opposite corner.
The selected rectangle within the larger image will appear as marching ants. The ants are really just dashes that move around the periphery of your rectangular selection much like lights move around the periphery of a marquee outside the theater.
To slice a web page, you will probably want to create a grid. To do this, you need to use guides.
Grids are nice because they allow you to slice your page into sections that are uniform in size. This is helpful when using the technique most commonly used to layout images--HTML tables.
To create a grid, simply click and drag your guides from out of the top and left border of your image. The guides that you drag out of the borders will appear as dashed lines. Use these to guide your selection of your next image slice.
I find it very difficult to select slices in my image with guides if the image is normal size or smaller. This is especially true if the guide is right next to a straight line in the image. My problem is that I have trouble distinguishing between the straight line and the guide.
This problem goes away entirely if I magnify the image enough that I can distinguish between the guide and the nearby straight line.
To magnify the image, click on the magnifying glass in the toolbox. However, since this is an operation I do frequently, I prefer to use the keyboard shortcut instead. I hit the uppercase ``M'' when I wish to magnify my image.
From there, I use the left mouseclick to expand and shrink the image. A left-mouseclick on the image itself makes it expand and a control-left-mouseclick on the image makes it shrink.
Images can be magnified up to 1600%. At this level of magnification, every last pixel of the image can be seen clearly and it is hard to go wrong.
Images that have been expanded to 1600% need to be scrolled. At this level of magnification, only part of the image can be seen in the image window.
To scroll in the window, I recommend using the move-tool icon found in the lower right-hand corner of the image. This icon looks like a compass points with all four directions--East, West, North, and South--being represented by arrows.
Click on this four-arrow icon and you will be able to scroll your magnified image within its window. The icon will be replaced by a miniature of the image and you will be able to land anywhere you choose to within the miniature. Manipulating the miniature scrolls the image.
Here is a recap of all the steps that are necessary to slice a web page image into small image files:
Repeating the above steps over and over again is how you turn a web page image design into image slices.
Two filters that will do the image slicing for you are Perlotine and Py-slice. I've not tried either myself but it appears to me that Py-slice is based on the Python programming language and Perlotine is based on Perl.
The basic premise of these programs seems to be to allow you to set up guides and then the slicing of the image happens automatically along the lines of the guides.
Thanks to Oleg Verych for alerting me to the existence of Py-slice.
©Edward Abbott 2003-2005