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?

Improve this question
2

3 Answers 3

Reset to default
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.

Improve this answer
5
  • Genius!! for finding me that site. I was looking for that. Thank you
    – samayo
    Nov 18, 2012 at 2:33
  • When in doubt, ctrl+u :)
    – Hanna
    Nov 18, 2012 at 2:35
  • Obviously, I got this thanks to you: stephband.info/jparallax/demos/index.html
    – samayo
    Nov 18, 2012 at 2:38
  • Ctrl+U? Which OS/Browser are you using Johannes? (^_^)
    – Kevin Bomberry
    Dec 15, 2012 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, 2012 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).

Improve this answer
2
  • 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, 2012 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, 2012 at 1:57
-1

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

Improve this answer
3
  • 1
    Impossible to say really which 3D software in particular was used here. It could have been cinama 3D.
    – kontur
    Dec 15, 2012 at 10:21
  • 1
    The creator says he uses 3DS Max, V-Ray and SynthEyes on his website.
    – Marc Edwards
    Dec 15, 2012 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, 2012 at 22:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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