Crop canvas to unique outline of image in Photoshop

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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.

Ie:

<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="" />
</div>

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).