Contents

1.0 - Introduction
2.0 - Transparent PNGs with Paint.NET
3.0 - Browser test
4.0 - References


Download test-images: PNGs.zip (7 kB).


1.0 - Introduction

Modern browsers support transparent PNGs, which could be reason for using PNG instead of GIF. A GIF image [1] only supports a color depth of 8 bits per pixel (256 colors), a PNG [2] image has 24-bit RGB colors and it has a better (lossless) compression. PNG does not support animation.
PNG was designed to replace GIF from the beginning.

This is a short overview how to make transpararent PNG's for webpages using Paint.NET, a free paint-program [3].
The results were tested in the browsers Internet Explorer 7, Firefox 3.0 and Opera 9.5.


2.0 - Transparent PNGs with Paint.NET

Paint.NET is a simple paint-program without any frizzles and with a tidy user-interface. As a result it is easy to use and it is well suited for making transparent PNGs.

This is an example of a single PNG image which is edited for transparency:




1a - No transparency (alpha = 255).
1b - Color orange is made 100% transparent (alpha = 0).
1c - Color orange is made 49% transparent (alpha = 125).

Fig.1 - Transparent PNGs.


The images are placed on a raster as background for demonstrating the effect of transparency. This is normally the background color or background tile of the webpage.
A PNG image is suitable for graphic content, as in this example. Not for images with shades and gradients like photos; it has the same use as a GIF.
A single color is made transparent here (1b, 1c), but actually you can set transparency for each individual color in the image.


Fig.2 - In Paint.NET the transparency for a color is set in the 'Colors' window and has a value of 0 (100% transparent) to 255 (solid).


Colors window
When editing a PNG image in Paint.NET you can set the transparency for a selected color in the 'Colors' window. Open this window with menu Window > Colors. Use button 'More' for showing the sliders for setting RGB colors and transparency. See Fig.2.

Tools window
Show the Tools window with menu Window > Tools.

Apply a transparent color
Select a color in the Colors window, set the transparency (alpha), then use the Paintbrush, Pencil or Paint Bucket tool.

Paint Bucket tool
Fill areas with the Paint Bucket tool. First, select the desired color and transparency, then use the Paint Bucket Tool on the area you want to fill. Notice: filling more than once on the same surface decreases the transparancy of the color (the alpha values are summed). This can be repeated until the color is solid. As a result, filling an area with a well defined color and transparency needs a 100% transparent background (you can use the Eraser Tool for preparing a background).
This summing-effect for transparent colors also applies to the Paintbrush and Pencil tools.

The Eraser Tool
With the Eraser Tool the transparancy of a color is set to alpha=0 (100% transparent). The tool does not use a background-color as in some other programs. This feature is useful for making individual pixels transparent when editing small icons.
Erased parts in the image show a gray checked surface. Transparent colors show this surface as a background (Fig.2. left).

Erase large areas
Use the Rectangle Select, Ellipse Select, Lasso Select or Magic Wand tool for selecting an area + key Del. The cleared area has 100% transparency and can be filled with a desired color.


3.0 - Browser test

This webpage has some transparent PNG images on it made with Paint.NET (Fig.1). It is shown well in Internet Explorer 7.0, Firefox 3.0 and Opera 9.5 without any visible differences.
IE 6 supports transparent PNGs but not alpha-channel transparency [2].


4.0 - References


[1] Graphics Interchange Format (GIF)
http://en.wikipedia.org/wiki/GIF

[2] Portable Network Graphics (PNG)
http://en.wikipedia.org/wiki/Portable_Network_Graphics

[3] Paint.NET
Paint.NET is free image and photo editing software for computers that run Windows (sourcecode available).
http://www.getpaint.net/