Isometric images for blog - Help or Point to Online Tutorial

[paulsharpe85]

Hey everyone,

I've been trying to figure out how to create blog cover images in the style of a website theme that I purchased but haven't had any luck.

Can anyone show me or point me to an online tutorial for creating images like these ??  I know they're SVGs with sortof isometric shapes and gradient backgrounds, but I can't put it all together.  

   

   

Thank you!

[tmanni]

You can obtain isometric "view" of any shape by applying successive affine transformations.

For the "right" view (like the first image in your post):
1) with the rotate tool : rotate by -45° angle
2) with the scale tool : scale the height by 0.5773
3) with the rotate tool : rotate by 60° angle

For the "left" view (like the second image in your post):
1) with the rotate tool : rotate by 45° angle
2) with the scale tool : scale the height by 0.5773
3) with the rotate tool : rotate by -60° angle

You can also apply these 3 transformations at the same time by using the Gegl graph filter:
1) Ensure the layer has alpha channel: Layer > Transparency > Add alpha channel
2) Filters > Generic > GEGL graph... replace the text with :

Code:

rotate degrees=45
scale-ratio x=1 y=0.5773
rotate degrees=-60

with the Clipping option set to Adjust.

[rich2005]

If you want to eye-ball it

Make your image 'flat' (that's the difficult bit, requires some artistic ability), then deform it with the unified transform tool. Helps using a graph paper background and leave the gradient until after the transform.

   

edit: for anyone interested my graphpaper file