Sign In  |  Join Now Become a member to add links and start earning points!

Design a 3D Box Icon in Photoshop

In this tutorial I’ll explain step by step how to create a sleek Box Icon in Adobe Photoshop for use in apps or websites. I would like to thank Luca Vlad(Wlady) for collaborating with me in creating this tutorial!

Step 1: Create a new document

Start by creating a new document (Ctrl+N) 800×800 in dimension.

Step 2

Make a new layer(Ctrl+Shift+N).

Step 3

Make a selection using rectangle Marquee Tool(M) and Transform the selection as shown. Fill it with black.

Step 4

Change the color to grey (Right-click on the layer choose Blending options>Color overlay) and duplicate it. Move the duplicated layer as high as you want (this will determine box’s height). Make the duplicated layer black.

Step 5

Using Rectangle Marquee Tool (M), make a selection. Make a new layer, fill it with a gradient (Right-click on the layer Blending Options>Gradient overlay) Use a darker color on the lower part and a lighter color on the upper part. For my box, I used #f7bb01 for the upper part and #d3a305 for the lower part. Use shift to make the gradient go straight.

Step 6

We are going to fill the interior. Make a selection using Rectangular Tool (U). Make a new layer, fill it as shown. Make a layer for every side you fill.

Step 7

Make shadows for the sides (Use Burn Tool (O) with similar settings).

Step 8

Make shadows for the middle part of the interior. I suggest using a similar selection. Use Burn Tool (O) with similar settings.

Step 9

Make A selection similar to the one shown and fill it with the same colors you have used for the box. Make selections and add add a gradient with the same colors used for the box (dark one on the near part and ligther one for the far part) and add highlights for the center similar to the ones shown.

Step 10

Set your brush to a small size (3px for my size was perfect, 5px was a bit too big). Using Pen Tool, make a straight line on the corners, make a new layer for each line and make a stroke path (Pen Tool (P) — Right Click — Stroke Path — Set it on Brush and press Ok). Using Eraser bring the lines to the right tone. Do the same for the upper part of the box.

Step 11

Make a new selection and make a new layer. Using Gradient Tool (G) fill the selection with 2 tones of grey (darker for the close part and lighter for the far part). I used #dcdcdc as a light grey and #9b9b9b as the dark grey.

Step 12

Make a new layer and make a shadow using Pen Tool (P) by making a path that follows the form of the interior and using a size 3px (or bigger depending to your image size) stroke the path  as shown previously. Use for the color black and set the layer on overlay. Set the opacity as you want (I suggest 60-70%).

Step 13

Select the layer of the box  and make a selection for a small reflection and using Levels (L) lighten it a bit. Make a small selection as shown for a little shadow on the box and using Burn Tool (O) darken it as you want.

Step 14

Using Rectangle Tool (U) make a selection for the black line. Make a new layer UNDER the layer of the reflections and fill it with BLACK. Using Pen Tool (P) make a selection to see how will the rear line look. Make a selection and fill it with black where the yellow used to be. To add texture to the interior use Noise (Filter — Noise — Add Noise) on a black layer with the form of the interior (3rd picture). Set the noise on Soft Light blending mode and reduce the opacity of the layer.

Step 15

Make a selection for the papers. Make a selection similar to the one shown. Deselect from the selection the front of the box and fill the layer with white. To make the shadows use Pen Tool (P) with a feather similar to 1, 2px . Use Levels (L) to darken the paper accordingly.

Step 16

