Tutorials: Design/Layout

[Theorie] Isometrie: richtig verzerren

   
In diesem Tutorial will ich auf eine Problemstellung bei der isometrischen Verzerrung in Photoshop, Illustrator und Ähnliche hinweisen.

Dazu habe ich erst ein Rechteck mit der Beispielseitenlänge von 5 erstellt.



Dieses wird nun unter "Bearbeiten" -> "Frei Transformieren" so geneigt, dass es im Winkel von 30° zur Grundlinie (eine waagrechte Linie) steht. Dazu gebe ich ins Feld "V" (Vertikal neigen) den Wert des Winkels ein:



Danach ist die untere Kante meines Rechtecks die Hypotenuse eines Dreiecks aus Rechteck und Grundlinie. Zur Verdeutlichung:



Isometrie heißt, dass alle Seiten gleich lang sind, wie in der Realität. Wie man an den mitgegebenen Maßen ablesen kann, ist das momentan allerdings nicht isometrisch, weil die untere und obere Kante länger sind als die senkrechten seitlichen Kanten.

Nun müssen wir ein bisschen rechnen. Dazu erst eine Gleichung, die Variablen sind angelehnt an Pythagoras (c = Hypotenuse, b = Kathete, in diesem Fall die waagrechte untere):



In diese Gleichung setzen wir nun unsere Werte ein. Wir nehmen also den Cosinus von 30° und die benötigte Kantenlänge 5 der Hypotenuse, um auszurechnen, wie lang die Kathete sein muss.



Nun wissen wir also, wie lang unsere Kathete sein müsste. Allerdings kann man nur relativ transformieren, weswegen wir nun die Relation zur momentanen Kathetenlänge von 5 ebenfalls ausrechnen.



Wir wählen unter "Bearbeiten" wieder den Befehl "Frei transformieren" und setzen im Feld "B" (Breite) den Wert ein. Das Runden fällt natürlich nicht sehr ins Gewicht, weil der PC eben nur auf Pixel genau berechnen kann



Nun ist unser Rechteck korrekt verzerrt. Wer will, kann die Kantenlängen mit dem Messwerkzeug in Photoshop nachmessen.



Ein Objekt muss also in der Isometrie immer ca. 86,6025% so breit sein, wie das normale Objekt.

Ich hoffe, meine Gedankengänge waren nachvollziehbar und hilfreich. Feedback ist wie immer erwünscht

Gruß,
Ben


Login