Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 1 down vote favorite

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?

share|improve this question
The cubes were probably made in a 3-D program. But I'm far too inexperienced for any further insight. – Johannes Nov 18 '12 at 0:35
1  
quite similar to this question - graphicdesign.stackexchange.com/questions/11198/… – sam Nov 18 '12 at 23:23

3 Answers

up vote 2 down vote accepted

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.

share|improve this answer
Genius!! for finding me that site. I was looking for that. Thank you – php NoOb Nov 18 '12 at 2:33
When in doubt, ctrl+u :) – Johannes Nov 18 '12 at 2:35
Obviously, I got this thanks to you: stephband.info/jparallax/demos/index.html – php NoOb 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. – Johannes Dec 16 '12 at 22:09
up vote 1 down vote

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).

share|improve this answer
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? – php NoOb 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. – Johannes Nov 18 '12 at 1:57
thanks, that helped a lot. – php NoOb Nov 18 '12 at 2:34
up vote -1 down vote

that must have been created with cinema 4d

share|improve this answer
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

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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