In this tutorial i will show how you can create a professional, high quality, sharp looking box shot cover for your software. I will not go into the basics of actually creating the images for the box, i am assuming that you allready have 2 images to place on the box, a front image and a spine (side) image. These images can be easily done with Photoshop too, with pretty simple techniques. Maybe i’ll throw a new tutorial later explaining how you can achieve this going from scratch.

Ok, by now you should have 2 images, the front image of the box, and the spine image (the side). I will create a new file in photoshop with, lets say, 450px width by 450px height. I’m doing it quite small assuming the final image is to be used just on the web. If you’re going to use it for print be sure to enlarge those dimensions and also the resolution: 72dpi is good for the Web but not for Print. You should go for at least 300dpi for Print.

With our new photoshop file, the first thing i’m going to do is to “Copy-Paste” the 2 images into 2 new layers. This is very simple: just open your images, be sure to merge all the layers in those images (if not merged allready) but leave the background layer out of it, we need the images transparent around the edges. When you Copy-Paste between different files photoshop automatically creates a new layer for the clipboard contents.

Here’s my file with the 2 images on it, one in each layer. I renamed the layers so you can clearly identify them:

Ok, now that we have both images, we need to add a new layer just above the background. To do this, click on the background layer to select it and the on the “new layer” icon on the layers palette, at the bottom:

This new layer you can call it “grid”. To rename a layer is as simple as double clicking its name. Actually you dont need this layer exactly above the background, you can have it anywhere as this will be deleted at the end. Make it there and if you need it elsewhere you can allways move it around later.

In this layer we’re going to draw a perpective grid. Drawing perspectives involves a bit of knowledge of a few concepts, like vanishing points, center view points, and so on… To keep it simple all you need to know is: a vanishing point is a point on the horizon in the distance where two lines seem to converge and visibility ends. When using more than one vanishing points (in this case we’ll use two VP’s) the line that connects these 2 points represents the horizon line, wich also represents the eye height. The center view point is the position of the viewer.

So, lets represent this concepts in a grid. First lets turn off visibility of the side and front cover layers. Click on that little eye at the left of the layers to toggle visibility. If the eye’s not there it means the layer is invisible.

Now, lets start by creating 2 vanishing points.In order to get a good perspective we need to create these points very close to the edges. I will simply use the LINE TOOL in FILL PIXELS mode, as illustrated below:

You need to be in FILL PIXELS mode or you will create multiple layers with vector masks. This way is a lot much simple.

So, the first vanishing point at lhe left i will make a small crosshair, and then another small crosshair at the right for the second vanishing point:

Now i am going to join these points together with another line. You can use the same color if you like:

Now create a vertical line, a little to the left of the image center, like the one below. This is the center view line :

Ok, the axis are there, the only thing we need now are the “parallel” lines. To draw these lines you will allways start from the vanishing points, and these lines have to cross the center view line at exactily the same point, like illustrated below:

Ok, the first line is there so go on and do some more lines from top to bottom, starting allways from the vanishing points and crossing on the center view line at exactily the same spot.

With our grid layed out, all we need to do now is place the the box layers into perspective. Lets start with the front cover layer. Click the eye next to the layer to make it visible (well, the eye isn’t actually there, we’ll see a square where the eye shows when the layer is visible, so go there and click on the square). Now move the box so that the left edge becomes aligned with the center view line (the vertical green line).

With the front cover layer selected go to the EDIT menu and choose TRANSFORM and then DISTORT. Then grab the right handles (top and bottom ones) and adjust the position of those handles, so that the top edge of the box becomes placed along one of the parallel lines of the grid, as shown below:

Be sure to make the image a little smaller on that side (reducing the width of the front cover box, as shown above). What happens is that as objects become more far away from our eyes they will become smaller and smaller and at one poit the will disapear. Wanna try it? Grab a pen an extend and retract your arm so that the pen gets closer and away from your eyes. Looking at the pen you will clearly see that the pen size increases when its closer, and shrinks when its far away.

Ok, back to our box. Do the same on the bottom right handle, and you’ll get something like this:

The front cover is ready, so lets go on to the side cover. The procedure is exactily the same: turn the layer’s visibility back on, and choose Transform -> Distort from the EDIT menu. Now you need to move the left handles.

Last, delete or toggle visibility of the grid layer and there you go:

You can now enhance the box with shadows or nice light effects, lens flares, and so on:

Hope you enjoyed this tutorial, have fun!