How to make a puzzle from a photograph? Photoshop lesson
Dear Colleagues! Dear friends! You and I work at school, in the garden at a time when few people are interested in paper illustrations. Modern children enjoy playing computer games and have tablets. Judging by their students, they really love interactive presentations and enjoy working on the interactive whiteboard. And I can no longer imagine a modern lesson without these technical means. I create a lot of presentations myself, not because the ones already created are bad, no. I just like to do everything myself. And my kids put together puzzles with great pleasure, be it a math lesson, a Russian language lesson, or literary reading. It all depends on the illustration, the tasks and the animation you add.
I bring to your attention a master class that will help you turn any illustration into a puzzle. Believe me, with this you will diversify your lesson, introduce into it an element of entertainment, clarity and problem-solving, because the child will need to put together a puzzle in order to get an answer to the question posed and consolidate existing knowledge. And sometimes you just need to relax. And so, today we will try to create a presentation - a puzzle based on a postcard
And we will get this puzzle
To work, we will need puzzle templates. I can provide them for you if you don't have them.
Let's get to work.
1. Open the program for creating presentations Power Point, open the slide, select Layout - blank slide
2. We will need a grid, so open the tab View and choose Grid, ruler.
3. Next step: press the right mouse button, select Background format.
4. Choose Figure-File
5. By pressing the button - File, select the drawing that you have prepared and which will be the puzzle.
(I prepared a postcard on the Desk)
6. Press the button Insert. The picture appears on the presentation slide
7. Now we need to cover the drawing with a rectangle so that it does not appear on the slide.
For this we choose Insert - Shapes - Rectangle.
8. We stretch it to cover the entire slide, thus covering the image on it.
9. Choose Shape Format - Fill - white color. Change the color of the rectangle to white.
10. Remove the borders of the picture. Ibid. Figure Format - Figure Outline - No Outline
11. Now it's time to insert the puzzle template. We must prepare it in advance. Open the template with the right mouse button - Copy
12. Insert the template into the Presentation - Insert
13. The slide should look like this
14. Now we stretch it beyond the boundaries of the template to the size of the slide.
15. Now right-click and select - Group - Ungroup
16. Press the right mouse button again and select Object format.
17. In the drop-down tab, select Background fill. You should see our drawing, and on it the contours of the puzzle.
18. Now you need to group the puzzle template so that it takes the frame of the entire picture. To do this, right-click on the figure and select Group -Group.
The puzzle is almost ready, only its parts, the puzzles, are grouped. All that remains is to ungroup them and you can work with the resulting puzzle as you wish: add animation so that the puzzles appear on the slide with the correct answer to the question you prepare: these can be riddles, numerical expressions, rules, vocabulary work - anything , at your request.
I want to show you how to add animation to a puzzle. you can do this in your own way, choosing the animation to your liking.
So
19. Ungroup (right button Group - Ungroup) to customize the animation.
Now the puzzle pieces are moving. 
20. Choosing Animation - Animation settings
21. Now we need to select the entire puzzle Add an effect
I chose - Entry-Departure. You can choose any one.
This animation will be for all puzzle pieces. But to work with a puzzle, we need the puzzle pieces to appear gradually, one at a time, during the completion of certain tasks. Therefore we choose
Start of effect - After the previous one.
Now it remains simple work: prepare slides for work.
On the left side of the presentation, select a ready-made slide and duplicate it as many times as there are pieces in the puzzle
I have 9, so I duplicate the slide 9 times
Now you just have to decide which puzzle you will start working with, choose this puzzle and remove the animation from it so that it is visible on the slide.
I left 1. And the rest from the first slide, all parts of the puzzle must be removed.
Now let's move on to the second slide: there is one piece of the puzzle, you must choose Another one. Any one can be chosen. I took the next one. From him too animation is being filmed, and the remaining parts are removed. Now you have 2 puzzles on the slide.
The same must be done with the remaining seven pieces of the puzzle.
That's it, your presentation - the puzzle is ready. Your kids will be delighted! Add tasks and make children happy.
We open the photo in Photoshop, and the first thing we need to do is create a copy of the background layer of this photo, in order to always have an unaffected original at hand. To do this, you just need to press the key combination Ctrl+J. If we now look in the layers panel, we will see two existing layers in it, a background and a copy:
It's good practice when working in Photoshop to name your layers with descriptive names. Layer names that give information about a layer may not be as important when you're working with no more than a few layers, but it's not uncommon to find situations where there are 50, 100, or more layers used in a single Photoshop document, and if all of your layers have names like "Layer 1", "Layer 56" or "Layer 83 Copy 4", you will have some difficulty.
For an image measuring 900 by 600 pixels, I applied the following settings:
Texture - Puzzle
Scale - 100%
Relief - 9
Light - Top Right
The parameters are shown in the picture:
Click OK to apply the filter action. This is what my working document looks like now:
The main effect of the puzzle is complete, but let's go ahead and remove some of the elements, as if the puzzle was still under construction. To do this we need the Pen Tool:
Using the "Pen" we will make a selection around the individual parts of the puzzle, because... It is with the “Pen” that it is easiest to construct curved contours, much more convenient than, for example, with the tools of the “Lasso” group (Lasso Tool or Polygonal Lasso Tool).
Select a separate puzzle and build a contour like this around it, use the “Pen” in the “Paths” mode:
Once you've finished creating the outline, convert it to a selection by pressing Ctrl + Enter:
Now let's cut the selection onto a new layer (note, not let's copy, A let's cut it out), to do this press the combination Ctrl+Shift+J. The Layers panel now looks like this, note that a white area has appeared on the “Pussle” layer, this is a cut segment:
Let's select another arbitrary segment and simply delete it by pressing the Delete key:
Remove the selection by pressing Ctrl+D.
This way you can remove or move multiple puzzle pieces.
And to complete the effect, we will make the border of the puzzle/outlined by the edges of the puzzles. To do this, use the “Pen” to outline the entire picture, as shown in the figure. The boundaries of the outline are hard to see in the screenshot, so I outlined the outline with an orange line:
Convert the outline into a selection (Ctrl+Enter), invert the selected area (Ctrl+Shift+I) and delete the excess (Delete). As a result, you will get something like this:
Now all that remains is to change the background to your taste. I applied the standard Pattern Overlay layer style to the "Background color" layer with the pattern from the Photoshop Starter Kit and a scale of 50%.
Well, to add volume, let’s give the “Puzzle” layer a “Shadow” layer style.
Additionally, I had to clean up the artifacts on the "Puzzle" layer crash using
layer masks.
This is what I got as a result:
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:
Original photo
And here's what it will look like as a puzzle:
Photo after creating the special effect
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. On this 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 simplest way make a copy - 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:
The 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 you 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, we will 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). IN currently The “Puzzle” layer is 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):
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:
The Fill dialog box appears. In the Contents option at the top of this window, select the color Black and click OK, it will close.
You can't see the change yet because the "Puzzle" layer is currently hiding everything else from view, but the thumbnail for "Layer 1" in the Layers panel shows that it is now filled with black:
Layer 1 thumbnail filled with black
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 a “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 Photoshop versions. 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, specific name 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.
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 will 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):
When you click OK, the dialog box will close and the texture will appear on your photo. Here's what we got:
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:
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 puzzle piece 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:
The selection is cut from the "Puzzle" layer and placed on its own layer, which appears in the Layers panel above the "Puzzle". The piece now sits on the top layer, which Photoshop again names "Layer 1." We will 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. Run Photoshop tool Free Transform 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:
When finished, click OK and the Layer Style dialog box will close. Here's what our photo looks like after we've done the shadow:
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:
Select the “Puzzle” layer
Step 17: Using the Pen Tool, draw an outline around another puzzle piece
In the same way, trace another piece of your choice with the Pen Tool:
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:
Step 19: Delete the selected area
We will simply delete this piece of the puzzle by pressing Delete on the keyboard. The piece will disappear, and another hole will appear in the “Puzzle” layer, through which the black background color is visible:
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.
This is what our puzzle looks like without a few pieces:
Step 20: Trace around the edge of the puzzle (optional)
The last steps are not necessary, but personally we want to make an interesting frame by removing the puzzle pieces that fall on the border of the frame. If you want to do the same, you need to use the Pen Tool to draw a continuous outline along the border of those elements that run along the border of the frame, like mine. Since this outline is not very visible in the screenshot, we will highlight it in yellow:
Step 21: Turning the Path into a Selection
When finished, press “Ctrl+Enter” (Win) / “Command+Return” (Mac) and make a selection from the outline:
By pressing “Ctrl+Enter” (Win) / “Command+Return” (Mac) we made a selection from the outline
Step 22: Invert the Selection
Since we want to remove the puzzle pieces along the edge, we need to select them. And at the moment we have everything selected except them. So let's invert the selection, that is, remove it from the area that is currently selected, selecting what is not currently selected. To do this, open the Select menu at the top of the screen and select Inverse.
Now all the pieces lying along the edge are selected:
Step 23: Removing the Edges
Now we have selected those puzzle elements that run along the edge. Making sure that the “Puzzle” layer is selected in the Layers panel, delete them using the Delete button. To remove a selection outline, press Ctrl+D (Win) / Command+D (Mac).
If you think a white background would be better than a black one, select the “Background color” layer and select Fill from the Edit menu at the top of the screen. A dialog box will open. In the Contents option, instead of black, select White and close the window by clicking OK.
To change the background color to white, open the “Background color” layer and select the Fill command in the Edit menu, and in the window that opens, select White in the Contents option
The background turns white:
Step 24: Add a shadow from the entire puzzle (optional)
This is only necessary if you have changed the background color from black to white. We suggest adding a light shadow from the puzzle. If your background is left black, the shadow on it will not be visible, so you can skip this step. To make a shadow, select “Puzzle” in the layers panel, then click on the Layer Style icon, which is located at the bottom of the layers panel, and select Drop Shadow from the list:
Go to the “Puzzle” layer, click on the Layer Styles icon and select “Drop Shadow”
The Layer Style dialog box will open again, with the Drop Shadow options in the middle column. We lower the Opacity to 60% so that the shadow is not too catchy, uncheck the Use Global Light box, and set the Angle value to 120°. The remaining options can be left as they are:
When finished, click OK and the Layer Style dialog box will close. That's all! By adding a shadow to the puzzle, we finished working on the special effect:
Source - photoshopessentials.com
