Just a very quick post to say a massive thank you to Nick Campbell (greyscalegorilla.com) for his superb HDRI Light Kit Pro for Cinema 4D.

I’ve been following along with many of Nicks excellent tutorials for a while now and just this afternoon, after watching his recent tutorial about animating the totem from inception, decided to purchase his HDRI Light Kit Pro set up for Cinema 4D.

I’ve got to say that it certainly makes lighting much more intuitive and it’s much easier to get great results (for a newbie such as myself at least). Here’s my render below.

I was looking through some photos on my phone recently and came across this hard-case photo of my boy. This is his “I’m stuck to the floor” pose but to me it looked more like kung-fu … and an opportunity to try a little more photoshop compositing.

There were a number of steps in putting this image together, and though I wont go through each of them I’ll mention some of the more interesting ones.

1. One of the first things that I had to do was cut Ash off the background of the original photo. This was just a camera phone shot and was pretty noisy and blurry. I used the quick selection tool to get a pretty close selection then tidied it up by manually painting in black or white where required.

2. Ash’s shadow was repainted. I selected a shadow color from the background image rather than just black as that helps to keep things a little more believable. For the shadow layer make sure the blend mode is set to multiply.

3. I applied some back lighting to Ash using the same technique as in the luminous butterflies image. I also dropped the intensity of the original highlights on him to try to better match the light in the background image.

4. Because Ash hadn’t had a haircut for a while I decided to go for a sort of “70′s look”. I adjusted the overall colour with curves and then applied some orange-ish gradients. I set the blend mode on these to ‘color’ to blend them in a bit more and get the effect I wanted.

5. Lastly I added lots of lens dust  and some vignettes to seal the deal.

You can see the final composite below. Click for a larger version.

Final photoshop composite

Sticking with my theme of actually doing tutorials (and not just watching along) I wanted to experiment with a very cool lighting technique demonstrated by photoshop legend, Russell Brown, in this fantastic tutorial.
http://tv.adobe.com/watch/the-russell-brown-show/samurai-poster-part-2/

We had a nice afternoon out at a local park when something caught my little one’s attention. We took a quick photo (as you do when you have kids) and when we returned and looked through the photos I realised that this was the perfect pic to try out the technique.

I wont go into all the details here unless some really wants me to break it down. Suffice to say that I sourced an image of something that looked like butterflies and composited it into the the original photo. I then made some color adjustments, added some noise and integrated the awesome relighting technique from the tutorial above. Click the image below for a comparison and be sure to click through to Russell Browns great tutorial.

I recently needed a blurred futuristic grid / network style image with a dark background. Instead of grabbing some stock imagery I decided to create the image myself using Cinema 4D, Adobe Photoshop, Lens Blur and Fireworks.

Cinema 4D

1. To set things up in Cinema 4D I set my render size to 1280×720 and dropped a camera into my scene.

Then, to create the net/grid object, I dropped in a ‘platonic’ basic shape and set it’s radius to 385m, segments to 6 and Type to Icosa.

1. Initial set up in Cinema 4D

2. Then, to turn this into a grid / net type of look I dropped in an ‘Atom Array’ and then, in the objects panel, dragged the Platonic under the Atom Array so that it became a child of the Atom Array. I then adjusted the settings in the Atom Array as follows: Cylinder Radius 0.65m, Sphere Radius 3.46m, Subdivisions 11. You can obviously change these to be whatever works best for you. This gave me the basic grid look that I was after

2. The Platonic as a child of the Atom Array

3. I duplicated the Atom Array a couple of times and positioned them to the left and right of the original so that my grid had a bit more substance.

3. Duplicated Atom Array

4. I then made a quick material to apply to the objects.  It’s a very simple material as there isn’t going to be a great deal of detail in the final image. I adjusted 3 settings. Firstly I gave the material a light blue colour. Then secondly I added a little bit of luminance and lastly I added a little bit of glow. Once that was complete I dragged the material onto the 3 Atom Array objects.

I also added a basic omni light into the scene just to brighten things up a bit.

5. A quick render of the grid showed that it was too sharp. I could have applied a general blur in Photoshop but I wanted to try and create a bit more depth and interest so decided that I would use Photoshop’s  great Lens Blur option. The best way to get a great result from the Lens blur in Photophop is to use a depth map. A depth map is basically a grey scale representation of what’s in focus and what’s out of focus.

