How does one best convert an image to show at an angle so it portrays depth?

Content
1

Hi all,

I’m not sure what the technical term for this is so I’ll just explain it in lame man terms.

On some websites one can often find images of TV or monitor (i.e. laptop, desktop) screens that are shown at an angle. It’s not a case of rotating the image according to the X axis but rather doing so at the Y axis so they exemplify depth.

How can I achieve this effect?

I’m not a Photoshop expert, is there any simpler software out there that would do the job?

Am I right in thinking that first of all we design the image facing towards us and only then do we apply the right angle/depth (and not the other way round)?

Thanks,

2

Oh okay, photoshop can do this very easily. I’m assuming you are talking about this sort of thing? (superquick example below)

If so the only thing you need to do is use the Free Transform command (EDIT > Free Transform) and then hold down the Apple key (Alt on PC?) and drag the 4 corner points of your screen shot to the 4 corner points of the screen. Hey presto! Done. You may need to crop some off the top/bottom/sides depending on scale.

3

The flash transform tool does rotate on the y axis.
Ah yes how i do wish other software would be able to do the same.

One can also do transparency in Flash by making the image a symbol and then choosing alpha in effect of that symbol.

In photoshop, illustrator, and fireworks transparency and alphas are self explanatory it is juset finding the fill or opacity percentage bars and dimming them down to your desired value

4

Thanks for your insight. I’ll look into it.

The images in question need to have a transparent background.

A lot of graphics tools it seems support rotating along the X axis but not the Y axis.

5

This is exactly what I mean, thanks for this.

I was worried something like this would require me to be a Photoshop guru but from what you say it’s a simple process.

I’ll install Photoshop and give it a go. Surprising how lots of imaging software doesn’t support such practises.

Thanks again.

6

Thanks for your input.

I’m referring to screenshots of web pages, TV programs, images/photos etc. that later get scaled and pasted onto an image showing a screen (say a TV or laptop) so it appears as part of the photo.

I can think of a website as an example but it’s out there, it seems common where someone is selling software for example. You often get some man or woman (user) smiling at their laptop while the laptop screen has the software shown on it.

Perhaps my long memory is better than my short memory but I definitely remember Microsoft using this technique in it’s Windows Millennium Edition promotional video dating back to 2000.

7

Are you talking about 3d models drawn in software and manipulated or physical objects that are photographed/videoed for product previews on a website?

They use quite different processes to achieve the rotations if you start to add in the Y axis to video/photographic previews. 3D models are easy to manipulate once the model has been made.

8

hmm i dont know if this would be helpful, i hope it is but it is a real around the box solution:
I have personally used the transform tool in Adobe flash, which allows you to bend things you draw seemingly at angels or tilt them at angels and then export it as a png or gif.

The one problem is flash is that one must have a background colour and if i dont want to have a background, then I will take that exported image and edit out the background colour.

Hope i helped!