Posts Tagged ‘cs3’

Creating a Perspective Screenshot

Wednesday, April 30th, 2008

Distorted New York Times Screenshot Perspective screenshots seem to be all the rave in the Web 2.0 world these days. What follows is a quick primer on how to create this effect in Photoshop CS3. In order to create the effect, you need a screenshot of your website, document or other item you wish to distort. For this demo, I’m using the New York Times website.

First you’ll open your screenshot and make sure the layer isn’t locked. If it is, copy and paste the screenshot as a new layer. I often do this by creating an entirely new RGB image. Now the easy part, make sure you have the layer you wish to distort (in this example, it should be the only layer) and click “Edit” > “Transform”. Here you’ll find a bunch of great filters which you should play with when you have a few minutes.

Photoshop CS3 Menu Screenshot

The first two give you similar functionality as the Free Transform tool. The real power comes from Skew, Distort, Perspective and Warp. Each tool has some unique powers that let you create scaled perspective images, page corner turns and other fun distortions to your image.

To create the NYT screenshot above, I simply used the Perspective tool, dragging the bottom right control handle a few pixels to the left. Next to clean up the image, I scaled it down so it was a more optimal size for my allocated space (35% of the original size) and then saved it out with “Save for Web & Devices” formerly Image Ready. That’s it - it’s really very simple. Enjoy!

© 1998-2008 AF-Design, All rights reserved.