Because we’re using Cinema 4d we can simply adjust the depth of field setting in the camera and then, when it comes time to render the image from Cinema 4d, we can also choose to render a depth map as a separate file. Nice.

TIP. There are a couple of advantages in rendering a separate depth map and applying the lens blur in Photoshop. Firstly, it takes a bit longer to render with the depth of field turned on in C4D. Secondly, if we have a separate depth map, we can then tweak the settings in the Photoshop (or After Effects) over and over until we’re happy with the result. It’s much easier to experiment with the different options, it’s much faster and it gives you a lot more flexibility than just rendering the depth of field as part of your main image from Cinema 4D.

So .. to add a Depth Map to your render just do the following. In the Cinema 4d Render Settings options choose, ‘Multi-Pass’ and then choose ‘Depth’ from the bottom of the drop down list. Then make sure, under the ‘Save’ options to tick both the Regular Image and Multi-Pass image.

Render Settings in Cinema 4D

Here is the final render from Cinema 4D. It’s pretty plain and way too complex to be used as a background but we’ll fix that with some effects in Photoshop and Fireworks.

Final render from Cinema 4D

Photoshop

7. I opened my render into Photoshop and then opened the separate depth map file in a new Photoshop document, selected it, copied it and then moved back to my original Photoshop file with of my render, clicked into the channels panel and pasted the depth map in. I then named the channel as depth1 and turned off it’s visibility.

Depth Map pasted as a new channel

8. Now we add the lens blur. Click back onto your render in the layers panel and then click ‘Filter > Blur > Lens Blur’.

Lens Blur window in Photoshop

In the options on the right hand side, in the ‘Depth Map’ panel click the ‘Source’ drop down list and select the depth map that we added in the step above. Now try adjusting some options like the radius and the specular highlights etc. You can get some pretty cool results here and it’s so much easier to do this in Photoshop rather than having to render different options from Cinema 4D.

Experimenting with the Lens Blur options

9. When you are done just click ok. This will close the Lens Blur window and take us back to the main workspace in Photoshop.

I still felt that my image needed a bit more work so  I duplicated the layer and then set the transfer mode on the duplicate to ‘Overlay’. This created a more vivid image. I was happy enough with that look so I saved the PSD file and then moved onto Fireworks.

Ste the transfer mode of the duplicate to Overlay

Fireworks

Fireworks is my web design application of choice. It will do some of what Photoshop does but because it’s specifically geared toward making web ready images it’s much faster and easier to create website layouts in. I wont go into all the details with Fireworks but basically all I did was set up a new document with a black background and then drag in my photoshop file.

I added a Gaussian blur to the Photoshop image as I wanted to knock back the detail considerably (this is a background image after all) and then added some black to transparent gradients over the the top, bottom and edges of the grid image just to blend them out to the dark background. Lastly, I decided that black was too dark, so I added a new layer over the top of everything and set it to a dark blue colour. I then set it’s transfer mode to ‘Color’ and was left with the result in the screenshot below.

Basic set up in Fireworks. Note the layers.

When all that was done I then went ahead and produced the first draft of the web site with the background in place.

First draft of the website with background in place

To wrap up

I really enjoy experimenting with different applications and one of the key things that I love about Cinema 4D is the way that it can easily create Multi-Pass files. These are incredibly useful when it comes to compositing images  as in the example about with our Depth Map. Being able to take that Depth Map and use it inside Photoshop or After Effects is very cool indeed.

I hope you found something useful in here and if you have any questions please feel free to leave a comment or email me.

Here is my take on another fantastic Greyscale Gorilla tutorial from Nick Campbell – Precomping in After Effects.

You can find the original tutorial here.

Thanks Nick.

I have to confess that I spend invest a lot of my time in keeping up with the huge number of fantastic tutorials available these days. I’m addicted. Vodafone will be happy to hear that as I’m almost always going over my monthly data limit.

One of the things that really interests me is motion graphics so any chance that I get to fire up After Effects  and Cinema 4D is welcomed.

However .. I recently went to attempt a small job that a Cinema 4D render would have been ideal for. Upon opening Cinema I realised that I actually had no idea how to do it. This was very strange as I was certain that I did know how to do it because I had seen a tutorial somewhere.

This quickly brought me to the realisation that, though I had been investing my time in watching these fantastic tutorials … I hadn’t actually been following along. I hadn’t been using the tools. It was theory vs practice and I wasn’t doing the doing.

