Skip navigation
Currently Being Moderated

Quick simple way to make something look isometric?

Aug 16, 2012 6:34 AM

Tags: #3d

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.

 
Replies
  • Noel Carboni
    23,482 posts
    Dec 23, 2006
    Currently Being Moderated
    Aug 16, 2012 6:48 AM   in reply to GameViewPoint

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 16, 2012 6:47 AM   in reply to GameViewPoint

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 16, 2012 6:51 AM   in reply to Noel Carboni

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

     

    GameViewPoint, could you please post an example?

     
    |
    Mark as:
  • Noel Carboni
    23,482 posts
    Dec 23, 2006
    Currently Being Moderated
    Aug 16, 2012 6:55 AM   in reply to c.pfaffenbichler

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 16, 2012 6:58 AM   in reply to Noel Carboni

    Thanks for the heads-up, Noel.

     

    GamePointView, have you tried the orthographic setting yet?

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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 16, 2012 7:10 AM   in reply to GameViewPoint

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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 16, 2012 7:15 AM   in reply to GameViewPoint

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

    3DIsographic.jpg

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 16, 2012 7:31 AM   in reply to GameViewPoint

    Rotate -45 degrees

    Scale height by 72%

     

    Screen shot 2012-08-16 at 15.30.53.png

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 16, 2012 7:33 AM   in reply to GameViewPoint

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

    3DIsographic2.jpg

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 16, 2012 7:38 AM   in reply to GameViewPoint

    I showed you how to do it above.

    Rotate then scale.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 16, 2012 7:41 AM   in reply to GameViewPoint

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 16, 2012 8:02 AM   in reply to GameViewPoint

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 16, 2012 8:04 AM   in reply to GameViewPoint

    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

     
    |
    Mark as:
  • Noel Carboni
    23,482 posts
    Dec 23, 2006
    Currently Being Moderated
    Aug 16, 2012 8:12 AM   in reply to c.pfaffenbichler

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 16, 2012 8:55 AM   in reply to GameViewPoint

    Deleted. I see Christoph already posted the camera rotations.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 16, 2012 9:13 AM   in reply to GameViewPoint

    Hi

     

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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points