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.
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 (50×300px) and front side (150×300px). Now, create the horizontal guides on 10px, 20px, 280px and 290px. OK? Let’s move on.
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.
You did this? You should now have something similar to the box on this picture.
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 50×300px back and 200×300px front. If you are doing this for the first time, forget the writing on box and experiment with the pictures instead :)
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).
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.
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.
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.
You should try to experiment for yourself now :)!
Share and Enjoy
If you want wants to launch a website for your business then it is not a big deal in today’s world. Different websites are offering cheap web hosting services to their users. People need to pay only a small amount of money to launch their business online. There are websites providing dedicated hosting as well. For the businesses that are directly communicating with their clients online, can use the facility of ecommerce hosting. Different packages are offered by different websites which are providing the facility. The web host offer different packages for their users. The next step is the web site design. A developer can take help from different web development packages which are easily available. To make it look better, one can take help from the graphics packages, and can add photoshop design in the website. Once the website is designed fully, it could be launched online by choosing the best domain host.
Sunday, July 22, 2007 @ 8:46
thank you for this tutorial
Wednesday, July 25, 2007 @ 20:31
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.
Monday, July 30, 2007 @ 6:30
Ya seriously the 3d box ones drive me insane. Thanks for the write up
Saturday, August 04, 2007 @ 19:33
Great Tutorial. I was looking for such a tutorial.
Tuesday, August 14, 2007 @ 1:45
Thank you - precise and fast way. I like it.
Tuesday, August 28, 2007 @ 3:10
Emanuel, I had always wondered how to do that. What a cool technique. Thanks!
Tuesday, August 28, 2007 @ 12:59
Great stuff - seems so…easy now…..
Tuesday, August 28, 2007 @ 15:22
Wow, you made that look so easy! This is really helpful, and it looks great, thanks!
Wednesday, August 29, 2007 @ 6:54
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.
Wednesday, August 29, 2007 @ 12:11
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 :)
Wednesday, August 29, 2007 @ 15:51
@ 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 :)
Wednesday, August 29, 2007 @ 15:52
Thanks for the comments everyone. I am glad you like this tutorial - sometimes is helpful to have a starting point :)
Saturday, September 01, 2007 @ 14:12
Great and easy tutorial. Thanks. Keep on keepin’ ON!
Thursday, September 13, 2007 @ 16:28
Good tutorial but i think, designing these boxes in Illustrator with the 3D function is much easier :)
Thursday, September 13, 2007 @ 19:50
I agree with you Betty, but what if you don’t have Illustrator around?
Friday, September 28, 2007 @ 12:49
Hey thats really good stuff.
One question: is there a download for this tutorial?
Saturday, September 29, 2007 @ 20:07
Great stuff. Posting to my site now…
Monday, October 01, 2007 @ 15:54
@Fitline: No, the download is not available, sorry :(
Tuesday, October 09, 2007 @ 21:20
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?
Wednesday, October 10, 2007 @ 19:56
@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…
Thursday, October 18, 2007 @ 8:36
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. :)
Tuesday, November 06, 2007 @ 12:57
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. http://4-ps.com
Wednesday, November 28, 2007 @ 12:46
Good tutorial..it seems we can create 3d effects in photoshop too. Thanks for this tutorial. :)
Wednesday, January 02, 2008 @ 3:57
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 :)
Tuesday, April 22, 2008 @ 7:29
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.