So with that revelation I decided that I would follow along and complete at least one tutorial per week  then take that work and put my own spin on it.

The first one I attempted was the fabulous ‘Cascading Text tutorial’ from the Nick (HE is the gorilla) at www.greyscalegorilla.com

Here is my render of Nick’s tutorial.

And here’s the same technique in a completely different setting.

All in all – I highly recommend you putting aside a bit more time and working your way through the amazing tutorials that these talented people are kindly sharing.

Check out the links in the sidebar to some great Motion Graphics resources.

Sometimes you want to be able to show an object in 3d on the web. If you are looking for a high quality render then the best way that I know is to use pre-rendered footage and import that into flash. Sure it’s not a true 3d environment but the end result is very convincing. Let me show you how I made the example here.

I chose a local company here in Tauranga that are known for making great sleep systems (that’s ‘beds’ to you and I). They put a lot of work into the design of their products so for this example I have chosen one of their beds. I also chose one to sleep on … but that’s beside the point.

Cinema 4D

To start with I found a couple of source photos on the web and used those as a basis for creating a model in Cinema 4d. I wont go into all the details of creating the model as there are people around that know far more about it than I do. (Check out Pariah Studios for some handy tips when it comes to modeling in Cinema 4d. )

Once I was happy with the model, I added a camera and animated it around the model over 90 frames. I used a technique demonstrated by Robert Leger in the breakdown of his winning entry to the Motionworks unplugged title challenge. A clever technique where you add a spline to your scene, attach a targeted camera to the spline and then keyframe the camera’s position along the spline. Very simple and effective.

I added some object buffers to the various elements in the model so I could isolate them later and then rendered out the animation for After Effects.

After Effects

Once I had the animation I took it into after effects and tweaked some colours (object buffers are very handy for isolating and color correcting specific parts of your scene), added a vignette (which I could have done later in the flash stage come to think of it) and generally got the clip looking how I wanted it to look.

Then it was time to render out an FLV from After Effects for the import to Flash.

TIP. I specified to create a Keyframe at every frame during the export process. It does add considerably to the file size of the FLV .. but for this type of scene, with a lot of sharp lines, I found that anything less caused an unacceptable loss in quality.

Flash CS4

Once you have your FLV rendered out, you can import it into flash using the Import Video command. Import your video into the timeline as a MovieClip .. don’t stream it or import it as a video object. If it’s imported as a MovieClip it becomes very simple to scrub the movie back and forth.

Once your import has completed and you have the MovieClip on the stage, give it an instance name so it can be targeted easily with Actionscript. I called mine:

flvMC

Then, double click on the MovieClip and add a stop action to the very first frame. This will stop the movie from playing automatically once the swf loads. The actionsctip for this is simply:

stop();

Now we need to create something to let people interact with the MovieClip. For this I chose the Slider Component (which I think is only available in ActionScript 3).

Drag a Slider Component out of the components panel and onto a new layer in your timeline then give it an instance name. I called mine:

sliderCOMP

Now we just need to hook the Slider Component to the MovieClip and the job is virtually done. To do this we need a few things.

Component Inspector

Firstly, click on the Slider Component in your timeline and open the Component Inspector window.

1. We need to make sure that ‘liveDragging’ is set to true.

2. Remember back in Cinema 4D I rendered this animation out over 90 frames? Well in the ‘maximum’ setting set this to the same number as the total frames in your animation. So for me this is 90.

Now the last thing that we need to do is tell the slider to talk to the MovieClip. Again we need a tiny bit of Actionscript for this. Here is mine and you can adapt as required.

sliderCOMP.width = 690;

import fl.controls.Slider;
import fl.events.SliderEvent;
import fl.controls.Label;

sliderCOMP.addEventListener(SliderEvent.CHANGE, changeHandler);

function changeHandler(event:SliderEvent):void {
 flvMC.gotoAndStop(event.value);
}

So what’s happening here?  Firstly I’m setting the width of my slider so that it takes up more of the canvas.

Next, we’re importing the classes that deal with the Slider Control.

Then we’re adding an Event Listener to the Slider Control .. this means that we can run another piece of code (a custom function called “changeHandler”) every time something happens with the Slider.

Lastly, we are creating the ‘changeHandler’ function. What this function is doing is simply telling the MovieClip to ‘goto and stop’ on a specific Frame number. It gets that frame number from the sliders position.

Because we set the maximum value of the slider to be the same as the number of frames that are in the MovieClip then all we are really saying is ‘if the slider moves to position 10, move the MovieClip to frame 10 and stop’.

