How to Create a 3D Shelf Element Similar to Dragon Interactive

In Interface by Arik

In the reader suggestions recently, I found a request to see how to produce the shelf interface on the incredibly cool Web site for Dragon Interactive, a Los Angeles–based creative agency. So here's a method for producing the shelf effect.

Editor's Note: Dragon Interactive requested us to note that this tutorial is not actually written or supported by Dragon themselves.

Step 1

Using the Pen Tool (P), create a path as shown below. Don't worry about the background color. I chose this color so that you can see the path. Next, go to your Paths Palette and hit the Create New Path button. This will create a new Path Layer and save your existing path to the layer below it. I named mine "Separator."

Note: If at any point you lose the selection of your path, go to the paths tab and select the separator layer. This is important for the coming steps.

Step 2

Create a new layer, select the Brush Tool (B), and select a 1px, hard brush. Switch your foreground color to a black and then select the Pen Tool again. Now right-click on the path and choose Stroke Path. In the box that pops up, make sure the Brush Tool is selected and that Simulate Pressure is off. Call this layer "black separator." Hit Enter if the path is blocking your view of the black line. And don't worry, as I mentioned earlier, you can re-select this path in the Paths Palette.

Step 3

Duplicate the "black separator" layer, make sure the Move Tool (V) is selected, then hit the left arrow key once. This will nudge that line one pixel to the left, now hit Ctrl+I to invert the colors. Name this layer "white separator" and place them in a layer set called "separator." Note that the Create a New Group button is right next to the Create a New Layer button. For now, keep the mode of this layer set to Normal Although we will change it later on in the tutorial.

Step 4

Select the Paint Bucket Tool (G) and use the settings shown in the screenshot below. Then create a layer below the separator set and fill the left side of the separator with #3d3d3d.

Create a layer above that and do the same for the right side, except this time use #111111. Nudge the "dark grey" fill, one pixel to the left (using the arrow keys!) and the "light grey" fill, one to the right. You should be aware that if you are at 100% zoom view, then hitting the left/right arrow key will move 1px, if, however, you are zoomed out further, then it will move a different number of pixels. For example, if you are at 66% view, then hitting the arrow key once will move 2px, at 50% view it will move 3px, and so on. So make sure you are at 100% :-)

After this, using the Brush Tool or the Pencil Tool, brush along the sides of the canvas to fill that one transparent pixel back up with the correct color. Drop these two into a set called "background."

Step 5

We have our basic set-up ready. Now it's time to add the highlights and shadows. Create a gradient with the color #707070 as shown below and then gradient-fill a new layer with that gradient. Make sure the size of the gradient is about the same as mine. If you are having trouble with gradients, you can either expand them vertically by hitting Ctrl+T and dragging them out vertically or you can use the Filter > Blur > Motion Blur filter (I prefer the free transform).

On top of that, on a new layer, create a similar narrow gradient filled with white. Set that to Overlay and drop the Opacity to 40%. I put these two layers into a set called "highlights."

Step 6

The shadows were created in a similar way. First a "large shadow" gradient using black with the layer and set to Soft Light and 80% Opacity, a stretched out gradient was created. Then on top of that, a "small shadow" was added, again using black but this time the layer was set to Overlay and the Opacity dropped down to 40. These two layers were put in a set called "shadows."

Step 7

The highlights and shadows are way too defined on the dark grey area—time to fix that.

Put the "shadows" and "highlights" into a new set. I called mine S/H. Make sure the highlights set is below the shadows set. Add a layer mask to the S/H set.

Now Ctrl-click on your "dark grey" layer. This time, using a low opacity black brush go over the masked area within the selection. With each stroke, the shadows and highlights fade away. Regulate the opacity of your black brush in order to gain more control over the transparency.

The more opaque the brush, the more transparent the shadows and highlights will become. If you still feel you need even more control, you can add masks to the layers themselves. For instance, adding a mask to the "highlight large" layer will let you edit the opacity of that layer only. Use this to your advantage.

Step 8

Now comes the hard part. Depending on your taste and skill, you will now have to brush in additional shadows and highlights. I suggest you put all of the brushwork into a separate set called "Brush" at the top of the document. Use low opacity black brushes to add shadows. Patience is key here. There is no fixed way of doing it. I used a big (180px), soft, black brush set to 10% Opacity and tapped along the edges.

Step 9

Duplicate the "background" layer set and hit Ctrl+E. This will rasterize it into a single layer. Use the Dodge and Burn Tools to add additional highlights and shadows if necessary. Highlight mode works best here, with a low exposure (around 15-20%).

Step 10

Until now we've used the separator to help us in our process with the shadows/highlights etc. so that we have a clear division between the light and dark area. Now we are going to finalize this design. Set the "separator" set to Overlay. Wow, an indent appears! If you are not happy with it, duplicate both the "white separator" and "black separator" layers and nudge them one pixel to the right. It creates a less prominent appearance.

Conclusion

The effect isn't too hard to achieve. When I first analyzed the Web page, I understood that the shape could be created with the Path Tool and the rest were just a bunch of shadows and highlights that could be created thanks to a combination of brushing and gradients. The more work you put into those shadows, the better the end result.

But wait, this doesn't look anything like the Dragon Interactive Web page!

No it doesn't. This tutorial was written to show you how this 3D effect is created. The Dragon Interactive site has a lot more to it than this one interface element, and you can learn a lot by studying how they've placed, colored, and sized objects. In general it's not a bad idea to analyse any design you come across and think about why the designer has done what they've done, as well as how they did it.

If you enjoyed this post, your vote is always highly appreciated!! Delicious StumbleUpon Float Reddit Mixx

Comments

Add a Comment

Note: We use Gravatars on PSDTUTS, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too!

Trackbacks

Leave a Trackback