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."
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.
Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Breeze March 26th
Cool tutorial. I can see how this could be applied to many different shapes. Kind of a basic rundown of light/shadow.
( )Andrew D March 26th
Great effect! Thanks alot
( )Greg William March 26th
This is a great little effect. I’m sure it will be useful somewhere!
( )alberto March 26th
very nice 3d effect
( )Michael Castilla March 26th
I love the Dragon Interactive design! Thanks for sharing Arik.
( )Brian Purkiss March 26th
Hey.
I love your blog and all…
*sigh*
but, your RSS feed takes forever to load.
You should consider not allowing images in the feed, or using partial feeds.
it’s just really annoying to have my whole computer freeze up temporarily while trying to get your RSS feed to load (and my computer can handle quite a bit…)
( )HipHopMakers March 26th
Simple tutorial. But still a good one.
( )Joefrey Mahusay March 26th
I really like this. Thanks a lot.
( )Marcus March 26th
Ha, I suggested this in one of the posts. Very cool, thanks
( )goldenthunder March 26th
Very cool effect! I was planning on using something similar to this on my new site and this will help for sure! Thank you!
( )mattems March 26th
great work! thanks for sharing this.
( )Sacha March 26th
Great tutorial, but am I the only one who finds Dragon Interactive’s site kind of ugly ?
( )It reminds me of websites from a few years back when the brushed-metal interface was all the rage.
bweb March 26th
Nice one
I’ve seen Dragon Interactive site few weeks ago and honesty I thought that is a nice “picture”, but poor website with lots of “wow! cool stuff”… But shelf effect is interesting 
Thanks for tutorial.
BTW, in Dragon Interactive logo it’s not a dragon only griffin…
( )Shane March 26th
That’s a great method of creating a simple 3D look – I like it very much, and may well put it to good use.
Thanks for sharing!
( )Daniel March 26th
very nice 3d interface ! nice tutorial! thanx for sharing
( )Mark Abucayon March 26th
wow really nice tut written. Great job
( )giackop March 26th
Really well done!! Congrats!!
( )Salva March 26th
goood
( )Ben Griffiths March 26th
This is cool, some good tips for 3d interfaces too
( )Alberto March 26th
Sacha you’re not, I agree with you. Well, let’s say, not ugly but nothing special.
Moreover I’m sorry, but this tutorial is kinda useless, just a “rip” of a site background? How am I supposed to use it? The technique is very basic, too!
Quote:
( )“when I first analysed 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”
Wouter March 26th
Nice , but where can i use that ?
It’s so alone in here …
But very nice …
( )Julio Fragoso March 26th
Agree with Wouter !
well done.
( )Armen March 26th
High quality article. Love it!
( )Leyre March 27th
No Sacha, you are not. I agree with you. The Dragon Interactive site is pretty ugly. Bad choice of colors, bad use of JS, and nothing special at all. However, I appreciate this tutorial since it taught me a few things. Thanks guys!
( )Markus March 27th
Beautiful website! And this tutorial, shows how to make some of the design!
( )internet & web design blog March 27th
very detailed article and well thought through another good tutorial provieded by psd tuts..
( )congrats
rubayath March 27th
FREE!
( )LOSWL March 27th
Very interesting Design element for a website and maybe also for print..huummm?!?….Thanks for the tut!!
)
( )JokR March 27th
Thanks for helping me find a great site like Dragon Interactive witch (to my shame) I didn’t know about and also nice effect You can achieve a lot of interesting design elements from it
( )10x mate
greg March 27th
Hmm.. learned some new stuff, but I really can’t say I like their website either. I looked at the two websites they did Bullspot.com and April Zero.com and I must say, while the websites look decent, they’re too over the top. What do I mean? Well first of all, the designers apparently love the Red/Blue/Yellow/Green color scheme. Second of all, check out bullspot.. they use Javascript in the most unnecessary places. The search button? If you move your mouse over and off it really fast, it will just keep highlighting itself over and over even if your mouse isn’t over it. Same with their navigation bar. They should just use CSS and keep it simpler.
But I’m just nitpicking. Great tutorial.
( )Mike Wilson March 27th
I’ve got to agree with Brian Purkiss… please fix the RSS feed so it only feeds the us a teaser… it takes FOREVER to load!
Not too shabby a tutorial though! Keep up the good work
( )Dragolux March 27th
Nice outcome. Thanks for the tut!
( )David March 27th
Great Tutorial.
I don’t know if there’s a CSSTUTS.com, but what I Really wanna know is how they made the buttons fade in and fade out.
( )Constantin Potorac March 27th
We all thank you for sharing.
Off course this technique you just showed to us is one from the milions that the shadows and light can do.
( )greg March 27th
David, they certainly used Javascript for their buttons, CSS doesn’t have the power to do what their buttons did. This is just an example I quickly googled: Javascript Fading Button.
( )-noel- March 27th
awesome effect…but i failed to make the line with pen tool.
( )i really want to make this effect
Alberto March 27th
David, get the “Web Developer” addon for firefox, it’s very useful to understand those kind of things. You can deactivate javascripts and you’ll notice that button rollovers will not fade any more.
A common way to achieve that effect is use a code like:
Services
1) css part: you hide the span with visibility:hidden, give the outer div a background image and make a second image for the rollover status
.hide{
color:#FF0000;
font-size:1px; /* if the img is smaller than the area that text would cover */
visibility: hidden;
}
#menu2 a{
position:absolute;
width: 115px;
height: 60px;
…
background-image:url(images/menu_2.gif);
background-repeat:no-repeat;
}
#menu2 a:hover{
…
background-image:url(images/menu_2_hover.gif);
background-repeat:no-repeat;
}
This way if the js is deactivated you’ll still see the rollover/rollout effect (but without fading)
The visibility thing is for search engines indexing and/or screen readers purposes.
2) js part: for the fading effect you can insert the over-status image inside the div, then you give it alpha=0 and make it fade in/out (increment/decrement alpha value) over the other image (background) calling a javascript function similar to the one posted by greg.
Just the first thing that came in my mind. Hope it helps!
( )Alberto March 27th
Sorry, the code wasn’t written down, hope this time it works:
<div id="menu2"><a href="services.html"><span class="hide">Services</span></a></div>
btw it is a span with class “hide” inside an a href inside a div with id=”menu2″
Sorry for the mess!
( )Gary Spedding March 28th
I too could not get the path right with the pen tiol. Got half way down and the first (to the left) curve but could not get an approriate continuation thereafter. Tried even just drawing a straight line down at the end (after the half way point) – holding Shift – but that line was curving all over. Any thoughts for me and the other fellow having issues?
Thanks for this and all the neat tuts though.
Gary.
( )Arik March 28th
@ Gary
Here are a few pointers:
1) I didn’t use the handles all that much, try to avoid stretching them too far
2) make sure the handles follow the straight (angled) line in the middle.
3) If you want smooth roundings, you need to drag handles into a 90 degree position
x
|
|
oo——-x
X are the anchor points, while the dashes represent the handles and the ‘o’ are the handle ends. This will create a nice rounded corner from the top right to the bottom left. (Like a lower left corner on a rounded rectangle.)
It took me a few tries to get it right myself.
( )Arik March 28th
From the top left, to bottom right, my bad.
( )David March 31st
@Greg & @Alberto:
Ah! No wonder I can’t find an example then! Thank you guys so much!
( )onprezz March 31st
Perfect!!!!
( )Johan April 2nd
Nice to see you using Windows Classic.
Thanks for the tut.!
( )Arik April 3rd
@ Johan.
I disabled all of the fancy xp stuff because it gives me more RAM to work with.
( )Tanie Projektowanie April 21st
tut is ok, i dont know where i will use this, but… maybe… future shows ;p
( )Qbrushes May 3rd
same here its ok but not very practical
( )gryzzly May 4th
Hy,
Can anyone explain me how to do to make the “path” as a “wall” for the gray & black backgrounds ? i tryed almost everything, but anyway, the when i apply a background color, all my area is filled… but the tuto is made so that the path stops as if it was 2 différents parts.
(sorry for that approximative explanation, english is not my mother tongue …)
( )gryzzly May 7th
Ok, i found it. Tolerance should be 1 … i was at max.
( )++
-noel- May 8th
finally……i’ve done it……but when i got to step 8 i use the same method step 5…..still the same effect…..anyway…..thanks for the tutorial…..keep it up.
( )TH May 14th
Nice tut and nice design.
( )Des June 24th
This Is super cool… super hot. Thank you.
( )Jordan July 30th
Can you provide some more detail. like how to make that path, I cannot figure it out, I know it has to be easy (If you know how to do it) but I just can’t figure it out…
( )Waldemar August 28th
I guess i’ll pay for de PSD FILE!!! i try to do here and my brain almost burn!
( )SM January 10th
I saw the Dragon Interactive website long before I found this tutorial, and I was amazed at the effect. Thanks so much for demonstrating. The tutorial is fast and is for more intermediate Photoshop users. I’m pretty satisfied with my attempt though. Thanks so much!
( )hood_lord January 13th
Cool one!
But know what! among all of the PSD tuts tutorials, this one’s the most puzzling one. (I’m not saying every step but some of them).
SM is right! This one’s for intermediates but I was really confused.
Anyways, thanx a lot!!!
P.S. this tutorial really made me comment! Phewww!!!!
( )Tom January 28th
Brilliant job, thank you
( )anahita February 1st
I cant understand the step 5 . plzzzz someone explain to me
( )Michael February 20th
Does anyone feel this 3d-shelf-style of dragoninteractive is a rip of rareview.com or is it just me? It’s also grayscale as well. I know it’s not exact or anything, maybe it’s a just a hat tip to rareview
( )krike August 23rd
awesome, here is my result -> http://i119.photobucket.com/albums/o134/krike06/3dshelfelement.jpg
let me know what you think of it
( )Shinfo October 8th
I didn’t understand the first step at all, I did exactly as you wrote but this fails to work.
( )