Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Isometric images for blog - Help or Point to Online Tutorial
#1
Photo 
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!
Reply
#2
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.
Reply
#3
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


Attached Files
.pdf   graphpaper.pdf (Size: 122.72 KB / Downloads: 15)
Reply


Forum Jump: