I am available for freelance work - HIRE ME

Create Simple Photoshop Screenshot Template (or, Just Download the Free Template)

posted by Matt Ward on Dec 10, 2009.

In this post we will look at how to make a Photoshop template for creative display of screenshots on your website or blog. It’s a really simple process, but if you don’t want to go quite that far, well I’m also making the template available as an exclusive freebie!

If you’ve visited the Echo Enduring Blog before, chances are that you might have seen some of the different website screenshots that I use – most notably in my weekly Echoes posts. If you’ve never been here before, welcome! Here’s a sample of what I’m talking about!

Preview of the FInal Image

Preview of the FInal Image

I’ve had some inquiries about how I create these. It’s actually really simple, and no I don’t use any special software. I do it all in Photoshop, using a template that I set up in a few simple steps. Today, we’re going to take a quick look at how to do this.

Step 1

The first thing that you are going to want to do is get yourself a screenshot of whatever it is that you want to capture. There are different ways of getting this, depending on what kind of platform you’re running. Here are the two that I know of.

Mac: With the window that you want to capture open, just press Shift-Command-3. This will take a shot of the screen and save it to the designated folder (the default is the desktop). Depending on what version of OS X you are using, the file may save in different formats. I’m using Leopard and the screenshots are always in PNG format.

Whatever format it saves in, open the file and double click on the background, to transform it into an actual layer.

PC: With some of the most recent versions of Windows (Vista, XP), you can capture a shot of the screen simply by pressing the often forgotten and somewhat obscure Print Screen button on the keyboard. This will save the current screen to the clipboard. Now, in Photoshop, just create a new document. The program is smart enough set the size of the document to match the contents of the clipboard, so simply paste the screen shot into the document as a new layer.

I will be using a screenshot from Visual Swirl, a relatively new design blog!

Visual Swirl Screenshot

Visual Swirl Screenshot

Step 2

Next, we simply right click on the screen shot layer (in the Layers Pallet) and convert it to a smart object. This will become the fundamental building block of our template. Whenever we want to change the site that is being previewed, we can just change the contents of the smart object.

Step 3

Next, crop the image down with the Image » Resize Canvas option. I set mine to 500px x 500px, since this is the size of image that I typically like to use. Because we have a Smart Object set up here, the contents of our screenshot won’t get cropped away, which is important.

Document cropped down to 500px by 500px

Document cropped down to 500px by 500px

Step 4

Next, we want to rotate the Smart Object. Select that layer and choose the Move tool from the toolbox and grab one of the handles of the Smart Object (which will now be off the canvas). This will take you into distortion mode, and allow you to rotate the object. I rotated mine by about 8 degrees, counter-clockwise (in other words, a numeric value of -8).

Next, grab the Smart Object itself and move it around so that it is positioned nicely within the the frame of the canvas.

Rotate the Smart Object -8 degrees

Rotate the Smart Object -8 degrees

Step 5

Lastly, we will add a simple vignette to complete the effect. Add a new layer and select the gradient tool from the toolbox, select the radial gradient and set the tool’s blending mode to multiply. Now, select the standard black and white gradient, position your cursor in the middle of the canvas (I usually just approximate), and draw a line from that point to one of the corners (I usually to to the top left).

This will create a nice black and white gradient like this:

Basic Black and White Radial Gradient

Basic Black and White Radial Gradient

Repeat the process several times. Because the blend mode is set to multiply, the black will grow and the white will shrink. Keep repeating until you have something like this:

After Repeating the Gradient Several Times

After Repeating the Gradient Several Times

Now, invert the layer by pressing Shift-Command-I (PC: Shift-Ctrl-I) and set the layer blending mode to multiply.

The Inverted Gradient

The Inverted Gradient

The corners will be a bit dark, so reduce the transperency of the layer to about 80%.

Preview of the FInal Image

Preview of the FInal Image


That’s it folks. Pretty easy, isn’t it? Now save the document with some sort of name to designate it as a template. If you want to use this same effect on something else, just open up the Smart Object and replace the screenshot. When you replace the smart object document, it will automatically be updated in the main document!

You can actually use a similar technique in a variety of different instances too! Any time you need an element that can be easily updated, you should at least look at using Smart Objects. Chances are they will be able to help you out!

Exclusive Freebie

Okay, so you don’t want to go through the whole process of creating this kind of template for yourself? Fair enough I suppose. And, just because I love all you readers out there, I’ve decided to make my own template available as an exclusive freebie.

Download the Template

Download the Template

Grabbing the pack is easy. Just check your feed reader for my most recent post, and look for freebie code at the bottom of the entry. Then, click the download link below, which will take you to the Crawling Vines download page. Enter the freebie code for immediate access to the pattern pack.

If you’re not currently subscribing to my blog, it’s not too late! Just add my feed to your RSS reader of choice! Not only will you get access to this awesome pattern pack, you’ll also get all sorts of other awesome content delivered right to your reader!

» Grab the RSS Feed

» Download the Website Screenshot Template

Well, I hope you find either the tutorial or the freebie useful! If you have any concerns or questions, or if I failed to make something clear, please do let me know by leaving a comment. Also, I’d love to hear about some of the ways that you have found to use Smart Objects!

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!


Dec 16, 2009

freddy says:

vignette fail?

you are falling in a trend and that is bad. why tilt the shot? why use a vignette?

Dec 16, 2009

Matt Ward says:

I tilted the screen shot primarily for interest’s sake. I wanted the preview shots to be more interesting and I personally feel that the tilting adds a little something.

As for the vignette, I just thought it ads a little extra depth. It’s an effect I enjoy.

Thanks for your input though!

Dec 16, 2009

Noel Wiggins says:

As a graphic designer looking to promote my business I realized that the biggest challenge is that the “product” I am selling is my past work. The designer in me wants to make some crazy cool 3D stuff or cool grungy frilly scrolly thingys, or some cool ass hand panted layout that will surely show people I know what I am doing.

But the problem is, that that will only get you so far, the real substance to your “product” is samples. And so now my biggest challenge is to come up with creative ways to present this work, so that it showcases the work but is esthetically pleasing with in the layout of my actual piece.

I have noticed this technique in many blogs about website design, and now have a great process to think about when I want to update mine.

thanks for demystifying this process…

Thanks and Regards

Noel for Nopun.com
professional graphics design

Dec 16, 2009

Richie says:

fair enough, i guess :) … thanks for the tip :)

Dec 17, 2009

Arjun Phlox says:

Great tip, thank you!!

Dec 17, 2009

Fred Lin says:

Wow..funny how I’ve seen these screenshot a million times , but I’ve never ever noticed that there was a vignette applied! Thanks for the insight! :)

Mar 21, 2010

Guillaume says:

The print screen touch for capturing Windows’ current screen is a veeeeeeery old functionality. Alt+Print screen captures the current window (ie application, explorer…) and print screen the full screen.

Sep 11, 2010

ExampleMag says:

Also it would be good to use Transform tools to get some perspective for the original screenshot.

Oct 3, 2010

Ahmadinejad Obama says:

Very nice .
Thank For Sharing,Can I use them on a Free Hosting

Aug 19, 2011

Danno says:

Wheres the code to download it?

Aug 19, 2011

Matt Ward says:

Download codes can be found at the bottom of entries in the RSS feed.

Jul 11, 2012

tap chi design says:

Great ! Thank for sharing this tutorial

Leave a Comment

Copyright © Echo Enduring Media 2009-2015