Getting started
Since you are working in 3D, I recommend selecting the 3D
workspace from the Workspace pull-down menu on the upper right side of
the Photoshop interface.
The first step is to create a new canvas for your scene. Keep in mind that larger sizes and higher resolutions will take longer to render, so think ahead about how you will use the final renders. For this project, I used a 1200 × 1200 canvas at 96dpi.
To start off, download and open the project files. This ZIP file includes the puzzle pieces and the dollar-bill texture to get you started. You will also find a Photoshop file titled Stack Texture, which you will use in the project.
I created my vector puzzle pieces in Adobe Illustrator and pasted them as a Smart Object into the Photoshop file, but they could just as easily be created directly in Photoshop using the Pen tool.
After creating the puzzle pieces, I sized them to match the dollar-bill texture. You can hide Layer 1 in the file titled Start File before getting started. You will use it later to texture the 3D puzzle.
The first step is to create a new canvas for your scene. Keep in mind that larger sizes and higher resolutions will take longer to render, so think ahead about how you will use the final renders. For this project, I used a 1200 × 1200 canvas at 96dpi.
To start off, download and open the project files. This ZIP file includes the puzzle pieces and the dollar-bill texture to get you started. You will also find a Photoshop file titled Stack Texture, which you will use in the project.
I created my vector puzzle pieces in Adobe Illustrator and pasted them as a Smart Object into the Photoshop file, but they could just as easily be created directly in Photoshop using the Pen tool.
After creating the puzzle pieces, I sized them to match the dollar-bill texture. You can hide Layer 1 in the file titled Start File before getting started. You will use it later to texture the 3D puzzle.
Figure 1. The puzzle pieces were sized to match the $100 bill on the layer below.
Now that the shape is in place, follow these steps:
Before you start working in this 3D environment, look at the hierarchy of the 3D palette in Figure 2.
- Select the Smart Object layer and open the 3D panel.
- Choose Selected Layer from the Source pull-down menu and then select the 3D Extrusion option.
- Click the Create button to extrude the 2D puzzle pieces into 3D objects.
Before you start working in this 3D environment, look at the hierarchy of the 3D palette in Figure 2.
Figure 2. The hierarchy of the 3D palette is similar to the Layers palette.
The 3D hierarchy is much like the standard layer hierarchy in Photoshop:
The Rotate 3D Object control rotates whatever is selected in the 3D palette, so if a 3D object is selected, this control will rotate that object. In this case, Current View is selected, so the tool will change the current view of the scene as you move it within the viewport, which makes it look as if you are walking around this 3D object. To use the Rotate 3D Object control, just click and drag within the viewport as you would if your scene resided within a crystal ball. As you begin to rotate the camera view, you can see your 3D extrusion depth along the z axis.
In the 3D palette, select your 3D extrusion and go to the Properties tab. In the Shape Preset pull-down menu, select the beveled edge option.
As you can see in Figure 3, the default setting creates an overly deep bevel into the face of your object, so you'll need to correct that.
- Environment: This category is made up of the things outside your 3D scene. These items primarily affect your final rendering.
- Scene: The items in this category relate to the broad 3D scene and include anything within that scene, such as 3D objects, lights, cameras, and materials.
- Vector Smart Object: This item is the 3D extrusion you created. It is composed of the materials and shapes that make up those objects. Your extrusion has a front face (Front Inflation Material), a back face (Back Inflation Material), and sides or extrusion (Extrusion Material).
- Bevel Material: This item is the surface texture that will be rendered on your bevels if you want the edges to have something other than a 90-degree angle.
The Rotate 3D Object control rotates whatever is selected in the 3D palette, so if a 3D object is selected, this control will rotate that object. In this case, Current View is selected, so the tool will change the current view of the scene as you move it within the viewport, which makes it look as if you are walking around this 3D object. To use the Rotate 3D Object control, just click and drag within the viewport as you would if your scene resided within a crystal ball. As you begin to rotate the camera view, you can see your 3D extrusion depth along the z axis.
In the 3D palette, select your 3D extrusion and go to the Properties tab. In the Shape Preset pull-down menu, select the beveled edge option.
As you can see in Figure 3, the default setting creates an overly deep bevel into the face of your object, so you'll need to correct that.
Figure 3. The deep bevel in the face of your object can be corrected.
To fix the deep bevel, select the Cap icon in the Properties
menu, which enables you to customize the face and bevel of your
extrusion. Reduce the width of the bevel to 8% using the slider. You may
also want to use the Contour option to make the bevel more rounded like
the edges of jigsaw puzzle pieces.
To the right of the Cap icon is the Coordinates button. Click the Coordinates button to change the x-axis rotation to 90 degrees and then choose Snap Object To Ground Plane from the main 3D menu. This snaps the 3D object to the visible grid and allows shadows to be cast as if the object were sitting on a table, rather than floating above it in a random position.
To the right of the Cap icon is the Coordinates button. Click the Coordinates button to change the x-axis rotation to 90 degrees and then choose Snap Object To Ground Plane from the main 3D menu. This snaps the 3D object to the visible grid and allows shadows to be cast as if the object were sitting on a table, rather than floating above it in a random position.
Applying textures to 3D objects
In the 3D palette, select Front Inflation Material and open the
Properties palette. Choose Edit Texture from the Diffuse Material
pull-down menu and click OK when you get the notification that the
texture is contained in multiple places.
The texture for the front inflation material will appear in a new window and will be similar to the face of your jigsaw pieces. In the original project window, unhide the dollar texture (Layer 1). After you select and copy that texture, paste it on top of the jigsaw pieces in the window that contains the default texture. Size and position it to match the existing default texture layer.
Texturing can be challenging to learn and is often far more involved than this, so do some studying on your own about textures and UV texture mapping. This is also a good opportunity to look at how the texture is being mapped to the 3D mesh. Choose 3D > Create Painting Overlay > Wireframe.
Before proceeding, hide the layers that do not include the dollar texture and then save the file. The texture automatically updates in your 3D Scene (see Figure 4).
The texture for the front inflation material will appear in a new window and will be similar to the face of your jigsaw pieces. In the original project window, unhide the dollar texture (Layer 1). After you select and copy that texture, paste it on top of the jigsaw pieces in the window that contains the default texture. Size and position it to match the existing default texture layer.
Texturing can be challenging to learn and is often far more involved than this, so do some studying on your own about textures and UV texture mapping. This is also a good opportunity to look at how the texture is being mapped to the 3D mesh. Choose 3D > Create Painting Overlay > Wireframe.
Before proceeding, hide the layers that do not include the dollar texture and then save the file. The texture automatically updates in your 3D Scene (see Figure 4).
Figure 4. When you hide the layers that do not include the dollar texture, you can see what your overlay looks like.
Now it's time to add another texture to make your extrusion
look like a stack of money. From the 3D palette, choose Vector Smart
Object Extrusion Material and proceed to the Properties panel. In the
Diffuse material drop-down, choose Remove Texture. Now if you select the
drop-down again, you can choose Load Texture. Navigate to the
stack_texture.psd file that was included with the sample project files
and click Open to load the texture.
I mimicked the color of money by first desaturating the stack of paper and then filling a layer above it with the color of money. I then changed the layer mode of that layer to Color Burn, which casts the color onto the paper, resulting in a texture that works great for this scene.
The bump map material is like a depth map that renders different shades of gray at different depths. To give the sides of the money variance in depth, use this same texture as a bump. To do this, select Bump from the Materials menu and load the same texture you loaded for the extrusion material. This should ensure that the bump map is aligned with the texture map. Figure 5 shows the difference the bump map has made on this 3D object.
I mimicked the color of money by first desaturating the stack of paper and then filling a layer above it with the color of money. I then changed the layer mode of that layer to Color Burn, which casts the color onto the paper, resulting in a texture that works great for this scene.
The bump map material is like a depth map that renders different shades of gray at different depths. To give the sides of the money variance in depth, use this same texture as a bump. To do this, select Bump from the Materials menu and load the same texture you loaded for the extrusion material. This should ensure that the bump map is aligned with the texture map. Figure 5 shows the difference the bump map has made on this 3D object.
Figure 5. Applying a texture as a bump creates a depth variance that makes the stack of bills look more realistic.
You may want to make one more change before saving your base 3D
scene. Money is very thin. If you reduce the bevel width a little
further, you can make the bills look more realistic while keeping the
rounded look of a puzzle piece edge.
You have completed the base 3D scene. From here, you can create all kinds of variations. Save your file and start the rest of the project using a different filename.
You have completed the base 3D scene. From here, you can create all kinds of variations. Save your file and start the rest of the project using a different filename.
3D extrusion
It's time to turn your block of puzzle pieces into individual
pieces. Choose 3D > Split Extrusion. In the 3D palette, you will see
that you have a new group with eight extrusions in it. Each of those can
now be controlled independently of the others.
This is a great time to get more familiar with the 3D manipulation controls within the viewport. As you select each piece, you will see a small three-axis control with some widgets at the end of each axis. Using your mouse, select the appropriate arrow widget at the end of the control axis to move the object along that axis. Select the colored box widget to scale the object along that axis, or select the curved widget to rotate the object around the axis that appears when the widget is rotated. To scale an object uniformly, use the box at the center of the control (see Figure 6). To return to the previous state, just use the Undo command.
This is a great time to get more familiar with the 3D manipulation controls within the viewport. As you select each piece, you will see a small three-axis control with some widgets at the end of each axis. Using your mouse, select the appropriate arrow widget at the end of the control axis to move the object along that axis. Select the colored box widget to scale the object along that axis, or select the curved widget to rotate the object around the axis that appears when the widget is rotated. To scale an object uniformly, use the box at the center of the control (see Figure 6). To return to the previous state, just use the Undo command.
Figure 6. You can move, rotate, or scale each puzzle piece on an axis.
Use the 3D manipulation controls to randomly move each piece to create a unique 3D scene.
Once the pieces are positioned, choose Infinite Light from the 3D palette and a lighting control appears in the 3D scene. Grab the handle at the end of the control and drag it to point the light onto your scene at an angle you like. This controls where your shadows are cast if you want to render shadows onto the ground plane or other objects (see Figure 7).
Once the pieces are positioned, choose Infinite Light from the 3D palette and a lighting control appears in the 3D scene. Grab the handle at the end of the control and drag it to point the light onto your scene at an angle you like. This controls where your shadows are cast if you want to render shadows onto the ground plane or other objects (see Figure 7).
Figure 7. Infinite Light points light at your object at any angle you choose, producing natural-looking shadows.
Ready to render
3D rendering can be a science. The first thing that anyone who
is new to 3D needs to know is that 3D rendering is very processor
intensive and can take a long time to complete, especially when you get
into large, complex scenes with shadows, reflections, refractions, bump
maps, and more. Once you are familiar with render times, you can easily
build them into your 3D workflow. For example, you may make it a
practice to start final renders before your lunch break or before you go
to bed, so they can process while you are doing other things.
Before rendering, select Scene in the 3D palette and scroll to the bottom. Below the Remove Hidden controls, enable the Backfaces option. Since the opacity of your objects is 100%, you can't see the hidden faces of your jigsaw puzzle pieces. If the renderer doesn't have to worry about how every face in the scene appears, it speeds up the rendering process. When you see how long it takes to render this scene, you will appreciate any performance enhancement.
To render your scene, use the Render button at the bottom of the Properties panel, or choose 3D > Render. You can pause your render at any time by pressing the button again. If you make any scene changes, a new render will start the next time the Render button is pressed. Otherwise, the scene will simply resume rendering when the Render button is pressed again.
Most of the time, you will not want to sit through a complete render, but you might want to get an idea of what something looks like when rendered. To do this, you can select a smaller area of your scene with the Marquee Selection tool before rendering and only render that area. This is a great way to check out a soft shadow, material reflectivity, bump maps, and more.
Shadows add realism to most scenes, so look at how the shadows are being cast. You can see in your scene that the shadows have very hard edges. You may want this effect, but to soften these shadows, go to the Properties panel of Infinite Light and increase the Shadow Softness slider. Figure 8 shows 0% softness vs. 25% softness.
Before rendering, select Scene in the 3D palette and scroll to the bottom. Below the Remove Hidden controls, enable the Backfaces option. Since the opacity of your objects is 100%, you can't see the hidden faces of your jigsaw puzzle pieces. If the renderer doesn't have to worry about how every face in the scene appears, it speeds up the rendering process. When you see how long it takes to render this scene, you will appreciate any performance enhancement.
To render your scene, use the Render button at the bottom of the Properties panel, or choose 3D > Render. You can pause your render at any time by pressing the button again. If you make any scene changes, a new render will start the next time the Render button is pressed. Otherwise, the scene will simply resume rendering when the Render button is pressed again.
Most of the time, you will not want to sit through a complete render, but you might want to get an idea of what something looks like when rendered. To do this, you can select a smaller area of your scene with the Marquee Selection tool before rendering and only render that area. This is a great way to check out a soft shadow, material reflectivity, bump maps, and more.
Shadows add realism to most scenes, so look at how the shadows are being cast. You can see in your scene that the shadows have very hard edges. You may want this effect, but to soften these shadows, go to the Properties panel of Infinite Light and increase the Shadow Softness slider. Figure 8 shows 0% softness vs. 25% softness.
Figure 8. You can adjust the edges of the shadows using the Shadow Softness slider.
To finish this scene (see Figure 9), you may want to make one
more adjustment to the lighting before your final render, just to get a
little more light to cast on the sides of the floating puzzle pieces.
You can always place additional lights into your 3D scene by clicking
the button that looks like the New Layer icon at the bottom of the 3D
palette.
Figure 9. The final rendered scene
Where to go from here
This tutorial only scratched the surface of the 3D capabilities
in Adobe Photoshop CS6 Extended, but I hope it has helped you navigate
the 3D landscape and understand some of the important aspects of the
Photoshop CS6 3D workflow and interface.
Some people may argue that they could create this scene in Photoshop without 3D capabilities. I don't disagree, but the benefits of 3D are undeniable. Now that this 3D scene is set up, you can save any number of camera angles, settings with depth of field, textures, environment settings, and more. The possibilities are endless, and all it takes is the original base 3D scene.
Professional Photoshop & Illustrator Training (PC/Mac version) in Hong Kong
Some people may argue that they could create this scene in Photoshop without 3D capabilities. I don't disagree, but the benefits of 3D are undeniable. Now that this 3D scene is set up, you can save any number of camera angles, settings with depth of field, textures, environment settings, and more. The possibilities are endless, and all it takes is the original base 3D scene.
Professional Photoshop & Illustrator Training (PC/Mac version) in Hong Kong
to
the sky layer (click Mask icon in the bottom of layers palette). Fill
Mask with the Black and White Reflected Gradient . Correct top right
edge with soft large Brush Tool. Apply Screen Blending Mode, Opacity
80%. Add Adjustments Clipping Masks to this layer – Black & White
and Levels. Click 
icon
in the bottom menu of the Layers Palette. Select all adjustments layers
(make them active), right click > choose "Create Clipping Mask".
Apply setting for each adjustment layer like on the examples below.
.
Go to Filter > Render > Different Clouds. Repeat Command/Ctrl+ F
until you get similar effect like on the screen shot. Apply Screen
Blending Mode to this layer. You may save this texture as a regular JPG
file.
created 3D shape.
.