Round up

This process may look fairly complex but in truth it’s actually pretty straight forward. What we are doing is enabling the user to scrub their way back and forth through some movie footage. The movie footage just happens to be a 3d render of an object. Therefore the end result is the effect that the user is rotating the object in a 3d environment.

Have fun.

I’ve recently been putting together an opening sequence for a website I’m developing for a local architect. While I was putting this together it got me thinking that it would be quite nice to animate the clouds moving slowly through the scene. I wanted the effect to look convincing but I don’t want to have to render a 20 second video sequence because it would make the file size too large. Enter Flash.

I remembered a video tutorial I watched over at Aharon Rabinowitz’s web site, www.allbetsareoff.com.
The tutorial is “Creating 3D Cloud Motion From a Still Image“. Aharon’s tutorial is designed for Adobe After Effects and the end result is very effective so I thought I’d try something similar in Adobe Flash CS4.

You can view the final effect here (the animation is quite subtle) then follow on for a step by step breakdown of how the effect was achieved.

View 3d sky animation

Step 1.

The first thing I had to do was take the original image supplied by my client and cut out the sky. I have done this quite quickly for the example here so you can see a few jaggie lines along the roof edge. I wont go over how to cut up imagery in photoshop as there are already a heap of great photoshop tutorials out there.

There was a small problem with the flares from the lights on the house. In a couple of instances these cover over the a section of the sky. The easiest solution here was to just cut them along the roofline as I was cutting the sky then simply redraw them back in on a separate layer.

When I was finished I was left with a photoshop file with just the house and the light flares over a transparent background.

Step 2.

Now we need to find an interesting sky image.  Here is the one that I settled on and color corrected to match the original sky.

Replacement sky image

It’s quite a bit larger than the original image and this is because we need to animate it. In hindsight I could have chosen a picture with a little more detail near the bottom but this one will do for now.

Step 3.

Now that we have our assets we’ll start putting things together in Flash. I’m using Flash CS4 and we’re going to take advantage of the ‘sort of 3D’ environment in Flash CS4 to set up the sky background in perspective.

Firstly I imported the photoshop files (clouds and house) and converted them into movieclip symbols.

I put them on separate layers and arranged them so that the clouds layer was at the bottom of the layer stack and the house layer was at the top.

Step 4.

Now our assets are in the right places we can use the 3d positioning tools to manipulate the cloud layer to get that effect that we’re after.

To illustrate what’s happening here I have substituted the cloud layer for a checkerboard pattern so that it’s easier to see the perspective effect.

Animated checkerboard to illustrate the perspective effect

Checkerboard substituted for sky image

All you need to do is select the 3D Rotation tool in the flash tools menu, click on the sky (checkerboard) and rotate it around it’s X-axis until it looks something like this.

Checkerboard rotated around it's X-axis

As well as the 3D rotation and translation tools , Flash has some other tools that can help us get the look that we want. These are found in the properties panel under the ’3D position and view’ options and are the ‘Persepctive angle’ and ‘Vanishing point’ tools.

The easiest way to see what these do is just to click on the values and drag them left and right. I found that by adjusting these options as well as the checkerboard’s Y and Z-position I was able to get the checkboard to a place that worked for this effect.

Step 5

To finish off the effect all we need to do is animate the checkerboard’s 3D X-position over time from right to left. I could have done this with Actionscript but for simplicities sake we’ll just use the timeline.

Make sure that you are on frame 1 of your animation and adjust the 3d X-position to somewhere that looks about right. Here’s a picture of what looked about right for me.

Checkerboard in position 1

Then add some frames to your animation. Mine is running at 25 frames per second and is about 600 frames long. Go to about frame 600 in your animation, select both layers and press ‘F5′. That will extend your animation out to 600 frames long.

On the sky/clouds layer, right click and choose ‘create motion tween’.

Then, still on the sky/cloud layer, click on the last frame in your animation to set your playhead to the last frame.

Then click back onto the checkerboard movie clip and adjust the 3D X-position left until you get something that looks like this.

Checkerboard in position 2

By setting a start position on the first frame and an ending position on the last frame you should now have created a motion tween animation. To test it out hold down command key (or control key if using windows) and press Return.
That should compile your animation and open it up in a preview.

Once you are happy with the effect, just swap out the checkerboard image for the cloud image, recompile and you’re all done.