Quick simple way to make something look isometric?

[GameViewPoint]

I'm working on a card game where I want to make my straight on designed cards look isometric. Does anyone have the quickest/simplest way to do this with the 3D tool in photoshop? I imagine it's something like Postcard, and then using the orthographic, with some angles set? I've had a try but can't get it right.

Thanks for any advice.

[Noel Carboni]

You're not talking about making them look like they have perspective, but truly isometric?

If you're not already in the 3D world with these things, there are a couple of Edit - Transform functions that can do it for you.

You can use Edit - Transform - Skew, then a bit of Free Transform to narrow the result to make something look like it's on an angle and be isometric (equal angles)...

You can use Edit - Transform - Perspective, then a bit of Free Transform shortening to give something the look of perspective...

-Noel

[c.pfaffenbichler]

I think the OP means »no foreshortening« when they say »isometric«.

GameViewPoint, could you please post an example?

[c.pfaffenbichler]

Why postcard? Don’t you want depth?

If so a simple transformation of a Smart Object should do nicely in my opinion.

Otherwise try orthographic.

[GameViewPoint]

Don't need depth, that's the setting I was trying but I couldn't get it to the normal isometric view with the rotation tools, so I was wondering if someone knows what numbers to put in to get it to looks isometric.

[conroy]

Rotate -45 degrees

Scale height by 72%

[Noel Carboni]

By the way Christoph, try saving your screen grabs as PNG files - the forum software doesn't botch up the red places as badly.

-Noel

[c.pfaffenbichler]

Thanks for the heads-up, Noel.

GamePointView, have you tried the orthographic setting yet?

And, as Noel recommended, simply skewing the original content?

[GameViewPoint]

I've tried orthographic , but I can't seem to get the right view with just messing around with the rotations, also I'm not sure what I should be rotating, so I was wondering if someone knows what steps to take, plus what numbers to put in, so it sets the postcard'ed item to isometric.

[c.pfaffenbichler]

Sorry, I had missed that you mentioned that (»orthograpic«) in the OP … sloppy reading on my part.

[c.pfaffenbichler]

Have you tried -30˚, -60˚, 0˚?

[GameViewPoint]

Something more like this...

[c.pfaffenbichler]

I would recommend starting with a square Smart Object, skewing that and then moving in the actual content (even if not square).

[GameViewPoint]

There's no way to do it with the 3D tool? would prefer to go down that route because it gives me more flexibility if I want other angles.

[conroy]

I showed you how to do it above.

Rotate then scale.

[c.pfaffenbichler]

More flexibility than a transformed Smart Object?

But a lot less convenience in my opinion.

Edit: But in principle I think it should be achieveable in 3D – but I haven’t figured out the values yet, either.

[GameViewPoint]

I want to change these values to achieve the isometric look.

[station_two]

You may want to review the Wikipedia entry on isometric projection to get some inspiration regarding the numbers you seek:

Excerpts:

An isometric view of an object can be obtained by choosing the viewing direction in a way that the angles between the projection of the x, y, and z axes are all the same, or 120°. For example when taking a cube, this is done by first looking straight towards one face. Next the cube is rotated ±45° about the vertical axis, followed by a rotation of approximately ±35.264° (precisely arcsin(tan 30°) or arctan(sin 45°) ) about the horizontal axis. Note that with the cube (see image) the perimeter of the 2D drawing is a perfect regular hexagon: all the black lines are of equal length and all the cube's faces are the same area. There is isometric paper that can be placed under your normal piece of drawing paper as an aid.

In a similar way an isometric view can be obtained for example in a 3D scene editor. Starting with the camera aligned parallel to the floor and aligned to the coordinate axes, it is first rotated downwards around the horizontal axes by about 35.264° as above, and then rotated ±45° around the vertical axis.

[c.pfaffenbichler · Accepted solution]

I don’t think you are doing yourself any favours with that.

Anyway, with trial and error (and without understanding why) I get these values:

[Noel Carboni]

Not intended to be particularly helpful, just fooling around with Photoshop's 3D facilities some more, showing the difference between Orthographic and Perspective views.

-Noel

[conroy]

Deleted. I see Christoph already posted the camera rotations.

[GameViewPoint]

-55 or -54.7 for the x though?

[conroy]

Hi

-54.7 is more precise but I don't think it would make a visible difference to the renderings.