Tutorial on images manipulation
Posted: Sun Apr 16, 2006 10:10 am
Given the popularity of threads such as "Photoshop the picture games" or "Do you need a signature/avatar", I thought it would be useful that I write a tutorial about manipulating images. I will use the software Gimp, but according to what I heard, Photoshop is quite similar. The advantage of Gimp is that it is free.
File formats
Before diving into Gimp, it is useful to know about image formats. Image formats are used to store the data allowing to reconstruct the images. The important notions to know about image formats are:
Additionnaly, Gimp supports the format XCF, wich can handle everything that other formats can handle. For example, it can store images with multiple layers, each one having an alpha channel (transparency). None of the popular image formats described above can handle this combination. The downside is that this format generates very large files, and is usually not understood by browsers. It can be useful to store images when working on them though. When an image is done, it can be converted to a format more appropriate for download/display.
Converting an image
Let's take as an example this PNG image (421 Kb). It is unsuitable to display in a page because of its size, therefore it would be useful to convert it to JPG format.
First launch Gimp, then open a file by clicking on File->Open, then on the Open button:
On the newly created window, click on File->Save as:
You can change directly the extension of the file from png to jpg, or click on "Select file type (by extension)" to select one of the proposed formats (a lot!). Once you have chosen your file format, click on Save. You will then get a dialog box according to the format you chose, which will allow you to configure further. If you chose jpg, you will get this:
Most of the settings can be left as-is. My suggestion would be to check "progressive" as most browsers support it now. A quality of 50% should be enough for most cases, and can be degraded as far as 25% in many cases. You should do several tries to see what quality is the best to your taste.
After the settings are according to your taste, click on "OK", and you are done!
Using this, you can convert almost any existing image format to any other image format.
Using layers
For this part, it will be useful to save the work (partial or complete) using XCF format, then export the image to jpg for publishing.
I will use this image (23 Kb) as an example. You can download the background (278 Kb) to try yourself.
Once you have loaded the image, the layers window should look like this:
Click on "New layer" (1), and you will get this dialog box:
You can change the name of the layer to "Titanic" (or any name that fits the image you will choose), then click "OK". The layers window will appear like this:
Because the TV screen must appear above the image which will be put into the newly created layer, the order of the layers must be changed. Lower the newly created layer by selecting it (it should be already done since it has just been created), then click on "Lower layer" (2). Once it has been done, ensure the newly created layer is still selected, and paste another image into it. Because the new layer is selected, any image you will paste will appear only in this layer. You can move the pasted image and see how it will be clipped by the TV screen. You can also click on the eyes appearing right on front of the layers in the layers window: they allow to show and hide each layer.
Once it is at a good position, click outside of the selection rectangle to anchor it in the new layer. To anchor it, you can also click on the menu Layer->Anchor layer. You can then save the image (be careful not to overwrite your background) to an XCF format, or jpg for publishing. If you select another format than XCF, you will most probably be prompted to export your image. Just click the button "Export", and it should create a flat image the same as the one in the working window.
Animated GIFs
For this example, I will use this GIF animation (382 Kb). If you want to create a GIF animation from scratch, you need to have all the different images, all having the same size, that consitute the animation. Such images are called "frames". Gimp allows to do animations by using layers. The animation will go from the first layer to the last one, that is from bottom to top.
First, open the first image. Then add a new layer by clicking on "New layer" in the layers window. If you don't remember how to handle layers, you can have a look at the previous tutorial "Using layers". This time though, the new layer has been created above the previous one, and since we want the new layer to appear after the previous one in the animation, it is already at the correct position. Make sure the new layer is selected, then open the next image, select the whole area (menu Select->All), copy it to the clipboard (menu Edit->Copy). Go back to the GIF file, and paste the image in the new layer (menu Edit->Paste). Proceed the same way for all images, adding each one in a new layer. To save the animation, click on the menu File->Save as (be careful not to overwrite your first image), and enter a file name with "gif" as extension, then click on the "Save" button. You will get the following dialog box:
You want to save an animation, and not flatten to one image. So click on "Save as animation", then on the "export" button. You will get this dialog box:
Be sure that the "Loop forever" option is checked (it should be), then specify the speed of the animation, by entering the time each frame must stay. Usually, 100 ms (milliseconds) should do it. You can try different values to see what will fit your taste. Once you're done, click on the "OK" button, and that's it You can see the animation in your favorite browser by opening the newly created file with it.
If you want to vary the animation speed, for example one frame must be displayed longer, or another one shorter, you can change the speed for one frame. To do that, select the appropriate layer, then edit the layer attributes (right-click on the layer, then click "Edit layer attributes") and change the name so it ends with "(123ms)", where 123 is the time in milliseconds you want the frame to stay. Again, try different values to see how it looks.
That's all for now, if you would like other topics covered by this tutorial, just ask
File formats
Before diving into Gimp, it is useful to know about image formats. Image formats are used to store the data allowing to reconstruct the images. The important notions to know about image formats are:
- Uncompressed: The data are stored as-is. Although there are many ways to store such images, they all end up with very big files, usually roughly the width multiplied by the height. According to the quality of the color, it may be multiplied again by 2, 3 or 4. Thus, a 1024x768 image would end up with at least 768 Kb.
- Lossless compression: The data are compressed in a such way that the image can be reconstructed exactly as it was. Examples are gif and png formats.
- Lossy compression: The data are compressed, but the image can't be reconstructed exactly. However, it will be similar enough with the original. An example is jpg (jpeg) format.
- BMP: Windows bitmap. It is an uncompressed format, therefore it should be avoided for images on the Internet.
- GIF: Compuserve GIF format. It uses a lossless compression format. It is capable of animations. However, its limitation to 256 colors, and the patent that covers its compression algorithm make the PNG format more useful when no animation is needed.
- PNG: Portable network graphics. Like GIF format, it uses a lossless compression format. Unlike it though, it can't have animations, but it allows more than 256 colors. Its compression algorithm is usually better than GIF's.
- JPG: Joint photographic experts group. It uses a lossy compression algorithm, and therefore can achieve a much smaller file size, at the cost of image quality. By setting the precision when creating a jpeg image, one can alter the quality of the image to reduce the size of the file. This format will almost always be the best choice for very large images.
Additionnaly, Gimp supports the format XCF, wich can handle everything that other formats can handle. For example, it can store images with multiple layers, each one having an alpha channel (transparency). None of the popular image formats described above can handle this combination. The downside is that this format generates very large files, and is usually not understood by browsers. It can be useful to store images when working on them though. When an image is done, it can be converted to a format more appropriate for download/display.
Converting an image
Let's take as an example this PNG image (421 Kb). It is unsuitable to display in a page because of its size, therefore it would be useful to convert it to JPG format.
First launch Gimp, then open a file by clicking on File->Open, then on the Open button:
On the newly created window, click on File->Save as:
You can change directly the extension of the file from png to jpg, or click on "Select file type (by extension)" to select one of the proposed formats (a lot!). Once you have chosen your file format, click on Save. You will then get a dialog box according to the format you chose, which will allow you to configure further. If you chose jpg, you will get this:
Most of the settings can be left as-is. My suggestion would be to check "progressive" as most browsers support it now. A quality of 50% should be enough for most cases, and can be degraded as far as 25% in many cases. You should do several tries to see what quality is the best to your taste.
After the settings are according to your taste, click on "OK", and you are done!
Using this, you can convert almost any existing image format to any other image format.
Using layers
For this part, it will be useful to save the work (partial or complete) using XCF format, then export the image to jpg for publishing.
I will use this image (23 Kb) as an example. You can download the background (278 Kb) to try yourself.
Once you have loaded the image, the layers window should look like this:
Click on "New layer" (1), and you will get this dialog box:
You can change the name of the layer to "Titanic" (or any name that fits the image you will choose), then click "OK". The layers window will appear like this:
Because the TV screen must appear above the image which will be put into the newly created layer, the order of the layers must be changed. Lower the newly created layer by selecting it (it should be already done since it has just been created), then click on "Lower layer" (2). Once it has been done, ensure the newly created layer is still selected, and paste another image into it. Because the new layer is selected, any image you will paste will appear only in this layer. You can move the pasted image and see how it will be clipped by the TV screen. You can also click on the eyes appearing right on front of the layers in the layers window: they allow to show and hide each layer.
Once it is at a good position, click outside of the selection rectangle to anchor it in the new layer. To anchor it, you can also click on the menu Layer->Anchor layer. You can then save the image (be careful not to overwrite your background) to an XCF format, or jpg for publishing. If you select another format than XCF, you will most probably be prompted to export your image. Just click the button "Export", and it should create a flat image the same as the one in the working window.
Animated GIFs
For this example, I will use this GIF animation (382 Kb). If you want to create a GIF animation from scratch, you need to have all the different images, all having the same size, that consitute the animation. Such images are called "frames". Gimp allows to do animations by using layers. The animation will go from the first layer to the last one, that is from bottom to top.
First, open the first image. Then add a new layer by clicking on "New layer" in the layers window. If you don't remember how to handle layers, you can have a look at the previous tutorial "Using layers". This time though, the new layer has been created above the previous one, and since we want the new layer to appear after the previous one in the animation, it is already at the correct position. Make sure the new layer is selected, then open the next image, select the whole area (menu Select->All), copy it to the clipboard (menu Edit->Copy). Go back to the GIF file, and paste the image in the new layer (menu Edit->Paste). Proceed the same way for all images, adding each one in a new layer. To save the animation, click on the menu File->Save as (be careful not to overwrite your first image), and enter a file name with "gif" as extension, then click on the "Save" button. You will get the following dialog box:
You want to save an animation, and not flatten to one image. So click on "Save as animation", then on the "export" button. You will get this dialog box:
Be sure that the "Loop forever" option is checked (it should be), then specify the speed of the animation, by entering the time each frame must stay. Usually, 100 ms (milliseconds) should do it. You can try different values to see what will fit your taste. Once you're done, click on the "OK" button, and that's it You can see the animation in your favorite browser by opening the newly created file with it.
If you want to vary the animation speed, for example one frame must be displayed longer, or another one shorter, you can change the speed for one frame. To do that, select the appropriate layer, then edit the layer attributes (right-click on the layer, then click "Edit layer attributes") and change the name so it ends with "(123ms)", where 123 is the time in milliseconds you want the frame to stay. Again, try different values to see how it looks.
That's all for now, if you would like other topics covered by this tutorial, just ask