The first step in creating your box, is to make it’s basic 3d shape. To do, we’ll grab the Rectangular Marquee Tool, and make a square that’s slightly larger then one side of your box. Create a new layer, and fill it with a color. At this point the color doesn’t matter, because we’ll be painting over it later. Then, grab the Distort Tool (Edit -> Transform -> Distort), and distort it to be one side of your box – If you want a template for distorting your box sides, get it here.
Next, we’ll want to create the other sides of the box. Grab the Rectangluar Marquee Tool again, and repeat the same step from above. I recommend choosing a different color for each side, just so it’s easy to tell where each layer ends and another one begins.
Now we need to add the box flaps. This follows the same procedure as the sides, but instead of adding one to all four sides, only add flaps to the front two.
Alright, we have the basic shape of our box, it’s time to add some shading, shadows and texture!
The first thing we wanna do is decide on the color of our box – I’m going to go with the normal everyday brown, but you can pick whatever you wish.
Alright, Select one of your flaps (Select -> Load Selection), and then grab the Gradient Tool. Set the foreground and background to #e6c19a & #d2a77a respectively, then, with the Gradient Tool, drag from the bottom to the top of the flap, so there’s a nice gradient on it.
Next, with the layer still selected, go to Filter -> Noise -> Add Noise, and add 1% Monochromatic noise to the flap.
Next, repeat this on the other flap. Make sure you keep the gradient in the same general direction to maintain the look of a single light source.
Now that the flaps are done, we obviously need to finish the rest of the box. Set the foreground color to #ba976c, and the background color to #b08555. Select the front of the box via Select -> Load selection, and grab the Gradient Tool again, but this time set it to a radial gradient. Place the tool near the right side of the layer, and drag it over so it’s over the left side. Now we have one shaded side. Follow the same routine with the noise as we did earlier.
Follow the same routine with the left side of the box, except this time move the center of radial gradient more towards of the center of the layer. Once you’ve added the gradient, you know the drill: Add some noise.
Ok, We’re almost done with the shading, we’ve just gotta do the back! Select a slightly deeper palette of colors (I used #a7825f & #825f3e), and repeat the same steps as we’ve been doing on the other sides and flaps.
Great, we’re all done the shading. Time to add the shadows to the box flaps. To do this, duplicate one of the flaps, and fill that duplicate with black. Next, apply a 6px Gaussian blur, and then Edit -> Transform -> Distort the shadow so it looks like the one shown below.
Once you’re happy with the position of the shadow, Select -> Load Selection, Select -> Inverse the side of the box of which it covers. Hit delete with the shadow layer selected. Next, set the Opacity to about 30%.
Now, repeat the same steps, but on the other flap that doesn’t have a shadow.
Ok, time to add a shadow to the bottom of the box. To do this, grab the Polygonal Lasso Tool, and make a selection around the front two sides of the box. Then, create a new layer below all the others, and fill it with black. Then, apply a 5px Gaussian Blur to the shadow. You can also grab the eraser tool to “fine tune” the edges of the shadow.
Ok, now it’s time to add some shine to our cardboard box. You can skip this step if you don’t want any shine, but I find it adds a little bit more “pop” to the final result.
Create a new layer on top of your box sides, but below your flaps. Next, grab the Elliptical Marquee Tool, and draw a circle over the top 1/4 of the box sides, Next, create a new layer, and fill it with White. Finally, Select -> Load Selection on one of the sides, then Select -> Load Selection, Add to Selection on the other box side. Finally, Select -> Inverse on the selection, and hit delete to remove the excess “shine” from around the box sides.
Then, apply a 5px Drop Shadow to the layer, and set it’s Opacity to about 7%.
If you want a bit more shine, you can repeat the same technique on the box flaps, like I have here. Note, the opacity on this layer is closer to 14%.
We’re almost done, just a couple more steps! Well, a box wouldn’t be much without something in it, would it? Well, let’s fix that. Go find your favourite icon or object, and drag it into the image. Make sure it’s behind all the layers, except for the two back sides of the box.
Next we gotta add a bit of shadow to the front of the icon, because, well, it’s in a box, so it’s darker! To do this, select the triangle-shaped area in front of your icon.
Create a new layer above the icon. Now, grab the Gradient Tool again, and make a Black to transparent gradient in the selected area, like what is shown below. We’ve created our shadow!
Ok, this is the final step, I promise! We’ve gotta put a label on our box, so people know what it is, duh. To do this, create a new layer, and make a rectangle selection in it. Next, fill that layer with black. Finally, select the inside of the rectangle, and delete all but a 10px border around the edges.
Then, with the Text Tool, pick a font you like, and add some text in the center of the rectangle layer we just created, then Merge the two layers (Select them both, then hit Ctrl + E).
If you want, you can grab your favorite grunge brush, and delete some areas on the text & rectangle, to make it look more like a stamp.
Ok, now Edit -> Transform -> Distort the layer, and make it fit onto the box like you see below. As you can see, I’ve created a second stamp and placed it on the right side of the box, in much the same way I made the first stamp.
Yay, we’re finally done! I hope you find a good use for this tutorial, as the box concept can be adapted to many different icons, such as download, unzip, archivers, the list goes on and on.
0 comments