Duplicate the layer and fill the duplicated layer with a darker grey (I used #c4c4c4). Move the duplicated layer under the white paper. Using Free Transform (CTRL + T) rotate the paper. Make a selection and remove from the layer anything that is out of the box.

Step 17: Reflections&Shadow

Now comes the nice part. I explained how I added reflections and shadows. You can make them as you wish. To add texture to the front, use Noise (Filter>Noise>Add noise) as much as you want as shown previously.
Use Type Tool(T) to add a reffering text like .doc/.psd/.pdf etc. , it depends of what would you want to use this icon.

Final Result



Download the PSD

77 Comments

  1. Add point Subtract point
    Latest Gadget (2 Points) April 22, 2010 at 6:10 am

    Excellent info provided in the article and I must appreciate the author the way he made the steps and this was really easy to understand this

    Flag as inappropriate
  2. Add point Subtract point
    Xenstudio (1 Point) March 26, 2010 at 2:28 pm

    Thank you so much for this tutorial. I’ve got an exam coming up soon as this helps loads!

    Flag as inappropriate
  3. Add point Subtract point
    changuru (1 Point) March 24, 2010 at 8:18 am

    Thankx for your tut. nice one.

    Flag as inappropriate
  4. Add point Subtract point
    Mostafa Hamido (1 Point) February 14, 2010 at 4:45 am

    amazing and stunning work … keep it up

    Flag as inappropriate
  5. Add point Subtract point
    เนื้อเพลง (1 Point) February 1, 2010 at 11:38 pm

    Great post . Thanks149

    Flag as inappropriate
  6. Add point Subtract point
    เพลงใหม่ล่าสุดเดือนนี้ (1 Point) February 1, 2010 at 1:45 am

    Great post . Thanks144

    Flag as inappropriate
  7. Add point Subtract point
    colombopro (1 Point) January 8, 2010 at 2:17 am

    What is the PS version used to make this tutorial. I have an old computer running PS2. Can I play with this tutorial with PS2 ?

    Flag as inappropriate
  8. Add point Subtract point

    Can anyone tell me the name of the software used to capture scrolling selection (ants) and other screen shots in photoshop? Thank you in advance.

    Flag as inappropriate
  9. Add point Subtract point

    Hi,

    Great work, nice tutorial colors scheme is also awesome.

    Thanks

    Flag as inappropriate
  10. Add point Subtract point
    purnendu(orissa,india,asia) (1 Point) November 20, 2009 at 5:48 am

    thats good budy.. i am so impressed abt ur tutorial,,, i wil try it with anther colors

    Flag as inappropriate
  11. Add point Subtract point
    http://www.my-picz.co.cc (1 Point) November 2, 2009 at 6:43 pm

    Ooh ! Amazing ,,,,,,,

    Flag as inappropriate
  12. Add point Subtract point
    Cucu Tudor I. (1 Point) October 8, 2009 at 4:27 pm

    I’m glad you succeed in creating it.Show us your result ;)

    Flag as inappropriate
  13. Add point Subtract point
    Do0da © (1 Point) September 21, 2009 at 4:04 pm

    i just finished mine >.< OMG it took me so LOOOONG ..
    however… LOVED THE RESULT <3 AWESOME tutorial (Y)

    Flag as inappropriate
  14. Add point Subtract point

    nice tutorial :) (Wlady cum ai ajuns aici :))

    Flag as inappropriate
  15. Add point Subtract point

    There is a really neat product that I just found that anyone reading this tutorial might find it extremely helpful! Check out Cover Action Pro ( http://bit.ly/Fnh5W ). It’s basically a set of Photoshop actions that you can use to easily create all kinds of product covers and cases.

    Flag as inappropriate
  16. Add point Subtract point
    Cucu Tudor Ionel (1 Point) September 3, 2009 at 4:48 pm

    Thank you for the great comments.
    Many tutorials will be coming soon .. Stay close !

    I must thank David Leggett for the great colaboration !

    Flag as inappropriate
  17. Add point Subtract point
    babaonia (1 Point) September 1, 2009 at 3:12 am

    nice tut thanks just worked it out

    Flag as inappropriate
  18. Add point Subtract point

    Nice TuT its so beautiful Thanks….
    What the font use
    Thanks again.

    Flag as inappropriate
  19. Add point Subtract point

    Ace!! Mate…Ultimate beauty…Good on ya

    Flag as inappropriate
  20. Add point Subtract point
    best bingo (1 Point) August 21, 2009 at 7:32 am

    Looks grate information about photo shop

    Flag as inappropriate
  21. Add point Subtract point
    Oliver Web (1 Point) August 13, 2009 at 8:37 am

    Great tutorial. Simple and effective to achieve a nice looking icon. A few tricks I could learn from this to put to use on other designs. Thanks for sharing.

    Flag as inappropriate
  22. Add point Subtract point

    We are glad you like it guys ! Thanks for the good feedback !

    Flag as inappropriate
  23. Add point Subtract point

    wow.. love this tut! I am coming up with similar tut at my blog soon!

    Flag as inappropriate
  24. Add point Subtract point
    Cucu Tudor I. (1 Point) August 12, 2009 at 6:17 am

    You should know that you can easily change the colour at the end with hue/saturation (select yellow and change the colour)

    Thank’s for the great appreciations.
    Keep in touch !

    See a more variations : http://img136.imageshack.us/img136/7315/fileicons.jpg

    Flag as inappropriate
  25. Add point Subtract point
    Bendesign (1 Point) August 12, 2009 at 3:30 am

    Nice tutorial and nice result. but i think without the .doc written it looks a way better.

    Flag as inappropriate
  26. Add point Subtract point
    Jasmin Halkić (1 Point) August 12, 2009 at 12:56 am

    Nice tut. Thank you.

    Flag as inappropriate
  27. Add point Subtract point
    Nardyello (1 Point) August 11, 2009 at 2:31 pm

    Simple and clean. Very nice =]

    Great attention to lighting also.

    Flag as inappropriate
  28. Add point Subtract point

    I likeeeee it, but just to let you know it looks much better without .doc written on it.

    It’s always good to have stock of tricks saved somewhere, like this tutorials uses several tricks to accomplish effect so whenever I would forget one of these tricks and need them I will just come to this tutorials from my email’s special folder.

    Flag as inappropriate
  29. Add point Subtract point
    Shashank (1 Point) August 11, 2009 at 1:08 pm

    Nice Tut! Love the outcome! :D

    Flag as inappropriate
  30. Add point Subtract point
    Lucas Tadeu (1 Point) August 11, 2009 at 12:37 pm

    Nice tutorial, this box looks hot. I’ll try this tutorial now.

    Flag as inappropriate
  31. Add point Subtract point
    Internethow Blog (1 Point) August 11, 2009 at 10:37 am

    Wow, it actually looks like a real box. I might try to make it my self. Maybe in different color though.

    Flag as inappropriate
  32. Add point Subtract point

    Omg, that is very beautiful, nice tutorial!
    Awesome shadowing techniques, nice results.

    Keep it up :)

    Flag as inappropriate
  33. Add point Subtract point
    Phaoloo (1 Point) August 11, 2009 at 2:34 am

    Nice tutorial! Just thought it was a usual box, but you make another realer one, I can see the inside.

    Flag as inappropriate