Using a Jigsaw Puzzle for Drag and Drop interactions

One of my associates came up with the idea to do a drag and drop puzzle interaction for a module. When we went to research it we found that getting the pieces of the puzzle from a photo was not easy. After much research and browsing we came up with a way to make our pieces and this is what I wanted to share with everyone. One requirement is Photoshop and the version is not important.
At this website http://www.designeasy.co/2015/05/free-puzzle-pieces-actions-for.html you can download a free add on for Photoshop that will automatically take you photo and put the pieces into separate layers. It give you many choices and the download comes with a pdf that has very easy instructions of how to use it. Run the add on and you have your pieces in layers.
Once you have the pieces into layers you go to File/Scripts/Export layers to files. You need to save in bmp or png format to erase the background later. It will not work with jpg format. Now that you have the pieces as an image you can make the white background transparent.
How to make white background invisible in Photoshop
1. Bring piece onto workspace.
2. Hit Control + J to make a copy
3. Click on the original background layer that is locked and delete it.
4. Go to Layer/New/Layer….click on OK in the dialog box that pops up. Now you have a transparent layer.
5. In the layers property box drag the new layer below the other layer to make it the background.
6. Select the Magic Wand Tool and click on the white part of the image and then hit delete. Now the background is transparent.
7. Save as a bitmap or ping and now you have a piece of your puzzle to import as an image to work with in Storyline. Use the drag and drop feature to put the puzzle together.
8. Hint: Before I save the piece in step 7, I crop the image down to the size of the puzzle piece. It makes it easier to work with on a slide.

You can be creative and use a photo of the learner or company logo
I hope this works for you as well as it did for us.