Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

share|improve this question
add comment

5 Answers

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.

share|improve this answer
    
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 '12 at 2:43
    
Here is a link to what I am referring to. i.minus.com/j6ol5ClstDbiI_e.jpg –  evan Oct 12 '12 at 2:44
    
That's correct. There's no such thing as a non-rectangular image. –  Scott Oct 12 '12 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 '12 at 11:30
    
@joonas thank you! –  evan Oct 15 '12 at 19:40
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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