In this tutorial we'll look at a simple way to create a puzzle from a photo in Photoshop. It's good to know that Photoshop has a special Texturizer filter with a free texture created specifically for this purpose. In our tutorial we will use the Pen Tool.

We will process this photo:

And here's what it will look like as a puzzle:

Let's start!

Step 1: Create a Copy of the Background Layer

Having opened the photo in Photoshop, the first thing we will do is create a copy of the Background layer, which currently contains our photo. At the moment, this is the only layer. Having created a copy of it, we will be able to perform any actions without harming the original, which will be stored in the Background layer, to which we can return if necessary. The easiest way to make a copy is to press Ctrl+J (Win) / Command+J (Mac). After that, we have a second layer in the layers panel. The Background layer with the original is at the bottom, and the copy, automatically named "Layer 1", is located above:

Layers panel with a new layer “Layer 1″ above the Background layer.

Step 2: Let's name the new layer “Puzzle”.

When working in Photoshop, it won't hurt to get into the habit of giving your layers meaningful names. While you only have a few layers, this may not seem particularly necessary, but sometimes the work accumulates 50-100 layers or even more, so if they were all called "Layer 1", "Layer 56", "Layer 83 Copy 4" , you may get confused. Since in “Layer 1” we will create a puzzle, then by clicking directly on the layer name, let’s call it “Puzzle”:

Change the layer name from “Layer 1” to “Puzzle”

Press Enter (Win) / Return (Mac) to enter the new name.

Step 3: Below the “Puzzle” Layer Add a New Blank Layer

Now let’s add a new layer under the “Puzzle” layer (it will be placed between “Puzzle” and Background). The “Puzzle” layer is currently selected in the Layers panel. This is indicated by its blue backlight. Typically, when you add a new layer in Photoshop, it will automatically position itself above the selected layer, so if you click the New Layer icon at the bottom of the Layers panel now, the new layer will appear above the “Puzzle” layer. Click on the New Layer icon while holding Alt (Win) / Option (Mac):

Click on the New Layer icon while holding Alt (Win) / Option (Mac)

The Ctrl/Command keys give the command to add a new layer under the one that is currently active. A new empty layer appears in the Layers panel. It is again called "Layer 1" and is located between the "Puzzle" and Background layers:

A new empty layer has appeared between "Puzzle" and Background

Step 4: Fill the New Layer with Black

This layer will become the background for our special effect, and we will set the background color to black. At least for the near future. In other words, fill the layer with black. Photoshop has a special command for this, it's called Fill. It can be found in the Edit menu at the top of the screen. Once you open it, select Fill:

Let's name the new layer “Background color”

Step 5: Go to the “Puzzle” Layer Again

Now we will start drawing the puzzle itself, but for this we need to select the appropriate layer. We now have the “Background color” layer active, but we need “Puzzle”, so click on its name in the layers panel:

Select “Puzzle” in the Layers panel

Now we are ready to create the puzzle!

Step 6: Open the “Texturizer” Dialog Box

As we said at the beginning of the tutorial, thanks to the presence of a special texture in Photoshop, we will have to do practically nothing. Although this texture is already on your hard drive, it is not yet loaded into Photoshop, at least not by default. We'll have to do this ourselves, but first we need to open the Photoshop Texturizer filter, so from the Filter menu at the top of the screen, select Texture and then Texturizer:

Open Filter > Texture > Texturizer

Step 7: Load the “Puzzle” Texture

A large Texturizer dialog box will open, with a preview window on the left and filter options on the right. You need to load the “Puzzle” texture that appeared on your hard drive when you installed Photoshop. To do this, click on the arrow to the right of the texture selection window - a menu will appear with a single option: Load Texture. Select it:

Click on the arrow to the right of the texture selection window and select the “Load Texture” option

The Load Texture dialog box will open where you can select a texture. The “Puzzle” texture we need is located in the Photoshop directory - where you installed it. On a PC (Windows), by default this is drive C. Open it, and then the Program Files folder. In it you will find an Adobe folder, and within it a Photoshop folder. The exact name of the folder depends on your version of Photoshop. If you are working in Photoshop CS3, installing it in the default folder, then the program folder will be located at C:\Program files\Adobe\Photoshop CS3.

If you have a Mac, things are a little simpler. The Photoshop folder is located on your hard drive in the Applications directory. But again, the exact name of the folder depends on the version of Photoshop.
Find and open this folder. Inside it there is a Presets folder. Open it and find the Textures folder. It contains all installed Photoshop textures. The choice is quite large, but for our special effect you will only need the Puzzle texture. Click on it and download by clicking the Load button.

Find the Texture folder in the Photoshop directory and select the Puzzle texture

Step 8: Adjusting Texture Options

