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.
