Learn how you can use this image format to achieve various creative and simple web design effects.
Introduction to the Format
What's unique to this format is its support of alpha transparency. PNG-24 (aka 24 bit PNG) images, like GIF images, support transparent pixels, but unlike GIF images, PNG-24 images support pixels with various levels of transparency. This means that these such images support certain effects such as shadows, glows, and varied transparencies. Here's a comparison of the transparency options provided by the major image formats:
 PNG-24 |  PNG-8 |  GIF |  JPEG |
How to Save an Image as PNG-24 in Adobe Photoshop
In Photoshop, you can save an image as PNG-24 by going to File > Save for Web & Devices and selecting PNG-24 under Format.
1) Images and Icons
You can also use the format for regular images and icons throughout a website. Of course, it really only to be flashy that one would use this. Like anything flashy, be careful not to use it excessively. An example would be our site preview icons that we sometimes use in our articles, like the one below, but you can also use it for much smaller images as well as for different effects, not just necessarily glows or shadows.
2) Semi-transparent backgrounds
One simple technique would be to create a 1x1px image with a single pixel of any color at a certain level of transparency. Then you can set this image as the background of a content module. Apply this type of background to a content box in a page that has an ornate full page background, and you could prodcue an effect very similar to what YouTube profiles allow for customization:
While it looks cool, be sure not to over do it. For a website layout, the above example would definitely be over doing it, but in YouTube's case, you wouldn't expect such high design standards for a profile design anyway. Also keep the level of transparency low. Keeping the text legible is extremely important. Lastly, this is a great alternative to using CSS to change the transparency of the entire content box (including the text). This simple technique that will do it only for the background.
3) Overlayed Text
You can also use the PNG-24 image format to provide a semi-transparent text background for text placed over an image. We used to use this technique for our homepage news updates.
Text Overlapping an Image |
Click here to see the original background image without the overlay.
Important Tip
Lastly, one should also note the format is supported by the latest version of the major web browsers, but it's a relatively new format that you may still get an occasional visitor without support for 24-bit PNG images. When that occurs, the image is simply displayed with a default background color behind transparent or semi-transparent pixels, usually gray.
Forum Board:
Comments
Perhaps we can get something similar to lightbox or fancybox on IceCaves? that way large pictures that need to be expanded (like the second one) can be done in the light/fancy box without having to be opened in a new page?
My Sites: 1 | 2 | 3 | 4 | 5 | 6
Perhaps, although I'm not sure how well it would behave in mobile browsers and if it might slow down the site. I look into it, thanks for the suggestion!
Perhaps, although I'm not sure how well it would behave in mobile browsers and if it might slow down the site. I look into it, thanks for the suggestion!
The only problem might be mobile.. I don't think it's slows down the site, as I don't think the script loads until after the page does - but play around and see how it works :)
My Sites: 1 | 2 | 3 | 4 | 5 | 6
I HATE THOSE. Please, not light/fancyboxes.
Yay, Anna!
AnnaNeo
I personally don't like them because linking to the original image is just so practical and fail-safe. Lightboxes I find are the most useful when there are multiple images that you can scroll through in a gallery-like environment. Rarely would this apply for our blogs and tutorials I'm guessing.
Lol, I guess I like using them in my tutorials coz I often use a lot of images, and it makes it easier to see. I guess you don't really need to tell users to click on the images, coz they can just figure it out for themselves
My Sites: 1 | 2 | 3 | 4 | 5 | 6
But linking to the larger image in a new tab/window doesn't seem exactly right or professional either.
Jenny-Jen-Jen :D
Bloggity: www.windymill.net
Web-Design Portfolio: www.jenny-aster.net