3D objects, namely icons, the little graphics that grace the interface of almost every conceivable GUI application you can possibly think of. Icons give us a visual representation of the functions, tools, and processes they represent. In this article, we’ll step through the process of creating a very nice 3d icon using reference material.
I will be using this Book picture that I got off of my Big Box of Art CD. First, I want to get the outline of my book. I’ll grab my pen tool and make sure ‘paths’ is checked in the upper left corner and then go around the edges of the book, ignoring the glasses. Take your time on this step, and once you close your shape, go back around your book at a closer zoom level to make sure you’ve matched up your paths with the edges of your book fairly nicely. Once I’ve completed this step, I like to save this as a custom shape. By saving it as a custom shape, I can always come back to it later assuming I want to create different variations and sizes, all I need to do is grab my custom shape tool and select my book shape. I also swap over to my paths palette and save this path for good measure.
Now, I’m going to go ahead and fill this path with a dark blue, and drop the opacity so I can see the reference image behind it. From here, I want to create a new layer and start taking the remaining sections of my book and turning them into paths which can be filled.
I’m just following the same process as above. Note that you can also use your shape tool, set to shape layers and drag out shapes layers and modify them by adding, deleting and editing points to fit to your remaining parts.
From the image below, You can really see the book taking shape now. Also below, you’ll see a shape map, which is just a visual guide to show you how I sectioned my book into parts.
Now that I’ve got my book broken down into the needed parts, I want to link up my layers, then group all my layers and last, duplicate the layer set. Now I’m going to hide my bottom layer set. I do this incase I mess up, or decide to start over on a piece all I need to do is drag it from my hidden set to my working set.
From this point, I want to start rendering in the details. I’ll do this with a few simple gradients first, and a few taps of the dodge tool around the front edges to bring out some highlights. I’m not too worried about the fine details just yet, just basically trying to get my lighting set up.
I want to create the shadow that will rest right below my front cover and fall on the pages of the book below it. I’m just going to ctrl+click my front cover, create a new layer on top of all the other layers and fill it with a dark gray/grayish blue. In order to position this shadow I’ll drop my opacity just a bit so I can see the front cover and pages beneath it. I obviously only want the bottom and right edges of the shadow, so I’ll crop the remaining parts off by ctrl+clicking my front cover layer and pressing backspace with my shadow layer active.
In order to create the binding on the front cover, I’m going to use my line tool and drag from one edge to the other, right along where the binding starts on the back edge. After I create the line, I’m going to blur it a bit using some Gaussian blur and then work it in a little better. I also use this technique to give the edges of the book more presence.
At this point, I’m pretty much done. As a final touch, I’m going to add a texture and some text to my front cover. I usually go back and touch some things up as well. Just taking my time correcting parts that I feel don’t look right, comparing and contrasting with the original book image. That concludes this article, I hope your book turned out nicely, if not then run back through the tutorial and see where you might have messed up, and use your own judgment to determine what needs work and what doesn’t. Here are some final images just to show you what you can do with this technique.