Final Image Preview

Take a look at the image we'll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.

Tutorial Details

• Program: Adobe Photoshop CS4
• Difficulty: Intermediate
• Estimated Completion Time: 1.5 hours

Video Tutorial

Our video editor Gavin Steele has created this video tutorial to compliment this text + image tutorial.

Step 1

Just as painters exercise their skills with real life drawing, icon designers create existing objects to study form, textures and lighting. For this tutorial we'll create a piece of contemporary furniture, Isamu Noguchi's 1944 coffee table. Do a Google search about it then fire up Photoshop.

Create a new blank document and set both width and height to 512 pixels, the maximum icon size required by operating systems today. When you create icons, you start with the biggest size then create the smaller images, adjusting the details to keep the icon crisp. Our coffee table has a symmetrical glass top so let's add some guides to help us draw it.

Step 2

Activate Snap from the View menu (Shift + Command + Semi-Colon key). Using the Pen Tool in Shape Layers mode, draw the right half of the glass top, snapping to the guides we drew before (2a).

Right-click on this layer and choose Duplicate Layer. Flip the new shape horizontally and position it to the left of the middle vertical guide (2b). Now right-click both layers and choose Rasterize Layer. Finally select both layers and hit Command + E to merge them together. Name this layer "top." In the Layers palette reduce the Fill to 0%, then apply the following layer effects: Gradient Overlay, Stroke, and Inner Glow (2c). The top surface is done (2d).

Step 3

Make a copy of the "top" layer, move it underneath it, and rename it "bottom." Clear the Gradient Overlay effect, leave the Inner Glow intact and make the Stroke darker. This way the bottom surface will shine through the top, keeping some ambient shading without adding opacity to the glass pane (3a).

Copy both the "top" and "bottom" layers. Command-click the "top copy" layer to select its outline, select the "bottom copy" layer and hit Delete to erase those pixels (3b). Rename this layer "thickness" and discard the "top copy" layer. We have a horizontal curved strip to fill so let's apply a dark Gradient Overlay with a couple of light spots at the corners (3c).

Step 4

Let's add a reflection to the top surface. Duplicate the "top" layer and rename it "reflection." Hit L to select the Lassoo Tool and draw a diagonal wedge on the bottom half of the surface (4a). Delete this selection. Apply a white Gradient Overlay in Overlay mode and reduce the layer's Opacity to 60% (4b). Group all layers (4c).

Step 5

On to the legs. With the help of perspective guides draw the side of the left leg with a Shape Layer (5a). Copy it. Hit Command + T, right-click and select Flip Horizontal, then Flip Vertical. With the Direct Selection Tool (A) skew and adjust the new shape to make the right leg's side. Add dark-to-medium gray Gradient Overlays to both shapes and name them "side" (5b).

Step 6

Now comes the complicated part. We need to add thickness to the legs. Read the instructions but refer to the images for easier understanding of the procedure.

Make a copy of the left "side" layer, hiding the original. Name this copy "inner thickness." Erase all the outer points, leaving only those shown in image 6a. With the path still selected go to the Paths palette and create a new path, naming it "inner profile" (6a). Create another copy of the left "side" and move it to the left and up (6b). Make a copy if this layer, name it "outer thickness" and follow the same method outlined above, erasing all outer points then naming the new path "outer profile" (6c).

Step 7

In the Paths palette select the "outer profile" path. On the toolbar choose the black arrow (A) and select the path on the canvas. Hit Command + C to copy it to the clipboard (7a).

Now select the "inner profile" in the Paths palette and hit Command + V to paste the "outer profile" path into it. Discard the "outer profile" path from the Paths palette (7b). With the Pen Tool (P) connect the two paths with straight lines (7c). Command-click the path in the Paths palette to select its outline.

In the Layers palette create a new layer, name it "inner thickness" and move it under the "side" layer. Hit Alt + Backspace to fill the selection on the new layer with the foreground color, any color will do, just make sure you can see it (7d). See the result below (7e).

Step 8

Using a similar method draw the outer thickness of the left leg. Refer to the image sequence for the necessary steps. It's easier done than said.

Step 9

Add thickness to the right leg. Again refer to the image sequence for the necessary steps, which is easier done than said.

Step 10

We're done with the legs. Just add a soft, light blue shadow beneath the table and you can call it a day!

Conclusion

This tutorial has taught us that even simple objects require painstaking attention to detail to be rendered correctly. It's this approach that gives the most convincing results. They say crime doesn't pay, but quality does!