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!
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.
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!
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.
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.
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.
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:
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:
Now, invert the layer by pressing Shift-Command-I (PC: Shift-Ctrl-I) and set the layer blending mode to multiply.
The corners will be a bit dark, so reduce the transperency of the layer to about 80%.
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!
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.
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!
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: