Apologies for the lack of new material here. I know my 4 avid readers are missing out

I’m currently doing a bunch of work with the great folk over at Cucumber Software in Tauranga. That’s keeping my busy for at least 4 days / week.

I’m also investing a heck of a lot of time into Sentinel as well as working my way through a backlog of client work.

At the moment I’m not taking on any new clients but you are more than welcome to drop me a line and I may be able to recommend someone for you.

All the best and thanks for bearing with me.

Mark

We’ve just launched the Australian version of www.dts.net.nz over at www.dtls.com.au. The site was pretty much a copy of the New Zealand site with content adjusted so that it was appropriate to the Australian market. The homepage however had a different feature image and the image that was selected was pretty bland.

I suggested that the image might look a bit more appropriate if we included the DTS circle logo on the laptops in the image .. that would give it a bit more punch and reinforce the brand (plus it gave me a legitimate reason to try out the photoshop vanishing point feature).

What is vanishing point?

Vanishing point is a pretty cool feature and it has been in photoshop for a couple of versions now. It basically lets you create a series of planes in perspective and then align artwork or use the clone tool along those perspective planes. You can also use vanishing point to create 3d environments for Adobe After Effects .. which is very cool too.

What is the process?

It’s pretty simple. You open your image and click Filter’ > ‘Vanishing Point’. Your image opens in the vanishing point workspace and you can then select the appropriate tool and begin drawing out perspective planes over reference points in your underlying image.

Once those planes are in place you can click OK and they are then saved with your file (you don’t need to recreate them each time you apply the filter).

How did it work?

The result was pretty cool . .but I found that vanishing point didn’t seem to be as simple as it should have been.

Drawing the planes was easy .. but when I had the planes in place and copied my artwork into vanishing point I found that as soon as I dragged it onto the perspective plane it did indeed snap to the correct perspective (which was the correct thing to do) but at the same time it became very large. So large in fact that the transform handles disappeared outside of the plane area .. which meant that I couldn’t see them .. and that meant had to keep moving my artwork around in the plane to find the handles in order that I could resize it. Frustrating. I also found that using the transform handles was a bit unreliable .. sometimes they would transform the object, sometimes they wouldn’t. Even if I scaled down the artwork considerably before bringing it out onto the place the problem still happened.

Another slightly annoying thing was that I could only paste 1 instance of my logo artwork into vanishing point at any one time. I’m sure there is probably a reason for that but it just meant that I had to go through the steps a few more times than I would have liked. Basically this meant ‘paste, hunt for transform handles to resize, move to correct position along the plane, resize some more then hit OK. Then go back into vanishing point and do it over again for the next 3 logos.

End result?

Overall I was pretty pleased with the end result. This was a pretty simple transformation (and yes it was simple enough that I could have just used the free transform tool) … but I’m glad that I gave vanishing point a go and It looks like something that I would use again in the future. I didn’t think it was quite as intuitive as it should have been. The oddball resizing of the logo was pretty annoying and wasted a bit of time .. but overall it’s a nice tool to have in the box.

Here are the before and after shots.

Before

After

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.

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.

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.

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.

Cross browser testing is one the realities of creating web sites & web applications and it’s one of those things that can be a bit of a headache from time to time.

My setup here is pretty standard. I have a newish iMac for my day to day work as well as a Windows laptop. On the mac I run Firefox and Safari while on the laptop I have IE6, IE7 & IE8. That covers me pretty well for the majority of browsers but sometimes I’m working off site, my laptop is playing up or I need to show a client how something looks in IE6 vs Firefox 3 … enter Adobe Browser Lab.

List of browsers available in Adobe Browser Lab (Nov 28th 2009)

Adobe Browser Lab is a web based service that essentially allows you to enter a URL which it then takes a screen capture of in many different browsers. It’s quite fast, it’s extremely handy and, for the time being at least, it’s free.

You can do side by side comparisons of the screen shots as well as overlaying one screen shot on top of another and adjusting transparency between the two to see any differences.

Of course it does have some limitations. You can’t interact with the content which means that you cant check things like hover states or expand containers or tabs etc. But for the most part it’s still a useful service and it has certainly helped me out a few times.

Like right now in fact as I have just remembered I never bothered to test this site in IE and Browser Lab has shown me that it has some rather bad layout issues. I best get onto that