Finished Puzzle
Making a interactive puzzle. 

First get a picture or graphic. I have mine pretty large, 680 x 520. 

We first have to cut the image up into some pieces. I have decided to make mine into 25 pieces. Makes it a bit harder to put together. You have to cut you image up into equal pieces, so go to view, image info and write down the size of your image. Once you do that, now divide that into however many pieces you want. You will want to divide the the measurement 680 by 5 and this will give you 136. Then divide the 520 by 5 and you will get 104. Those are the measurements we are going to use to cut up our image. Make sure you write these down, you will need them. 

First go over to your selections tool, double click on it and a window like this is going to pop up. 

First thing you will want to do is put 136 in the right blank, then put a 104 in the bottom blank. Like this. 

This tells the tool that you want the tool to start at 0 left, then go over to 136 right, then start at 0 top and then go down to 104 for the bottom. click okay and your image should have the marching ants around just the selection you told it to. 

Now go up to Edit, Copy, Paste as new image. You want to save this image, I saved mine as 1.jpg. Now go back to the selections tool and double click on it. This time in the blanks you will want to write these numbers. 

You see how the left and right numbers are different? This is telling the tool to start the selection at 136 (where we ended last time) and go over to 272, (which would be 136 x 2) Our numbers for the top and bottom did not change since we are still on the top row of the puzzle. Go to Edit, Copy, Paste as new image, save this as 2.jpg. 

For the next few slices on the top row of the puzzle keep adding 136 to the left and right numbers til you reach the end of your image.
When you are finished with the top row of the puzzle we are going to do the same slicing just changing the numbers for the top and the bottom, so your window should look like this. 

Notice how the top and bottom numbers have changed? Now we are going to put in those numbers for the second row. And you are going to still use the same numbers as you did with the top row. When I cut mine up, these were my numbers.
136, 272, 408, 544, 680
So my first image of the second row will be left =0, right =136, top=104, bottom= 208. 
Second image will be left= 136, right= 272, top= 104, bottom= 208 and so on until you are finished with that row.
You will replace only the left and right numbers for this row.
Now cut the second row of the puzzle. Remember, you are going to have 5 equal size pieces for the second row of this puzzle. 

I am hoping you all are getting the hang of how we are going to cut this image up.
Row 3, your settings will be this. 

And you use the same numbers for the left and right to cut it up as you did for rows 1 and 2. 

Row 4, your settings will be this. 

And you use the same numbers for the left and right to cut it up as you did for rows 1 and 2. 

Row 5, your settings will be this. 

And you use the same numbers for the left and right to cut it up as you did for rows 1 and 2. 

Again the numbers for the top and bottom have changed, and we will still use the same numbers for the left and right for all the pieces. 

Now you should have 25 pieces of the puzzle. 

Coding the Puzzle

Tutorial by Leigh

These tutorials are a ©copyright of Leigh.  They may not be reproduced or copied to any other website without written persmission of the author.  Please contact us if you have questions.  Tutorials @ Graphic Buds.

This tutorial was created October 1, 2000 by Leigh's Designs.
Please do not take any of it or reproduce it.