Masking the image

---

Now it's time to use the pieces to mask the puzzle image.

1. Open the file, puzzle_card_start.png from the Bonus Tutorials\puzzle folder in the Bonus Tutorial folder.

2. In Frame 1, select the mask piece, and cut it by choosing Edit® Cut or pressing Control+X (Command+X).

3. Select the puzzle image (don't double–click), and choose Edit® Paste As Mask.

4. Now add an Effect by clicking the Add (+) button in the Property inspector and choosing Bevel and Shadow® Inner Bevel. Leave the Flat Bevel selected; set its width to 3px and adjust the soft- ness to 3.

   Tip 

   To speed up the process of creating the puzzle pieces, save the bevel as a style. Click the Add (+) Effect button and choose Options® Save as Style. Name the New Style puzzle bevel, and make sure that only the Effects option is checked.

5. Click Frame 2 and repeat Steps 1 and 2. To add the effect, choose the puzzle bevel from the Add (+) Effects menu (or select it from the Styles panel if you made the style).

6. Repeat the process for all 12 frames.

7. When done (in Frame 12), choose Duplicate Frame from the panel's options, and click OK in the dialog to duplicate the frame after the current frame.

8. Select the masked puzzle piece, and choose Modify® Ungroup to remove the mask. Delete the mask piece.

9. Select the puzzle image and chose Adjust Color® Hue/Saturation. Set the Saturation to –19 and the Lightness to 53. Click OK.

10. Use the Frames panel to name every frame. Use p1, p2, and so forth, except for the last frame. Name it puzzletray.

11. Save the file as  puzzle_card.png to use later when exporting the pieces using CSS Layers.

    Cross-Reference 

    See Chapter 23. for steps used to export HTML and images as CSS Layers.

---