Pixelmatrix Design

As promised, here’s a walkthrough on the process that Michael Sigler and I came up with for making smooth screenshot layouts that are non-destructive. It takes a bit of work, but it pays off with some amazingly beautiful screenshots.

Getting Started

You will need:

• Photoshop CS2 or higher
• Illustrator CS2 or higher
• A few screenshots of your product
• Patience
• Basic Photoshop skills

If you don’t have a screenshot to play with, you can use these example screenshots:

Now that we’ve got all our tools, make sure you’ve got both Illustrator and Photoshop open, and let’s dig in.

Prepping the screenshots in Photoshop

Masking out the the shadow and stroke from the original screenshot.

Open up both of your screenshots in Photoshop. We’re assuming you want your screenshots to be smaller in your design than what they are currently. I recommend taking a screenshot on a Mac with Command-Shift-4, hitting spacebar, and capturing the full window. Either way you do it, you’ll want to mask out the shadow, and background from your screenshot so you just have your window on a transparent background.

Important: There is usually a 1px stroke around the window that will really cause problems unless you mask it out of your screenshot image. You can add this back in the final step as a layer style.

Creating the layout in Illustrator

Here’s where we mix things up. Illustrator has some pretty powerful 3D effects that let you rotate objects in perspective, and change the values later on without destroying your work.

Placing the screenshots into Illustrator

First, create a canvas that’s roughly twice the size of the desired end result. Place your screenshots into Illustrator at full size (File → Place…) and make sure that you check the “Link” box.

Example canvas with both screenshots at twice the size I want them. Click to view full sized.

Then, shrink down your screenshot to roughly twice the size you want it at (Zoom out to 50% to get an idea of what size it will be).

Setting up the 3D rotate effect

Next, lets apply some 3D effects. Go to Effect → 3D → Rotate…. You can use whatever settings make sense for you. You’re going to want to set the X and Z axis’ to 0º, and play with the Y axis, and Perspective values. It takes a lot of playing around to find the right angle for your screenshots.

Here are the settings I used for my example:

X: 0º | Y: 30º | Z: 0º | Perspective: 25º

To test the settings you’re playing with, you can turn on the Preview. Once you have your settings perfect, press OK, and repeat the process for your other screenshots.

Hint: To make screenshots face opposite directions, just change the Y value of one of them to a negative number and leave all the other settings the same.

Arrange your screenshots how you want them to get a good idea of how it will look.

Back to Photoshop again

Now, it’s time to put everything together in Photoshop and apply some nice effects. Create a new document that’s the size you’ll be using these screenshots at, or use an existing document you’ve got open (like a website design).

Copy your screenshots one at a time from Illustrator by selecting the screenshot, pressing Command-C, and pasting (Command-V ) it into your Photoshop document.

You should be asked how you want to paste it in. Select “Pixels” for best results.

Once you’ve got your screenshots in (remember, they should be about twice the size you want to use them at), apply the filter “Unsharp Mask” (Filter → Sharpen → Unsharp Mask) to each of your screenshot layers. This helps the screenshots to be more readable.

The settings I used to sharpen the screenshots with Unsharp Mask

Then, select both of your screenshot layers and shrink them down to size. Pay attention to the toolbar where it says what size you’re shrinking it to in case you want to paste these in again in the future.

My screenshots shrunk down and aligned

Important: You’ll only want to resize these once because each resize you make blurs the layer more.

Finally, style these however you like. I suggest adding a 1px, black, ~10% transparent stroke to give it some definition, adding a very faint gradient in screen mode to give it some shading, adding surface and cast shadows, and reflections.

The final screenshot layout. Click to view larger.

You can download my sample PSD to see how I applied these effects into a complete screenshot layout.

If there is enough interest I may post a second part on how to style these screenshots. Let me know if that is something you’d like to see in the comments.