The Discover Boating website is an initiative from the Marine Industry Association of New Zealand with the aim being to educate and encourage people on all matters boating.

I worked closely with the the team at MIA to replicate the content from their existing site and set up a similar structure in the WordPress platform.

Once the structure was developed I then began work on the look and feel. It was important that the new site look and work pretty much the same as the existing site so as not to present any undue suprises to the users.  I did manage to squeeze in a few subtle enhancements and for those using browsers that support some of the newer CSS3 options (Firefox, Chrome, Safari) then the interface is enhanced with rounded edges, shadowing and more.

Overall the transition from the old platform to the new WordPress based environment went very well indeed.

Check out the discoverboating.co.nz web site here.

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.

For some reason, copying and pasting between Illustrator and After Effects hadn’t been working for me. Perhaps I had changed an option somewhere.

Turns out it was a really easy fix. So for all those that haven’t had any luck with copy and paste from Illustrator to After Effects (CS4 at least) it’s as easy as changing the following:

Preferences > File Handling and Clipboard > Clipboard on Quit

Then enable the Copy As > AICB checkbox, and then enable the Preserve Paths checkbox.

Click here to play the game. (1MB)

Sometimes you get a Flash interactive project that is just great fun to work on … this was one of them.

While working at Martian Design I had the opportunity to develop a series of Flash based games for the mintshot.co.nz website. This was one of my favourites. The goal of the game was to disarm a bomb and save your prize from exploding. If you saved it, you won it.

I worked closely with Tony from Martian Design and we conceptualised the game, the sequences and the Flash interaction that was required. We came up with a look for the game and then Tony got to work on the majority of the artwork and  I got to spend some time in Adobe After Effects creating the inevitable explosion sequence.

Tony used a combination of Adobe Illustrator, Adobe Photoshop and Maxon Cinema 4D in creating the bomb casing and internals. I used Adobe Photoshop, Illustrator and Adobe After Effects to create the explosion sequence and I then put the entire project together in Adobe Flash.

I really enjoy using Adobe After Effects and being able to integrate After Effects with Flash interactive is something that I’m looking to do a lot more of in the future.

Click here to play the game. (1MB)

(Note the load screen is pre-release and the server interaction for winning prizes is disabled).

It’s no secret that I’m a big fan of Adobe Fireworks and just recently I was reminded why.

I was putting together a small job for a client who needed to put the finishing touches onto his website. He has a video trading website and one of the requirements when listing videos for sale is to include a censorship rating. We have about 9 common labels ranging from G through to R .. and in typical fashion the artwork available was pretty poor and needed to be redeveloped.

I wanted to display the labels via CSS and knew that I was constrained to retaining as much as I could of the official label so that it was recognisable but I also needed to provide a reasonable area so that the client could provide censorship descriptions; eg “Contains low level violence”.

Here is the slightly redeveloped label.

These labels have rounded corners and, in most graphics programs, when you scale an object with rounded corners you get distortion. This is true of Fireworks and is it’s default behaviour … unless, however, you convert your object into a 9 slice symbol.

1. Create your symbol

I started by drawing the objects that would be consistent across the range of labels and converted them into a symbol. The point of using a symbol is that if you can update the original symbol file anytime and that change will be reflected through your artwork. Very very handy indeed.

Here is my basic symbol.

2. Turn it into a 9 slice symbol

Nine slice symbols essentially let you define an area of your symbol that will scale when you resize your symbol .. and other areas (the corners) that wont. Here is how I set mine up.

Firstly you need to enable the 9 slice option in the properties inspector

Then you can drag the blue guides on your artwork until you have them something like shown below. With this setup I could expand my label width considerably and still retain the correct proportion for the corners and the sides.

So why do you need this?

Here’s an example of what happens when I scale this object with & without the nine slice option.

So there you go.

Tip number 1. Use Symbols.

Tip number 2. If you need to scale your Symbols then using the 9 slice option can save you a lot of time.

Like so many businesses, Creative Space had a web site that simply didn’t reflect the nature and quality of their work. Until now that is.

Creative Space are a Tauranga based architectural studio who had outgrown their previous web site. They needed a new look to aid in a marketing campaign and it needed to be very clean and very sharp .. just like their work.

I worked closely with Andre & Troy from Creative Space and produced a number of design variations based upon common themes of space, subtlety and crispness.

The site is designed to showcase their great work so we are using large images with large thumbnails throughout the site and, combined with professional photography, the end result is very visual and it becomes very easy to grasp the nature of their work.

There are subtleties too, such as the fade effects on the thumbnails and project loads (achieved with a combination of CSS & jQuery) as well as the custom typeface (handled via Cufon for maintainability) and a brief logo reveal on the homepage. These all combine to add a feeling of quality to the web site.

I’m very pleased with the end result and look forward to working with Creative Space in the future.

To visit the Creative Space website please click here.

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.

Calling a javascript function from within Flash is pretty simple. Here’s how you can use it to run some jQuery effects .

I used this technique when creating the Snowberrybeauty.com website. With this website the background was entirely done in flash with the HTML elements stacked over the top.

For the homepage of the site I hid most of the HTML elements with CSS … then just before the Flash intro has finished playing, I called the javascript function below. This faded in the HTML elements just as the intro came to a stop.

Here’s what you need.

1. In your web page set up a javascript function to fade in the desired elements.

function showHtmlElements(){
$('#element1').fadeIn(1000);
$('#element2').fadeIn(1000);
}

2. In flash, when you want to activate the function, just use some simple actionscript like this.

getURL("javascript:showHtmlElements();")

That’s all there is to it. Easy.