How to use Photoshop to create Product Box?

Photoshop is a powerful tool for almost everything you need in graphic and web design. This article explains how to use Photoshop to create product boxes.

Product Box - final

How many times you wanted to create cool product box for some of your products? Sure, there are many ways, and with new Photoshop you have even more options to create boxes. But I wanted to show you how to create a “3D look box” in the 2D environment using Photoshop paths.

Where to start?

First, create an empty image in Photoshop. I created one 800px wide and 600px long. Now, we will create the guides like on the picture below. I moved the ruler to the first top position for easier viewing. We will create guides for the back (50x300px) and front side (150x300px). Now, create the horizontal guides on 10px, 20px, 280px and 290px. OK? Let’s move on.

How to use Photoshop to create Product Box?

Use the Rectangle Tool (U) to create the front and back box with the above values. Now, use the Direct Selection Tool (A) to move the point of the back and front sides like this: 0,0>0,10px, 0,300>0,290px for the back side and 200,0>200,20px, 200,300>200,380px.

How to use Photoshop to create Product Box?

You did this? You should now have something similar to the box on this picture.

How to use Photoshop to create Product Box?

Now, import your footage. I made my front side a little wider but with these values you should experiment on your own. My footage is as you can see 50x300px back and 200x300px front. If you are doing this for the first time, forget the writing on box and experiment with the pictures instead :)

How to use Photoshop to create Product Box?

Here is the magical part :). Select the first rectangle you created (to do this use your mouse, hold down the CTRL key (or COMMAND key) while clicking on the layer representing the rectangle (Shape1).

How to use Photoshop to create Product Box?

Now, use Edit > Paste Into (or SHIFT + CONTROL/COMMAND + V) to paste into the rectangle. Use Transform (CTRL/COMMAND + T) to transform the front and back side footage to move it to the place.

How to use Photoshop to create Product Box?

If you are new to this you might want to move your points to the position manually, but here is how I did that. First, move the right part to the right guideline, then click with your mouse on the top right corner (for the front side, off course). While holding your mouse, use the combination SHIFT+CTRL+ALT and move the right corner slightly down, really slow. If you did everything as mentioned, the bottom corner will move to the center as well. You should get something like this.

How to use Photoshop to create Product Box?

The last thing we want to do is to create some inner shadows for both sides (40% opacity, 0px distance, 20px size). You can also select both sides and create a white background in back of them. Now, apply the Drop Shadow to the layer with these values: 10% opacity, 10px distance, and 20px size. I also added an outside stroke with the width of 1px, white, to the same layer. Here is what it looks like.

How to use Photoshop to create Product Box?

You should try to experiment for yourself now :)!

48 thoughts on “How to use Photoshop to create Product Box?”

  1. Wow, this tutorial makes it seem so easy compared to those tutorials trying to make the 3D box and then putting path’s to that. Haha. Thanks.

  2. Nice tutorial.

    I noticed you perform this operation at very low resolution. I would recommend starting on a much bigger workspace and scaling down later. I think the skewing functions make images very blurry at low resolutions.

  3. I have wondered about how they are made many, many times. I actually thought you had to use some special “product box” software to make them easily.

    I’m gonna have a go on it and see if you can duplicate your technique.

    Thanks for sharing :)

  4. @ Ali Reid
    Yes, I made this tutorial with lower resolution, but as easily as this box, one can be done with higher resolution as well.
    The point of this tutorial is to show that 3D look can easily be achieved with 2D software like Photoshop and that only the imagination can stop you :)

  5. It’s great, but I don’t understand the “magical” part. Why is this necessary? I think it’s unwanted.

    I made the guidelines and the rectangles as You. After that I imported a picture and use free transform tool and PERSPECTIVE tool. It’s simple and the result is the same.

    Or may I wrong?

  6. @cyrus – there is always another possibility on how to achieve the same effect.

    You asked about “magical” part, well I just wanted to show you how I created the box and applied the texture in it. With all the helpers these days, this is not as “magical” as it used to be :), and yes you can use the perspective for that (if you by that mean edit > transform > perspective), and maybe some other method…

  7. Thx for the tutorial.
    I’ve been always using True Boxshot to do the cover. To know a brick and mortar way to do it is really nice. :)

  8. good tutorial – never used it to create such nice boxes.

    BTW guys, we have Adobe Photoshop CS3 on sale now for only $347.
    If you mention this site, we’ll give a 10% rebate back from Paypal after you place your order.

  9. Thanks. It helps! I was thinking to download some box generator software, but probably, your article give me more space to customize my own box cover :)

  10. Thank you for this. I can’t think of anything to use it for at this very moment in time, but I am sure it will come up in the future. Bookmarked.

  11. I would put some light lines along the edges and maybe some slight black gradient from bottom to top, so it can look more realistic.

  12. Nice tutorial, it’s a simple alternative to using Photoshop Action Scrips to create product eCovers. To answer Bjorn’s question, that’s one of the methods to rapidly generate eCovers using pre-existing templates. Purchasing an e-cover creator is probably the quickest way to produce boxshots on mass, but the action scripts can be found and downloaded free online, and are dead easy to implement.

    These are some of the nicest ones I’ve seen done using paths though.

  13. WOW

    I’ve been through the web for a week now trying to get that goddamn box to look reasonble with no success

    Stumbled upon this tutorial and succeeded in 20 minuets

    Amazaing simplicity!

    Keep on the great work guys !!


    I did not succeed with “the magical” part – couldn’t select the area so i can use the PASTE INTO – I used perspective transform instead, yet I am still interested to acomplish it your way.

    Could you please explain that part again, much detailed for fools like me :)
    A link to a printscreen video would be wonderfull too (you can use Camtazia Studio for free)

    Thanks again!

  14. Wow, that is the simplest way of doing a mockup of a package that I have seen.

    I have seen several 3D plugins for indesign and photoshop that takes ages to generate the images, this makes for a much quicker and easier option.

  15. well it was really a fantastic job done….
    i was also tryin to make the box.
    the problem is i came across Photoshop after a very long time…so not able to make the first rectangle correctly…
    i am not sure how to draw the guides.”We will create guides for the back (50×300px) and front side (150×300px). Now, create the horizontal guides on 10px, 20px, 280px and 290px.” not sure how to draw the 10px,20px etc…please explain….thanks alot.appreciated.

  16. Hey Emanuel,
    Thanks for your idea. I used to be astonished by seeing how the others used to create a software or any other product’s box, but now I’m clear. I’m surely gonna try it! Thanks, man!

    Regards, Sid!

  17. Photoshop is a powerful tool for almost everything you need in graphic and web design.There are design challenges that really benefit from designing in Photoshop, specifically when more flowing, non-linear layouts are called for and experimentation is key.

Leave a Reply

Your email address will not be published. Required fields are marked *