Red Button

Layers

  • show/hide
    H shine
  • show/hide
    lhs shine
  • show/hide
    rhs shine
  • show/hide
    bottom shine
  • show/hide
    top inner shine
  • show/hide
    bottom inner shine
  • show/hide
    btn centre
    ▼
    fx
  • show/hide
    btn inner
    ▼
    fx
  • show/hide
    deep inner shadow
  • show/hide
    btn main
    ▼
    fx
  • show/hide
    btn crater
    ▼
    fx

What's This?

This page demonstrates some work I did recreating a shiny red button. I have provided a photoshop-like layers panel alongside it so that you can click on the 'eye' to show or hide any given layer, and see how the Photoshop Document (PSD) was constructed.

What makes this really rather clever is that this works in exactly the same manner for users of Internet Explorer 6. Now, the 'techies' may be wondering why on earth I would bother going to such an effort for the most notorious, most commonly slated browser in the world? The reason is that this allows me to show-off not only my photoshop skills, but also my knowledge of JavaScript OO using prototype, the factory pattern, IE6 PNG transparency* and jQuery all at the very same time. Further technical explanation regarding JavaScript OO and inheritance using prototype can be found on this page.

If you're at all impressed, interested, or just feeling nice, use the bookmarking and sharing facilities at the bottom of the page to spread the word!


Get the PSD

*IE6 PNG transparency provided by Drew Diller.