Transparency

The goal is to add multiple icons into one image with an alpha channel (transparency). Having multiple icons in one larger image is a good optimization technique to speed up website loading.

The icon we want to add might not have transparency, in which case we have add an alpha-channel manually.

Initial image

gimp transparency alpha-channel

We need to resize the image, to make room for the additional icon:

gimp resize image

After resize, notice that the 'yellowish' line (=layer selection) only has the "old" size selected

gimp resize layer

Change the layer selection to match the image

gimp resize layer

Result after layer selection

gimp result after layer selection

Now we add a new image - you can google for an image and then "copy" it

adding a new image

Now "paste" it into our image

adding a new image

Notice that the new icon is "too big" - in the toolbox select scale and enter 26x26

scale image in gimp

... and move it to the correct place with the "move" tool from the toolbox. When you placed it in the correct location, click somewhere in image to "apply" the move

move image in gimp

Notice that the icon has a white "background" - we want that to be transparent, so it'll match any background. We want to draw in the alpha channel (=transparency channel). Go to the channels toolbox and switch to the channels tabpage. By default all channels are selected, deselect red, green and blue (only alpha remains selected).

gimp transparency alpha channel

Now use the "eraser" tool (the red one) to erase all the white (you might want to change the Brush-size so something appropriate)

gimp eraser transparency

gimp eraser transparency

gimp eraser transparency

and the end-result

gimp transparent icons end-result

Now all you need to do is save the file :)

JSN Teki template designed by JoomlaShine.com