Free Materials For Teachers
Image©2018 ABS Screenshot of puzzle pieces on Jigsaw Planet arranged for a screenshot
Printable Puzzle Layout

While making an online puzzle, I stumbled on a quick way to make a printable puzzle at the same time! I’ve been making online puzzles for many years by uploading my photos to a website called Jigsaw Planet.

I like the site because making a puzzle is FREE. Though you can set up a free account, membership is not required to upload images and make puzzles.

It’s easy, too: Press Create in the top menu bar, upload your photo, and a few more clicks turn your photos into jigsaw puzzles! You can choose the number and shape of the pieces while creating your puzzle, and you have the option to allow or disallow rotation of pieces.

Once you’ve uploaded an image, either a photo or perhaps some student artwork, chosen the options you want to use, and clicked the Create button, the finished puzzle appears almost immediately, ready for use. Be sure to copy the link so that you can get back to your puzzle, and keep a running list of all your puzzle links.

Build A Puzzles Library

Jigsaw Planet has retained the same links to my (many!) puzzles even when they completely redesigned their site layout using a new version of html! That means you can build up a growing library of online puzzles and expect them to continue working over time. It also means you can count on being able to go back and make printable versions of your puzzles whenever you want.

Online Puzzle To Printable Puzzle

Image©2018 ABS Rufus Lemur in his open cockpit airplane as a puzzle, pieces lined up but not together
Untrimmed Screenshot

I was testing out a puzzle I had just created on Jigsaw Planet when I suddenly realized how easy it would be to make a printable version. In fullscreen mode, there is enough room to line up all the pieces in order, with a little bit of space left between them. Take a screenshot of that arrangement, and you have most of what you need for a printable version of your puzzle!

Wait, How Do I Make A Screenshot On…?

Just in case you aren’t sure how to make a screenshot from your computer, tablet, phone, or whatever, I’ve made a tip sheet with links to reliable help pages for most devices and operating systems. These help pages have instructions for capturing the entire screen, part of a screen, or a specific window, and some give hints for including drop-down menus in the screenshots. You can download this resource below.

Finishing A Printable Puzzle

Image©2018 ABS Screenshot of tip sheet to make a screenshot
Screenshot Tip

Load the raw screenshot into a graphics program, such as PhotoShop®, PhotoShop Elements®, the free Gimp application, or something similar and crop off the excess area around the puzzle piece layout. You’re left with a neat rectangle, easy to mount on a backing and cut into individual pieces.

What Image Size? The goal is to print the trimmed rectangle with the arrangement of pieces as large as possible, but not so big it won’t fit on any of the standard paper sizes your printer can handle. To resize the puzzle image, you need to know the current size of the cropped image.

My daughter Ellen has a good discussion about how to determine the dimensions of an image here, in a tip which includes a link to a free online resizing app.

The puzzle printout must be mounted on a stiff backing. Mat-board is a good choice, and you may be able to buy some scraps cheaply from a craft or picture framing shop. You also could use foam-board, cardboard, flexible plastic, or even card stock to stiffen the pieces. Cut the pieces apart, and you have a finished puzzle. If the pieces get torn or you lose one, don’t panic. Just go back to your saved screenshot, and print it again!

However many pieces you designated in making the online puzzle, you can later set the puzzle for any number of pieces and play it that way one time. This option also enables you to make screenshots of the same puzzle with several different numbers of pieces, so that you can print that puzzle in several levels of difficulty.

Download a detailed PDF tutorial on how to make these printable and digital puzzles at the foot of this page. I’ve also made online versions of this tutorial and those described below. The links are on this page, and you also can find them in Annie’s Tutorials Online.

Bonus: Templates, Tutorials, Color Code Reference

Image©2018 ABS Screenshot of example menu page with two image links
Image Links Page

Another option on Jigsaw Planet, still free, is to copy embed code for your puzzle, or to embed a thumbnail image that will serve as a link to a puzzle. That may sound so technical your head hurts, but I’ve made templates that you can use successfully even if you have absolutely no experience using code.

There is a download link at the foot of this page for a zip file with two html templates, detailed tutorials, and finished examples of how to use embed code . One template constructs a menu page with image links to the digital puzzles you’ve made. Users can choose a picture to open a puzzle and work it on the Jigsaw Planet site.

Image©2018 ABS Screenshot of custom puzzle display page made with display puzzle template
Embedded Puzzle

The other template displays one complete puzzle in a page you customize to be part of your own web page. That way students never have to leave the school site when they work puzzles online. There is even a way to combine these two templates, so that students can choose from a menu of thumbnail images and then work the puzzle on their school server!

You will need an application that can open html and save as html to customize these templates, but you DON’T need to know how to write html. It’s simply a matter of filling in the blanks, and there are only a few blanks, I promise. Then hand over the finished html document to the person who tends your school web page, and you’re done!

Image©2018 ABS Screenshot of color hex codes PDF
Color Hex Codes

Color Reference PDF

One option when getting embed code is to change the background color so that the puzzle always opens with your custom color as its background. You also have options to change the background and text colors of the menu and puzzle display pages that the two templates create. Idea: match the puzzle background and page background to the school colors!

For color changes, it’s helpful to have a quick reference from which to choose colors and copy their hexadecimal codes, so I made one for you. I’ve bundled the Color Hex Codes pdf along with the two templates, their tutorials, and the example files as a single zip file download, but you can also download this reference guide separately.

Image©2018 ABS Screenshot of Jigsaw Planet settings/background menus
Background Option

One more bonus: You can temporarily change the background color of any puzzle on Jigsaw Planet by using the Settings button (gear in the lower left) when the puzzle is open. That option may prove useful for students with visual limitations, but it also could facilitate making printable puzzles. Choosing a sharply contrasting color makes it much easier to cut around the edges of the pieces.

I hope you have fun making puzzles, both online and printable. This is a great way to get double use out of your digital photos. It’s also an easy way to convert a student’s artwork into a puzzle. What about making a birthday greeting and turning that into a puzzle? The printable version could even be wrapped as a gift!

Applications needed: Acrobat Reader, graphics app, web browser, html editor or other app that can save as html.
Subject area: Resources, Tips.
Level: Author.

Online Links-Activities

Jigsaw Planet link: Click Here. Make online puzzles free by uploading your photos or artwork.

Tutorials Printable and Online

QuickPrintablePuzzlesTutorial.pdf (2.1 MB) Quick Printable (And Online) Puzzles tutorial to print. Acrobat Reader.

Quick Printable (And Online) Puzzles Tutorial online The Quick Printable (And Online) Puzzles Tutorial online, ready to present to groups. (4 MB) Puzzle Display and Image Links html templates, Display Puzzle and Puzzle Image Links printable tutorials, finished examples, Color Hex Codes PDF, and How to Take A Screenshot PDF all in a single zip file. Acrobat Reader, web browser, html editor, graphics app.

Puzzle Image Links Tutorial online The Puzzle Image Links Tutorial online, ready to present to groups.

Display Puzzle Tutorial online The Display Puzzle Tutorial online, ready to present to groups.

ColorHexCodes.pdf (104 KB) Color Hex Codes reference document to print. Acrobat Reader.

Color Hex Codes Reference Guide online The Color Hex Codes reference guide online, ready to present to groups.

HowToTakeScreenshot.pdf (1.3 MB) How To Take A Screenshot tip sheet to print. Acrobat Reader.

How To Take A Screenshot Tutorial online The How To Take A Screenshot Tutorial online, ready to present to groups.

May 21st, 2018 at 2:02 am


To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image

Translate »