• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Quick simple way to make something look isometric?

Explorer ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

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.

Views

66.8K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Aug 16, 2012 Aug 16, 2012

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:

3DIsographic4.jpg

Votes

Translate

Translate
Adobe
LEGEND ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

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)...

Isometric.png

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

Perspective.png

-Noel

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

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

GameViewPoint, could you please post an example?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

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.

orthographic3D.jpg

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

Rotate -45 degrees

Scale height by 72%

Screen shot 2012-08-16 at 15.30.53.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

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

RedColor.png

-Noel

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

Thanks for the heads-up, Noel.

GamePointView, have you tried the orthographic setting yet?

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

Have you tried -30Ëš, -60Ëš, 0Ëš?

3DIsographic.jpg

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

Something more like this...

IsoExample.jpg

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

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

3DIsographic2.jpg

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

I showed you how to do it above.

Rotate then scale.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

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

Screen-Shot-2012-08-16-at-15.38.17.jpg

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

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:

3DIsographic4.jpg

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

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

Cards_Orthographic.jpg

Cards_Perspective.jpg

-Noel

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

Deleted. I see Christoph already posted the camera rotations.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

-55 or -54.7 for the x though?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

LATEST

Hi

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines