Awesome 3D Box Effect in Photoshop

Article - Awesome 3D Box Effect in Photoshop

Awesome 3D Box Effect in Photoshop

by TutsArena - Tutorials

This Photoshop tutorial will walk you through the process of creating some pretty cool 3d boxes. The purpose of these boxes is to highlight important information so it will stand out, literally, on the page. Come check out how we did it and download the PSD file!

This tutorial will show you how to quickly create a 3d box effect in Photoshop. The purpose behind this effect is to make your important one-liners stick out on the page, something that will make people want your product or service. It’s an easy tutorial, but if done correctly, it creates a dramatic effect.

Final Product:

3dboxes

Now that you see what we’re making, let’s get started.

Step One:

As always, create a new document sized 500×500 (or if you’re making a template, create a new size based on your template). Fill the background with #141317.

Step Two:

Let’s create the boxes now. Select the Marquee Tool (M) and create a new selection sized 192×79 px. Go to Layer > New Layer (Shift + Ctrl + N) and fill the new layer selection with #36a4cd. Now you’ve got a basic rectangle shape. We’re going to give it some perspective now. Create a new rectangle layer sized 12×79 px and fill it with the same color #36a4cd. With your new rectangle layer selected, go to Edit > Transform > Perspective and shift the rectangle up to give it a slight 3d effect. You’ll have something like:
3dboxes1
Keep playing with the Perspective setting until you get a depth you’re satisfied with. Don’t worry about the styling, we’ll tackle that in the next step.

Step Three:

Now we’re going to Dodge and Burn the box to give it some depth. Select the Dodge Tool (O – it looks like a spoon) and use these settings:

Dodge the upper right corner of your box, don’t make it too bright but just enough to give it a nice effect.

Select the Burn Tool (O – the hand) and use these settings:

Burn the left side of your little rectangle, the one you used Perspective on. Make it rather dark and fade to a lighter shadow as you get closer to the big rectangle. On the very edge of your little rectangle, where it meets the big rectangle, burn a single line up the side to show where the corner of the box is.

Now we have:
3dboxes1

Step Four:

We’re going to add the text in this step. Use the color #2e2f34 and type whatever you want in the box. Apply these styles to the text:
3dboxesdropshadow

Here’s what mine looks like:
3dboxes2

Voila! All you need to do now is duplicate the first box and flip everything horizontally (Edit > Transform > Flip Horizontal) and you’ll have two boxes.

3dboxes

We added some other stuff just to spruce it up a little bit. These boxes will look great when used inside of a layout. Don’t forget to download the PSD file!

Thanks for reading!

Check out these other tutorials we’ve written:

About the author

TutsArena is dedicated to providing the best, free web design tutorials.

Visit TutsArena's Website | All Articles From This Author

7 Comments

July 5 at 5:41 pm Alan(Quote)

Alan said:

If you need any help with the tutorial or want to show off how you’ve used it in a design, leave us a comment!
July 7 at 6:55 am Ryan Gliozzo(Quote)

Ryan Gliozzo said:

Hi great tutorial,

I love the effect, and the reflection adds another slick dimension to the 3d box. I have been using illustrators 3D Bevel and Emboss for a recent website, but I think I will use this simple technique for my new website layout.
July 8 at 6:59 am Alan(Quote)

Alan said:

Glad you like it Ryan, hopefully it will save you some time.
July 8 at 7:52 am rajesh(Quote)

rajesh said:

job work
July 8 at 7:54 am rajesh(Quote)

rajesh said:

live work in my online
July 10 at 12:10 pm Nick(Quote)

Nick said:

I love the boxes, but the text needs something done to it
50 Favorite 3D Effect Tutorials In Photoshop – DoNotYet.com said:

[...] 35. Awesome 3D Box Effect in Photoshop [...]

TutsArena