Transparent PNG Mask
January 30th, 2008
A step-by-step tutorial on making transparent PNG masks
This post is not a “reinventing the wheel”, claim to fame type of deal, but rather more of a giving back to the community type. Some of you, if not most are probably aware of this technique or at least have been exposed to it and never even known…
I first learned of using “Knocked-Out” PNG masks after reading Web Standards Creativity last year, and was blown away by the simplicity and scalability this effect has to offer. I might be a little behind the times, seeing as Dan Cederholm wrote a similar article using GIF’s back in 2003 that is definitely worth taking a look at.
Setting up your image in Photoshop
1. Open up the image you wish to mask
2. Make sure your image is desaturated and adjusted to pure “black” & “white”
3. Create a new layer underneath your image, and fill it with the background color of your site (or the element it is located in), in this case I chose “#F1F0D1″
4. Select the layer which has your image on it, then from the top menu navigate to Select > Color Range
5. Within the Color Range dialog window, click on the “black” area which is your image, and click “Ok” (this should give you the marquee selection around your image)
6. Turn the visibility off for your image (the eye next to the layer) then click on the layer beneath your image (the one with your background color) and press the “delete” key on your keyboard
7. Turn the visibility off for the “background” layer
8. In the top menu, navigate to File > Save for Web then chose “PNG-24″ from the drop-down and click “Save”
Create your HTML
In your favorite text editor, create a new HTML document similar to the following (name it whatever you want):
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<title>PNG Background Test</title>
<link rel=”stylesheet” href=”css/png-test.css” type=”text/css” media=”screen” />
</head>
<body>
<div id=”testDiv”>
<a href=”http://ifohdesigns.com/”><img src=”png-mask-final.png” alt=”Testing out PNG background colors!” /></a>
</div> <!– END #testDiv –>
</body>
</html>
Create your CSS
In your text editor of choice create a new CSS file
#testDiv img {
background: #000;
border: none;
}
#testDiv a:hover img {
background: #333;
Our Final Results!
See it in action: http://ifohdesigns.com/tutorial-files/png-test.html
What about IE 6?
You were probably saying to yourself at the start of this, “what about IE 6?”. Well, IE 6 sucks, so tell your users to get a better browser!
Not quite, but in all seriousness, we need to get this going for the inferior individuals.
So, we have a few options. First we can use one of the nifty conditional statements Microsoft has so graciously provided us with, or we can use a scripting method of choice to alter the DOM to our liking.
If you choose to use conditional statements, then you can offer a GIF version for your IE users, or depending on the case, use Microsoft’s AlphaImageLoader filter to accomplish the desired results. The only drawback to this method is you will have to manually input the image source in the CSS file, which could become a pain when making changes.
DOM Scripting can be scary if you do not know what you are doing, so this method is not for everyone. Fortunately, for those who do not know much about it, there are some neat scripts out there that with little to no effort at all can help you achieve this goal.
- Posted at 3:08 pm in tutorials
-
Leave a comment
