PNGs are one of the most useful image types in the web design world, mostly because of their transparent ability. Most designers use them to create a drop shadow on an item and allow the background color surrounding the PNG to show through the shadow regardless of the background’s color. I began to reverse engineer a button thinking of what the shadows and reflections would look like without color. I set a color to the canvas layer and then began drawing gradients that were transparent over the top of it to creat the shadows and reflections I desired. Once I had a design that I liked, I put it into the HTML. That brought on this tutorial.

(more…)