3000+ Top Quality Design Resources for only $7

PNG Masking: How to Dynamically Shape Any Image on Your Website

PNG Masking: How to Dynamically Shape Any Image on Your Website

Since the release of Roundfolio, I’ve received a lot of requests in regards to the round gallery images and how they were created. The round thumbnail is really just one transparent PNG image overlaying each thumbnail in the gallery. You typically see PNG images used as subtle shadows or image borders, but with Roundfolio we took it a step further and created a full transparent mask to change the shape of the thumbs. Let’s take a closer look at how this is done, and a bit of HTML/CSS to make it all work.

Creating the Separate Layers in Photoshop

In Photoshop we can create the layers we need that will later overlap via CSS.

See the example below to understand the visual hierarchy.

The first two images will need to be saved as transparent PNG files. To do this in PS, select ( File | Save for Web and Devices ) from the new window choose “PNG-24″ from the drop down in the upper right corner. Then make sure that “Transparency” is checked. Click to save in your website images directory.

Each of these images should be the same width and height, in this case a 187px square. I saved my images as “gallery-thumb.jpg” for the thumbnail, “gallery-shadow.png” for the transparent mask, and “gallery-rollover.png” for the rollover image.

Now let’s take a look at the HTML
<a href="images/gallery-full.jpg" class="item">
<span class="rollover"></span>
<span class="gallery-shadow"></span>
<img src="images/gallery-thumb.jpg"/>
</a>

You’ll notice we have a typical href tag, with a class of “item”, linking our thumbnail image to it’s counterpart, the full image file. What’s different about this block of code is that there are other elements between the open and closing href tags. The two span tags will house our mask and rollover state.

Let’s peek at the CSS to see how it works.
a.item{
position:relative;
display:block;
height:187px;
width:187px;
float:left;
}
a.item .gallery-shadow{
display:block;
position:absolute;
top:0%;
left:0%;
width:187px;
height:187px;
background:url(images/gallery-shadow.png);
}
a.item .rollover{
display:block;
position:absolute;
top:0%;
left:0%;
width:187px;
height:187px;
background:url(images/gallery-rollover.png);
}

This CSS is pretty straight forward. Basically we are setting our span elements to “block” giving them a matching width and height and setting their positions to match as well.

I’m using a small bit of Javascript in the header to control the rollover. Let’s take a quick look.

<script type="text/javascript">
	$(document).ready(function(){
	$(".rollover").css({'opacity':'0'});
	$('#gallery a.item').hover(
		function() {
		$(this).find('.rollover').stop().fadeTo(500, 1);
		  },
		   function() {
		   $(this).find('.rollover').stop().fadeTo(500, 0);
		  }
		 )
		});
	</script>

Now that you’ve seen how easy it is to recreate the effect used in Roundfolio, let’s take it a step further. Let’s try using a brush stroke as our mask image. I’m using a brush from the Dry Paint Strokes brush set here at WeGraphics.

Here are my three images laid out in Photoshop. Remember these images have to be the exact same width and height.

As you can imagine this creates a pretty cool effect.

Click here to check out my results.

Conclusion

This is one of those tutorials that is only limited by your imagination. Try different shapes, patterns, and brushes to create your PNG masks, and share your results in the comment field below.  You’re no longer bound by the square edges of typical web design!

Related Posts

high quality vectors

2500+ premium design resources for only $7!

We do the best to provide high-quality products that you can use in your commercial projects.
You bet!

take a tour

Nathan Brown

Nathan Brown is a graphic designer who loves working with various media. He combines traditional art styles with a little experimentation and digital flare. Nathan's works have contained everything from ink and paint to leaves and a box of dirt. Everything is fare game when it comes to his approach to art. Nathan lives in Austin, Texas where he has been working as a designer for 10 years.

18 Comments

(+add yours)
  1. Amazing post ! I want more !!

  2. Thanks for nice tip :)

  3. great effect! thank you for the tut :)

  4. Well done and informative.

  5. Robin

    This just in: monkey fools learn that PNGs can contain an alpha mask, and have to be instructed on how to use it.

    • foljs

      This just in: idiot mocks others for learning things, because he obviously knew everything ever before he learned it…

      • awesome comeback haha

  6. Jerkson

    What about non-solid backgrounds?

  7. Thank you guys. You saved my day.

  8. I had the knowledge to do this, but not the idea. I think you were right when you said that this is one of those tutorials that is only limited by our imagination.

    Thanks for this article!

  9. Nice tut man. Thanks for sharing. It will surely make my thumbs look a bit better.

  10. Hi, good tutorial thanks, but you forget to mention that we might need to add the latest JQuery JavaScript :

  11. Jackie Barry

    I have a website with webs.com & I tried to use this technique and its not working :(. Am I doing something wrong? Or is it because webs.com is different from an official website? If you are not firmilar with webs.com… basically all the codes go on one page, theres no seperate style sheets or anything, everything goes on the index page. If im not mistaking, thats different then other sites right? Here is my edit of this tutorial – http://site-13303861278783371055607763105147.webs.com/test3.htm

    I just tried to view this page using Internet explorer instead of my usual browser, google chrome, and it looks messed up now in a different way. Lol So Im assuming I did something wrong? Or maybe it has something to do with the java script ? Sorry for my rambles :)

    • Jackie Barry

      I actually think I figured it out…. the only thing is, my version of this technique does not have the ” + ” when you hoover over the image? Is that a seperate code or should It be working? I am more than happy with the results I have though, very cool technique! Thanks again :)

      • Jackie Barry

        Woops! I figured it out haha! You have to add the plus sign when you make the rollover image in photoshop. Got it! Sorry for all the comments lol I should really make sure before I ask a million questions haha! Thanks for the tut :)

  12. This is very attention-grabbing, You’re an excessively skilled blogger. I’ve
    joined your feed and look ahead to looking for more of your wonderful post.
    Also, I have shared your website in my social networks

  13. Myke

    Let’s stretch our imagination further. Shall we? How about a thumbnail display; when hover, the thumbnails pic wrapping a ball or a sphere behind it? That would be an awesome animation. wouldn’t it?
    Thanks for nice tuts.
    Enjoy it like always!
    I a noop in designing thou
    Myke

  14. i really like it , thanks for sharing with us

Leave your comment

© Copyright 2010 WeGraphics.net - All rights reserved. Design and code by WeGraphics Team