Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm a bit of a newbie when confronted with photoshop and Fireworks etc, I much prefer drawing mountains in paint.

However, I've a wonderful idea for a site navigation element but I'm having difficulties.

I have the original image and an image the size and shape of a jigsaw piece.

I need to make the original image the same size and shape as the jigsaw piece image so that I can map the coordinates onto it for the html markup.

Is this possible and if so could someone give me an idiots guide as to how I might achieve it please?

Many thanks in advance.

share|improve this question
yes, both photoshop and fireworks allow you to resize an image to match the size of another. Use the transform tool/feature. – DA01 Dec 27 '13 at 1:17

Anything for the web will be rectangular, so your puzzle shape should be a png (or svg) with transparency. Set up a photoshop file with a mask and export your image variations from there.

share|improve this answer
I'm using an image map so the clickable area within the image itself won't be rectangular. It's a really cool feature, combined with jQuery and it's amazing :) It's the "setting up a mask" etc that throws me. – null Sep 27 '13 at 21:08

Your Answer


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.