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 :)!

Emanuel Blagonić

A Designer and Developer in one. With years of experience in design and front-end development, nowadays he is more of a project manager than a designer. Specialized in responsive design and UI design for touch–screen interfaces, Emanuel is also strongly connected with WordPress.

blog comments powered by Disqus