Final Image

This is the final image that we’ll be creating:

Step 1

Start off my selecting some of your designs, and open them all up in Photoshop. Then create a new document (200X120px) in size. Paste one of your designs into this new document and fit a nice looking area of the design into the available canvas space. Then create a new 200X120px document and repeat with a second design. Repeat this step until you have a sufficient number of images to represent your work.

Step 2

I chose to go with 9 examples of my work in the end. Now I need to place these images in an exact grid. To do this I just did some simple equations:

My grid is going to be 3X3 images, and therefore will be 600px wide and 360px high. But I also want 20px between each image, and so must add 40px to my height/width. So I open up a new document (640X400px) and begin pasting in my images.

However, rather than use my judgement to place each image I want to make it exact. I paste in my first thumbnail image and then make sure that the object is selected. Then I go to edit>transform>scale. I don’t want to scale my image, but selecting scale brings up a useful menu above my document. You can see from the image below that as well as having scaling options, I’m also given options for the placement of my object on the X and Y axis of my canvas. To place this first image in the very top left of my canvas I simply specific 100px on the X axis, and 60px on the Y axis. I must specify the position where I want my image to start (0px from the canvas edge) plus half of my objects width (100px is half of the 200px thumbnail width), otherwise my object will be positioned incorrectly.

Step 3

Now I place my other 8 thumbnail images. To go over placement again I’ll discuss how I placed my second image (the top row, second column). I worked out that I want my image to start 20px to the right of my first image, which would be 200px+20px (220px). Therefore for my X axis I type in 320px (adding half of my objects width to the 220px value). For my Y axis I specify 60px again, as I just want my object to be positioned right at the top of my canvas.

I use this technique to place all of my other thumbnail images.

Step 4

Now merge all of your thumbnail layers together, and then go to edit>transform>perspective and alter your images perspective so that it looks like the image below:

Step 5

Now go to edit>transform>scale. Look again at that menu that comes up. Next to the X and Y axis settings are width/height settings. Simply change the width from 100% to 50%, and your image should now have a nice perspective to it.

Step 6

Now go to image>canvas size and expand your canvas downwards by 100px. Then move your thumbnails over to near the left edge of your canvas. Finally, create a layer beneath your thumbnail layer called ‘background’ and fill it with a dark color that compliments the colors in your thumbnails (I went for dark purple).

Step 7

Now apply an outer glow blending option to your thumbnail layer. (settings shown below).

Step 8

Now duplicate your thumbnail layer and go to edit>transform>flip vertical. Then use your edit>transform>distort tool to fit the duplicate into a mirrored reflection of the original. This took me a fair bit of time as it can be difficult to match up the corners of each thumbnail exactly, whilst retaining accurate perspective. Once you’re happy with the result hide the outer glow effect on this duplicate layer.

Step 9

Now reduce the reflection layer’s opacity to 30%. Apply a layer mask by going to layer>add layer mask>reveal all. Then drag a black to transparent gradient from the right of your reflection to the left, to fade it into the background.

Step 10

Now create a new layer above your background layer and below your thumbnail layers called ‘clouds’. Go to filter>render>clouds and then reduce your cloud layer’s opacity to 25%. Then use a large, soft eraser to erase away most of the clouds, leaving the most intense clouds at the far end of your thumbnails.

Step 11

Now create a new layer above your ‘clouds’ layer called ‘lights’. Use a very large, soft paintbrush to mark colored brush marks at the end of your thumbnail grid. Make several marks using different colored brushes and then set this layer’s blend mode to ‘overlay’ and it’s opacity to 30%.

Step 12

Create a new layer above your thumbnails layer called ‘light lines’. Use your path tool to draw a long, waving path line around your thumbnail images. Then with a 1px white paintbrush selected, right click on the path line and click ’stroke path’. This should give you a 1px line winding around your thumbnail.

Step 13

Now select your thumbnails layer and click somewhere on your background using the magic wand tool. This should select the area around your thumbnails. To select your thumbnails just go to select>inverse, which should invert your selection. Then return to your ‘light lines’ layer and hit delete. This should leave white lines only going behind your thumbnails, not in front of them.

Step 14

Now apply an outer glow effect to your light lines layer (settings below):

Step 15

Reduce your light lines layer opacity to 15%.

Step 16

Now paste in an image of a person, making sure to find a photo where they are facing roughly in the direction that your thumbnails are positioned. I went with this image, and cut out the woman using the lasso tool: http://www.sxc.hu/photo/1088997. The woman in this photo was already in shadow, but if your person isn’t then darken them a bit, as this fits with the light source coming from the thumbnail images.

Step 17

Now duplicate your woman layer and create a shadow, using the exact same techniques as you did for the reflection of the thumbnails (flip vertical, then distort). Then move this duplicate layer beneath the original, reduce the layer opacity to 30% and apply a black color overlay.

And We’re Done!

To finish things off add some text and use a soft eraser brush to erase away the end of the shadow, so that it appears to fade into the background.