A tiny tutorial on achieving three-dimensionality with a drawing program.

How to make a 3d-looking graphic like this one in a few easy steps.

make 3-d in photoshop?

I created the "3d Gallery" graphic in Adobe Photoshop in a few minutes. You've got to admit Photoshop's quite popular, the "industry standard" if you will. Other applications (notably Jasc's Paint Shop Pro) do just about everything Photoshop does at a fraction of the price, and Corel Draw is always in there contending, priced between the other two. Suffice it to say that most of these apps are pretty much the same, doing all the same things but calling them each something a little different. Enough advertising though, here we go...

Step 1

Make yourself a new canvas, I went for 400x100 pixels, to fit nicely in your browser window even if you still live in 640x480 land. RGB color too, to get nice fades from all the effects we'll use. White background for my white-backgrounded page, adjust as you will.

Step 2

Grab the text tool and type in your text. Set the font you like, at a size that'll leave you a little room for fanciness. Choose a nice contrasting color, and make sure to anti-alias (smooth the font's edges)

Step 3

Place it where you want it using the arrow tool, drop it and make sure to Layer>Type>Render the type. Grab the Magic Wand, set it to a biggish tolerance, and select one of the letters.

Adjust your selection to involve all of the dark pixels in the graphic, Selections>Similar, getting all the letters.

One should Selections>Modify>Expand by 1 pixel to take in the "grayer" antialiased edges.

Step 4

Pick up the linear gradient tool, and design yoursel a nice fade. I went for a simpler bright red to black, naming it "red-black" along the way. Edit your gradient from the button on the tool Options (of Nav - Info - Options) toolbar.

You can adjust your gradient to your heart's content, add in sub-fades and reverses, more colors, etc. but this'll do for now.

Position one side of your new gradient and drag it (straight!) up over the selected text and you'll get something like this:

Step 5

Ok, now for the good stuff. Try Layer>Effects>Drop Shadow and have fun twiddling. I chose 90 (straight down) at 10 pixels, so I could see white between the text and its shadow. You can change the color, just how opaque, how blurry, and how intense it appears. Change the mode once you figure out Normal and you'll have all those same options behave differently. Hours of fun.

Step 6

Now from the top menu in Effects you can select Bevel and Emboss, and try "Emboss" as your style. Be sure to tag the "Apply" checkbox. Once again, fiddle to your wildest desires.

Step 7

"Ok" your effects, Deselect (Selections>Deselect), Flatten your image (Layer>Flatten Image), crop it nice and clean, and save it as a jpeg at as much compression as you can stand for the web-friendliest file possible. Enjoy.

back to 3d gallery