Once the Puzzle texture is loaded, Puzzle should be selected in the Texture option of the Texturizer dialog box. If for some reason this does not happen, select the Puzzle texture from the list. Then, using the preview window on the left, edit the texture options. The settings primarily depend on the original photo and the desired size of the puzzle pieces. We want to make the puzzle pieces as large as possible, so we'll increase the Scaling option to 200%. The Relief option, which is located below, determines the relief of the puzzle pieces. Let's set the value to 6. Again, you can do it differently. And finally, the Light option, which determines the location of the light source on your puzzle. Select the top right corner (Top Right):

We have done the main thing, but we suggest removing a few elements so that it seems as if the assembly is still in progress.

Step 9: Select the Pen Tool

We've reached the part of the tutorial where knowing how to use the Pen Tool in Photoshop is important. This is due to the fact that we have to trace individual pieces of the puzzle, and they are very prominent. You can try to select them using another tool, such as the Lasso Tool or the Polygonal Lasso Tool, but this will most likely look sloppy. And the Pen Tool is specially designed for drawing curved lines, and the result will be much better.
If you have already mastered the Pen Tool well, then this lesson will not be difficult for you, because once you understand how this tool works, working with it is very simple. Before you can use the Pen Tool, you need to select it, so either grab it from the Tools panel or simply press the letter P on your keyboard:

Selecting the Pen Tool

Step 10: In the options panel, select “Paths”

With the Pen Tool selected, make sure Paths is selected in the Options Bar at the top of the screen, since we'll be drawing a path, not a vector or pixel-based shape:

In the options panel, select “Paths”

Step 11: Draw an outline around a puzzle piece

Using the Pen Tool, trace any piece of the puzzle. It's as if we're cutting it out of the picture, creating the feeling that it's hovering in the air above the picture and is about to snap into place. Choose any piece. Let's take the one that is located above the boy's right eye (for the viewer it is on the left). Trace it, adding anchor points and directional markers until you have a complete outline. You can zoom in by pressing Ctrl+Spacebar (Win) / Command+Spacebar (Mac) - the Zoom Tool is temporarily activated, and with a few clicks on the piece, you can enlarge it to a convenient size. Perhaps the outline is not very visible in the screenshot, so we will circle it:

Step 12: Turning the Path into a Selection

Once you've drawn an outline around one piece, press Ctrl+Enter (Win) / Command+Return (Mac). Now the solid path has turned into a selection path:

Step 13: Transfer the selected piece to a separate layer

Let’s cut out the selected piece of the puzzle from the “Puzzle” layer and move it to a separate layer, after which a hole will remain in its place in the “Puzzle” layer. The “Puzzle” layer should still be selected in the Layers panel. From the Layer menu at the top of the screen, select New and Layer via Cut:

Open Layer > New > Layer via Cut

The selection is cut from the “Puzzle” layer and moved to its own layer, which appears in the Layers panel above the “Puzzle”. The piece is now placed on the top layer, which Photoshop has again named “Layer 1″. We'll give it a new name - "First puzzle piece":

The circled puzzle piece is now on its own layer, above the “Puzzle” layer.

Step 14: Move and Rotate the Puzzle Piece Using Free Transform

Let's arrange the puzzle piece as if it is about to fall into place. Launch Photoshop's Free Transform tool by pressing Ctrl+T (Win) / Command+T (Mac) and a rectangle with handles will appear around the puzzle piece. Click on the outside of this rectangle to rotate it. Then click inside the rectangle and use the mouse to move it to another location. Because you want it to be clear to the viewer where this piece belongs, don't turn it too much or move it too far away.

Notice that the area where this piece was previously is now filled in black. This is due to the fact that we made a hole in the "Puzzle" layer, through which the black "Background color" layer shows through:

When you're done, press Enter (Win) / Return (Mac) to accept the changes and exit Free Transform.

Step 15: Add a Shadow

To make the cut out piece look more voluminous and appear to be floating in the air above the puzzle, you can add a shadow. Click on the Layer Style icon at the bottom of the Layers panel and select the Drop Shadow option from the list that appears:

In the list of layer styles, select “Drop Shadow”

The Layer Style dialog box will open, with the Drop Shadow options in the middle column. Let's lower the Opacity of the shadow to about 60% so that it isn't too dark. Uncheck Use Global Light and set the Angle to 120°. Increase the Distance to about 16 pixels, and the Size to about 16 pixels. As usual, these indicators may vary in each specific case:

Step 16: Go to the “Puzzle” Layer Again

We cut out one piece and, as it were, took it out of a puzzle. I suggest removing the other one entirely. We should have the “Puzzle” layer selected - click on its name in the layers panel:

Step 18: Turning the Path into a Selection

Just like last time, press “Ctrl+Enter” (Win) / “Command+Return” (Mac) and make a selection from the outline:

To remove a selection outline, press Ctrl+D (Win) / Command+D (Mac). This is what we got after removing one piece:

Remove a few more pieces, either leaving them floating above the photo (Steps 11-15) or removing them completely (Steps 16-19). As you cut or delete each new piece, always return to the “Puzzle” layer.