HOWTO: Draw PNG images with alpha channel

Problem Summary

This article demonstrates how to place an alpha channel-enabled PNG picture on a larger image for smooth blending.

Solution

The alpha channel is an extra data component of a pixel (in addition to RGB.) Instead of color information it contains this pixel's degree of transparency between 0 (fully transparent) to 255 (fully opaque). Portable Network Graphics format (PNG) is currently the only major image format that supports alpha channel. This unique feature enables a PNG picture to blend perfectly with any image or background it is placed on, without unsightly artifacts around the edges.

Starting with version 1.7, AspJpeg offers the DrawPNG method which allows you to draw PNG images with an alpha channel. This method expects three arguments, the X and Y offsets of the picture being drawn relative to the larger image, and the path to the PNG file:

jpeg.Open "c:\path\house123.jpg"
jpeg.Canvas.DrawPNG 10, 10, "c:\path\logo.png"
jpeg.Save "c:\path\out.jpg"

The latest version of AspJpeg can be downloaded from www.aspjpeg.com.

The following picture is a PNG image with an alpha channel you may use for your experiments:

To create an alpha-channel enabled PNG image in Photoshop, follow these simple steps:

1. Open your artwork in Photoshop, or create a new one, if necessary.
   
2. Use Blending Options to create a drop shadow for your picture.
   
3. In the Layers panel, unselect the "eye" icon of the Background layer to give your artwork a transparent background.
   
4. Select File/Save for Web.
   
5. In the Save for Web window under Settings, select "PNG-24" and check the Transparency checkbox.
   
6. Click OK to save the image to disk.