demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Simple Alpha Masked PNGs In Photoshop

tools / photoshop

Estimated reading time: 3 minutes, 12 seconds

A GIF has “one color transparency” – a single color may be chosen as transparent in the image. This means that must smooth the visible edges of the image that touch the transparency against an expected background color. This is chosen by setting the appropriate “matte color” in PhotoShop when exporting the image. The application then antialiases the edges of the GIF against the expected background color, providing a smooth transition.

Magnified effects of a GIF image "fringing" against its background due to incorrect matte color selection during export from PhotoShop.

This works well when the chosen matte color matches the actual background that the image is placed on, and when that background is a single color. But if either of these is not true, “fringing” results, due to the fact that PhotoShop has introduced pixels of an intermediate color between the image and the expected single background color. Turning off this antialiasing effect is typically not a solution, as without the added pixels the edges of the image tend to look “jagged” or “staircases”.

In order to get around this problem, you can export a PNG with an alpha mask. An alpha mask is a selected area in an image with levels of transparency: 256 of them, to be precise, in a range from solid black (completely transparent) through levels of grey to solid white (completely opaque). Under ordinary circumstances this mask is not seen directly: instead, it has an effect on the perception of the image.

Practically, this means that a PNG with an alpha mask can be transparent against any background, without any visible fringing effects: its edges will always be smooth. It also means that a PNG can be partially transparent on top of other images or content (for example, to provide the appearance of clouds when images are layered).

We are going to create a simple alpha masked PNG in Adobe PhotoShop. As we will see, the file size of these images is often less than ideal for web pages: I would strongly recommend that you read the PNG Optimisation article in order to produce the best PNGs possible.

The simplest alpha mask is one created by PhotoShop itself; far more complex “fade” effects are possible, but for this example we’ll stick with the basics.

Step 1. Draw any solid non-rectangular shape on a PhotoShop canvas. For this example I’ve made a red circle.

Step 2. Image prepared for a basic alpha mask in PhotoShopTurn off the visibility of the background layer. This informs PhotoShop that we will be saving a transparent image. Note: under normal circumstances I would crop this in PhotoShop right to the edges of the visible image to reduce file size and to make it easier to place on the page; I have deliberately emphasized the transparent area in this example for the purposes of illustration.

Step 3. Choose File / Save for Web and Devices. Select “2 up” mode in the window that appears.

Step 4. Select “PNG 24” as the output, with transparency on. Technically, this is now a 32-bit PNG (24 bit color, 8-bit alpha mask), although PhotoShop will claim it is still PNG-24 format. Note that when Transparency is selected in PNG-24 mode, the matte option is grayed-out: "matte" is redundant when an alpha mask is employed to manage transparency levels.

A simple alpha-masked PNG-24 image, showing that it is automatically smoothed against all background colours

Step 5. Export the PNG image and bring it into a web page via an <img /> tag. Change the background-color of the <body> to different hues to prove that the edge of the circle is smooth against all colours.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.