More of my PNG-24 goodness
Posted: 2003-10-25 07:26pm
You may have noticed the new picture in my signature. If you're cunningly perceptive and not using Internet Explorer for Windows, you'll also notice that I didn't use any cheap tricks like making an image with the same background color as the board's or something like that. You can paste that image on to any background color and it will appear antialiased.
Like my avatar, I pulled this off with PNG-24. PNG-24 allows for 8-bit masking, which means that I can tell the viewer to display a certain pixel at one of 8 levels of opacity. Unlike my avatar, which was rather easy to do, this required a little more creativity and refinement to get the image properly sharp. At first, I rendered the equation using pdflatex at 36-point text and then scaled it down to an appropriate size to work with, as I didn't want it overflowing the horizontal scroll on people's browsers. But this produced a rather blurry final output, but I posted it anyway because I had to go off and do some drinking last night.
So I came back and refined the method a little. I kept the 36-point version, but I viewed it in Adobe Reader 6, which has sharper antialiasing than most other viewers, especially at smaller sizes. I picked a good view size (I think I settled on about 45%) and snapped a screenshot. I then opened the screenshot in Photoshop and began working. I cropped it appropriately, and copied the equation plus white space to the clipboard. I then made a new Photoshop file of appropriate size and then created an alpha channel in that file. I pasted the clipboard contents into the alpha channel and then inverted it. Then I just filled the regular channels with black, and the alpha channel basically "carved out" what it needed from the block of black pixels. Save as PNG for web with transparency, and we're in business.
Again, Internet Explorer for Windows users will not see the image as it is meant to be seen, because IE for Windows sucks ass. It has no PNG-24 support, so it gets confused by the presence of an 8-bit alpha channel and displays the image on a gray background with a 2-bit alpha channel. So you'll see the equation, but it won't be anti-aliased at all. You'll see it as if the alpha channel has only white pixels where various levels of gray should be.
Like my avatar, I pulled this off with PNG-24. PNG-24 allows for 8-bit masking, which means that I can tell the viewer to display a certain pixel at one of 8 levels of opacity. Unlike my avatar, which was rather easy to do, this required a little more creativity and refinement to get the image properly sharp. At first, I rendered the equation using pdflatex at 36-point text and then scaled it down to an appropriate size to work with, as I didn't want it overflowing the horizontal scroll on people's browsers. But this produced a rather blurry final output, but I posted it anyway because I had to go off and do some drinking last night.
So I came back and refined the method a little. I kept the 36-point version, but I viewed it in Adobe Reader 6, which has sharper antialiasing than most other viewers, especially at smaller sizes. I picked a good view size (I think I settled on about 45%) and snapped a screenshot. I then opened the screenshot in Photoshop and began working. I cropped it appropriately, and copied the equation plus white space to the clipboard. I then made a new Photoshop file of appropriate size and then created an alpha channel in that file. I pasted the clipboard contents into the alpha channel and then inverted it. Then I just filled the regular channels with black, and the alpha channel basically "carved out" what it needed from the block of black pixels. Save as PNG for web with transparency, and we're in business.
Again, Internet Explorer for Windows users will not see the image as it is meant to be seen, because IE for Windows sucks ass. It has no PNG-24 support, so it gets confused by the presence of an 8-bit alpha channel and displays the image on a gray background with a 2-bit alpha channel. So you'll see the equation, but it won't be anti-aliased at all. You'll see it as if the alpha channel has only white pixels where various levels of gray should be.
