Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

How could I slightly rotate a photography thumbnail like this? (e.g. first web videogamer.com):

enter image description here

How and how much should I rotate the photography to change the perspective in a slightly 3D way? Is there a tutorial I could follow to make it correctly, so it looks nice and not "As-I-think"? I will appreciate it, thanks.

share|improve this question

migrated from photo.stackexchange.com Jul 2 '12 at 11:51

This question came from our site for professional, enthusiast and amateur photographers.

1  
Essentially: Select image layer, Ctrl+T for Free transform, and while in Free transform press Ctrl+Alt+Shift and start pulling one of the corner points. Here's some examples on that, and other free transform techniques: photoshopessentials.com/basics/free-transform/page-2.php –  Joonas Jul 2 '12 at 12:57
    
Note that the page-1 in that url shows simple rotating and stuff. It seems that I only answered/commented regarding the question in the title. –  Joonas Jul 3 '12 at 8:37

4 Answers 4

The easiest way to do this is still by hand. To avoid too much "as-you-think" perspective there are a few things you can do:

  • Start transforming with the perspective tool and make corrections with the free transform afterwards.
  • Take a picture of a slightly turned paper (e.g. business card) and then match the corners with your shot, essentially imitating the perspective.
  • Ideally, do this with a SmartObject and every file you will drop into the SmartObject will have the exact same perspective.

Good luck

share|improve this answer

You can use a layer (not a clipping) mask and then use free transform to rotate the image the desired amount. If it is for the web use this link http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/perfectly-rotate-and-mask-thumbnails-with-css3/

share|improve this answer

You can also use CSS3 to 3D-transform images. This would probably be nice in combination with a CSS3 drop-shadow.

Alternatively, in Photoshop, I would use the perspective/skew/distort transform tools (kinda what Lollero suggested). Then you could copy the 3D layer, completely decrease the exposure (Image > Adjustments > Exposure..) of this copy, put this layer behind the original 3D layer, and complete it to make it look like it has a depth dimension as well. (as if the image was on a rectangular 3D shape).

share|improve this answer

If you are using Photoshop CS6 Extended (or even Photoshop CS5 Extended) you can convert your 2D layer into a 3D layer (Postcard) then you can move the camera to any position you'd like without destroying the bitmap information... you can even edit the 3D Postcard source (your file) and update it, and the 3D view will update automatically. Super simple.

More to the point, if you are doing this for a website, create an Action that just takes a selected layer, Convert to 3D Postcard and then position the Camera/Current View to where you like it, then stop and save the action. Then, for new images that you want to add to the website (that follow the same look), just open the image and run the action. Simple! All of your artwork will look the same. When you want to change the camera angle, just re-record that step in the Action. This provides you with a non-destructive and fully-editable workflow. Cheers!

More information on Photoshop's 3D features can be found at: http://www.photoshop.com/products/photoshop/3d

And example of this in action is in an answer to a very similar question: Perspective manipulation

share|improve this answer
    
Why would you use 3D for simply rotating an image? This seems unnecessarily complicated. A simple transform/rotate is all that is needed. –  DA01 Jul 3 '12 at 6:11
    
A simple transform is destructive, converting the layer to a 3D Postcard keeps the layer editable. Say the layer had some other elements, like a "On Sale" button, you could go into the 3D Postcard and remove the button and then re-render out the final (with the same angle, etc). The Perspective Transform is a 2D trick that is destructive. So I ask you, why wouldn't you use the 3D tools for the transform? Here is an example in a similar question: graphicdesign.stackexchange.com/questions/8204/… –  Kevin Bomberry Jul 3 '12 at 11:58
    
"So I ask you, why wouldn't you use the 3D tools for the transform?" because even though I love my pneumatic nail guns and air compressors, sometimes a plain ol' hammer is the more practical tool. –  DA01 Jul 3 '12 at 14:20
    
Right.... It think you're missing the point here. When you use the 2D Transform you are destructively adjusting the original raster information, and it cannot be undone (sans Undo right after or History) once you close the document—not to mention that doing it the 2D ways does not help the "perspective" issues asked in the original question. By using Photoshop's 3D features, it becomes non-destructive. Not only that but you can always open the saved file and adjust it to your hearts content—if you decide you want to change all of the graphics' angles, you can. It's simply a better process. –  Kevin Bomberry Jul 7 '12 at 19:34
    
No, I get the point. Your job is to promote a particular cool tool in PhotoShop. It's not always the right tool, IMHO. –  DA01 Jul 7 '12 at 19:50

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.