Check out the video on the PixelCorp.com

When I see articles like this, it makes me wonder how amazing it would be if Apple made iWork’s XML editable by any app on your Mac. Then, instead of using a QuickTime movie in your Pro projects, you could do a rough draft of the motion you’re after in Keynote and then open that file in Motion or Final Cut Pro for tweaking and adding of effects. I’ve got my fingers crossed for Snow Leopard!

The most powerful of all these shapes is the Bézier curve (in iWork it is named Draw a Shape). You can use this to create completely custom shapes using smooth paths and then fine tune those shapes by modifying the curves and adding, removing, or altering points. If you’re already an artist familiar with drawing programs, while Keynote has it’s limitations, you can still create some good looking artwork fairly quickly. However, if you’re not an artist or aren’t familiar with how these drawing controls work, you may have a tough time getting the look you want. Also, if your task is quite complex, say, recreating your company logo, you may find that it makes sense to use a true drawing program to create it.

The problem with using most drawing programs is that while the artwork you create can be copied into Keynote like any other image, the resulting artwork in Keynote doesn’t have the same flexibility as Keynote’s native shapes. Because the artwork is being copied in as an image instead of line artwork, you can’t change the colors, you can’t change the line thickness, and you can’t give it a textured fill as you can with native shapes. In many cases, this may not be an issue as company logos are generally used in a small subset of colors and in those approved colors ONLY! If you’re illustrating a presentation with spot artwork dropped throughout; however, you’ll find that having the freedom to change your mind and pick a different color right within Keynote will become essential.

The perfect solution would be to have the option to use the right tool for the job and maintain the editable features of native shapes. Simple shape creation would be handled within Keynote and more complex shapes would be created in a dedicated drawing program then brought over as a true Keynote shape.

Back with version 1 of Keynote, there weren’t a lot of options and the available options, weren’t particularly good ones (one process required PowerPoint). Since then, we’ve seen programs and tools appear that make it possible for anyone to cross the boundary from almost any illustration program to Keynote with all the curves and flexibility you desire. In this series, I’ll go through how to create Keynote shapes – from creating your own artwork, to using clip art.

[update: Ken is hoping to finish this series in 09]

For this tutorial, you’re going to create some simple shapes just to show how the effect works. First, create two rectangular shapes, a tall one on the left and a short one to the right.

Select the tall one, choose Format -> Shape -> Make Editable then hold down the Option key and click to add two more points on the right side of the tall shape (space them roughly as far apart as the height of the short shape).

Click on the higher point and move it to the left approximately to the vertical center of the tall shape. Then, click the lower point and move it to the left as well. It should snap so that it’s lined up vertically with the higher point. Now, you’ve got a tall rectangle with two diagonal lines angling inward. Hold down Option again and create a new point on the upper and lower diagonals. For the upper point, move it down and to the right until it snaps into place with the right edge and the upper inset point. Do the same with the point you created on the lower diagonal… move it up and to the right until it snaps into place.

By the way, If any of these points were created as curves instead of corners, double-click them to convert them to corners (may take two double-clicks).

Now, change the stroke and fill of your tall rectangle to None. (The interface will still show a thin outline around any shape that has it’s fill and stroke set to none so that you won’t lose it!) Double-clicking on the shape should allow you to enter text. As you enter the text, you’ll see that it follows the flow of the shape it’s entered into. Since there’s no outline, it will look like it’s flowing around a shape. Take the short shape you created earlier and move it into the cut-out area that you’ve made. See how it appears that the text is flowing around the shape? This will allow another degree of creativity when dealing with slides that consist of text passages. Try it out with other shapes and curves for even more dramatic results!

I go through the steps outlined above in this presentation.

The program is fun, fairly easy to use and you can quickly produce some impressive effects. By following a few simple steps, you can create content to highlight your presentation that utilizes Keynote’s powerful composition abilities.

For this tutorial, we’re going to use a generator in the default set in Group 2 called “Explosion 3″. This is a good one to use because it has a definite beginning and ending so you don’t have to worry about the movie’s loop marring the look of the animation. You’ll notice that when you click on that generator in the pane on the lower right, it displays the output in the black pane in the upper right. Next, move your cursor over the black pane in the upper left, the cursor will change to a circle with a dot in the middle. This is your placement point. Place the explosion as close to the middle of this area as you can (it doesn’t have to be exact). Now, if you click the Play button, you’ll see it play out the same way as it did on the right. At this point you COULD begin to export it, but instead, we’ll resize the viewing window to make the file as small as possible.

The first thing you’ll want to do is advance to the frame in which the explosion is at it’s most expansive. At the top of the window, click the up arrow beside the frame number to advance (for this animation, its about frame 26).

Once you have this set, moving your cursor over the pane separators will show the resize cursor. Use this to drag the right and the bottom bars so that they come close to but not cover the particles at the outer edges of the explosion. If you’re not sure, just go ahead and leave extra space. Now we’re ready to export.

The quickest way to start this process is to just click the red button in the toolbar.

In the “Save Output as Type:” window, make sure it’s set for QuickTime Movie then click OK.

Next you’ll be asked to choose a location to save the rendered output and to name the file. Enter this information then click Save.

Now, you have to choose a codec that supports Alpha channels. We’ve tested it with None (huge files), TIFF, Animation, and PNG (smallest files) and it works for each (Generally speaking, it’s a good idea to choose the Animation codec here, but try the others for comparison). Finally, in the output options, set the End Frame (for this animation 91 will do) and click the “Save Alpha” button. Then click OK.

After the animation finishes building, open a Keynote presentation and either insert the movie or drag and drop it onto the slide. If you’ve done it correctly, it will look like a transparent area with resize boxes but when you play your presentation, you’ll get a nice looking explosion ready to season the slideshow of your choice!

particleIllusion SE 2.0 is available for $99. When particleIllusion 3.0 is released for OS X, owners of SE for OS X will be able to upgrade for a special low price. You can find out more information and download a demo from wondertouch.com.