Creating PNG files Web Designing

The good news is that there are quite a few tools out there for both PCs and Macs that can save files in PNG format. The bad news is that not many support special features such as alpha channel transparency or gamma correction. Furthermore, some programs that create PNG files do not compress them as well as they could (including Adobe Photoshop 4.0 and PaintShop Pro).

Table lists PNG feature support in a number of popular graphics tools.

Table: Graphics applications that support PNG format

Graphics applications that support PNG formatGraphics applications that support PNG format

1.Fireworks (2 and higher)
Macromedia Fireworks 4 is currently the best commercial software for creating PNG graphics. Not only does it have the most efficient PNG compression among its competitors, it also supports all varieties of PNG transparency, including the coveted multilevel 8-bit palette transparency. Fireworks also uses PNG as its native source file format because of its lossless compression.

When creating a PNG in Fireworks, it is important to use the Export function rather than just saving the file (resulting in a Fireworks native PNG file with loads of extra data). The Export Preview dialog box (shown in Figure ) allows you to choose 8-bit, 24-bit, or 32-bit PNG format. The 8-bit PNG option gives you the same controls used for GIF compression: palette selection, color reduction, dither control, and transparency.

Figure: Fireworks' Export Preview dialog box showing PNG options

Fireworks' Export Preview dialog box showing PNG options

In "PNG 8" mode, the transparency pop-up menu allows you to select from alpha channel or index (palette) transparency. Index transparency generally results in smaller file sizes and therefore is more appropriate for the Web. Note that there must be transparent areas in the original layered image; Fireworks merely preserves the transparent areas on export (including soft fades and anti-aliased edges).

Fireworks keeps the file sizes small as well, delivering on the PNG promise to be smaller than their GIF counterparts. For the image in above Figure, with exactly the same settings, the resulting GIF weighed in at 11,187 bytes, while the 8-bit PNG was 10,287 bytes (an 8% savings). Of course, file size savings varies depending on the image type.

Photoshop 5.5/ImageReady (and Higher)
Photoshop has offered read/write PNG capabilities since Version 4. For the best results, use the optimization features in the "Save for Web" option in Versions 5.5 and higher.

The same export features are available in ImageReady (the web graphics tool that comes bundled with Photoshop 5.5 and higher).

From the Save For Web dialog box (Figure), PNG-8 format has the same settings as a GIF image. Only binary transparency is available for 8-bit PNGs (the same on/off style as transparent GIFs) with the Matte tool for blending into the page background.

Multilevel transparency can be preserved for 24-bit PNGs. Unfortunately, Photoshop does not squeeze PNGs down as small as it could. For the image in Figure, with exactly the same settings, the resulting PNG was 11,666 bytes, versus the GIF at 10,789 bytes. Photoshop's PNG was 8% larger than its GIF, and 4% larger than the Fireworks-generated PNG.

Figure: PNG-8 options in Photoshop 6's Save For Web dialog box

PNG-8 options in Photoshop 6's Save For Web dialog box

The GIMP
The GIMP (GNU Image Manipulation Program) is a free, Photoshop-like image-editing tool that runs on the X Window system under Unix. There is also a Microsoft Windows port available. The GIMP is virtually unknown by most professional graphic designers, but it bears mention here due to its superior implementation of the PNG format.

The GIMP offers excellent compression, full transparency support, gamma correction, and embedded text entry. You can apply compression incrementally using the deflate "compression level knob" (a sophisticated tool that no other image program offers).


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Web Designing Topics