I have unique shapes for my menu background, the problem is that the .png's are linked in the transparent area. I am looking to crop the canvases of these images in Photoshop to their exact unique outline. I need to remove the transparent area.

Here is a link to my image to help illustrate.

enter image description here

5 Answers 5


You can not.

All images, all of them, are rectangular. There's no such thing as a non-rectangular image.

The only solution is a rectangular image with transparency in the areas where you do not want color.

  • wow, that is crazy. so if I wanted to have each one of these rays be images (I have a jQuery effect I want to use). So I won't be able to link them, because the transparent area will be on top of the image below it?
    – evan
    Oct 12, 2012 at 2:43
  • Here is a link to what I am referring to. i.minus.com/j6ol5ClstDbiI_e.jpg
    – evan
    Oct 12, 2012 at 2:44
  • That's correct. There's no such thing as a non-rectangular image.
    – Scott
    Oct 12, 2012 at 6:31
  • 1
    @ewk53 Well, there are Image maps in html, or one thing that came to mind was that you could save the images horizontally, so that the current left side would be aligned with the bottom of the document. Then you could pile them up with css and use css3 rotate to align them ( as a proof of concept: jsfiddle.net/lollero/fJHD8/1 ).
    – Joonas
    Oct 12, 2012 at 11:30

The simplest solution would be to use a 24 bit PNG for each of your images. Just define the masks in Photoshop and select 24 bit PNG as the output option in Save for Web.

Scott's right in that there's no way to create a non-rectangular image, but with the white area's masked out, there's no real way to tell that the images are squares.

The more complex solution would be to create a canvas version of the image. I don't have a ton of experience with them, but seeing as they're generated by the browser itself and are vector based, I'd believe that they'd do whatever you need them to. The disadvantage there would be browser compatibility.

Here's a link to a fairly comprehensive tutorial on the Canvas element.


Since you mention jQuery, you can probably rotate the images.

You save the images in such a way that you have the least white space within the bounding rectangle, and then rotate that stored image to the desired display angle using jQuery.

These hypothetical composited images should probably be static images rather than composed using jQuery effects, UNLESS they are completely random and/or dynamic. Image processing on the client side is great for you, but is potentially a performance and rendering nightmare on certain client machines.


There are a few options for you:

  • Canvas and SVG for the shape. Could then use a simple javascript to create the link.
  • Flash depending on where the image is and the overall website design and interface
  • ImageMap (http://en.wikipedia.org/wiki/Image_map)

I would look into one of these three, decide which works best and give it a shot. If you then get stuck you'd probably be best to ask on the UX exchange.


What you want to do is to save the image with transparency. Then overlay the other images you have with an offset relative to each other.

In html you can create a div with the size of one image and style position to relative.

Then add the images inside this div and position them using position style absolute.


<div style="position:relative;width:100px;height:100px;" id="effectforJQ" >
    <img src="myimage1.png" style="position:absolute;left:0px;top:0px;" alt="" />
    <img src="myimage2.png" style="position:absolute;left:10px;top:0px;" alt="" />
    <img src="myimage3.png" style="position:absolute;left:0px;top:10px;" alt="" />

This will overlap the different pictures for you. You might (depending on which effect) apply your jQuery to the div. Hope this helps! (of course, change the sizes and position according to your needs).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.