1

enter image description here

I want to know, how it was possible to create the cubes, with their shinny, dark and cubed parts? I know it could be doable with Photoshop, but how? Is there any software better suited to make it than that?

2

To expand on Marc's answer I dug into the source code of the page.

There's a div tag in the html like such:

<div id="runner">
        <img class="parallax-layer" src="http://mortenstrid.no/wp-content/themes/mortenstrid/images/runner_layer_bottom.png" alt="" style="width:1347px; height:642px;"/>
        <img class="parallax-layer" src="http://mortenstrid.no/wp-content/themes/mortenstrid/images/runner_layer_middle.png" alt="" style="width:1307px; height:623px;"/>
        <img class="parallax-layer" src="http://mortenstrid.no/wp-content/themes/mortenstrid/images/runner_layer_top.png" alt="" style="width:1266px; height:603px;"/>
</div>`

Each image (bottom, middle, top) is merely a png, and they are layered on top of one another.

That means there's a script, or numerous scripts that interact to move the images around the page. Off the top of my head I'd say, as I mentioned in my comment, that the images rely on the cursor's X and Y coordinates and adjust themselves according to the coordinates.

At the top of the source code we find a number of different scripts. One of them is called "jparallax" which traces back to this website, where you can find numerous demos.

  • Genius!! for finding me that site. I was looking for that. Thank you – samayo Nov 18 '12 at 2:33
  • When in doubt, ctrl+u :) – Hanna Nov 18 '12 at 2:35
  • Obviously, I got this thanks to you: stephband.info/jparallax/demos/index.html – samayo Nov 18 '12 at 2:38
  • Ctrl+U? Which OS/Browser are you using Johannes? (^_^) – Kevin Bomberry Dec 15 '12 at 22:12
  • I'm using Windows. This shortcut works in Chrome and Firefox, and I wouldn't be surprised if it worked in other major browsers either. I'd assume the Mac equivalent would be cmd+U, but it could be different. – Hanna Dec 16 '12 at 22:09
2

From the web site's about page:

I'm first and foremost an Interactive Visual Designer, but I also possess an high skill level in Programming, Motion Graphics, Video and 3D Animation.

Web: HTML/CSS, Flash/AS3, Jquery/AJAX, PHP/MySQL, Wordpress, Tumblr, Dreamweaver.

Design and Motion Graphics: Photoshop, Illustrator, After Effects, Premiere, Mocha.

3D: 3DS Max, V-Ray, SynthEyes.

Given the way the image looks, my guess is that it was modelled in 3D Studio Max, rendered using V-Ray, possibly with some post production in Photoshop (it looks like the parallax effect was created by using 3 separate images, so a little tweaking in Photoshop may have been needed).

  • Almost what I thought about the parallax being 3 images, and indeed being parallax. But, I was just searching for plain parallx tutorials or scripts, but all of them are different types, just full background slid parallax thing, do you know what this effect is particulary called? – samayo Nov 18 '12 at 0:59
  • I can't tell you what it's called, but I can tell you the the three images use the mouse coordinates to shift each image. They probably shift on a particular scale, meaning the first image moves x amount more than the second image, which moves x amount more than the third image. – Hanna Nov 18 '12 at 1:57
-1

I think this must have been created with Cinema 4D.

  • 1
    Impossible to say really which 3D software in particular was used here. It could have been cinama 3D. – kontur Dec 15 '12 at 10:21
  • 1
    The creator says he uses 3DS Max, V-Ray and SynthEyes on his website. – Marc Edwards Dec 15 '12 at 12:35
  • 1
    Yes, but you could have used Cinema 4D, used a body mesh for the Shape Object then a MoGraphic function to fill the body with cubes, a Random effector to change the shapes of the cubes, then rendered it out... The smaller cubes/particles, were probably rendered as a second scene then composited in Photoshop... Just saying that Cinema 4D could also be a good answer... (^_^) – Kevin Bomberry Dec 15 '12 at 22:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.