I like to search the iTunes Music Store for Koji Kondo every now and then, just to see if there are any tracks out there inspired by him. In case you didn’t know, Koji Kondo is credited with the little ditty behind Super Mario Brothers. As of right now, a search for Koji Kondo will only result in this instrumental. If you instead search for “Super Mario”, there’s not a lot find that way either, BUT there’s a new track just added recently that I had to pick up. It’s appropriately titled Super Mario Bros. and it’s by C24C. That, of course lead to my creation of today’s shapes! I’ll be the first to say that doing this in a program more suited to drawing would be easier, but where’s the challenge in that? So, relying on my keen instincts, razor sharp wit, and a copy of iWork, I set out on the arduous task of finding and creating good ol’ Mario.

Step one, what does he look like? Sure, I played it for hours when I was a kid, but that doesn’t equate to knowing exactly where every pixel was laid out. Also, my TV was blurry so at best, I’d remember a brownish reddish smearish type thing. Luckily for me, my offsite brain (the internet) had everything I needed. In a flash, I had figured out what I needed to search for (super mario sprite) and had found a site that had the object of my search! I dragged the images right into Keynote and... umm, hold on. Actually, let’s take a step back  and create the thing that’s going to make this lots easier.

Step -1

KEYNOTE DOES NOT HAVE A “SNAP TO GRID” FUNCTION. This is a very important thing to remember as it is the main reason why doing this in Keynote is a semi-bad idea. We’re trying to create an object that is made of straight line segments. To have any one segment not have the right side length could throw things off, and we can’t have things being thrown off. Keynote does have alignment guides though, and, yes, we can use these to our advantage with just a little set up.

First, under the View menu, choose Show Rulers. Then, in the Preferences under Rulers, deselect Display ruler units as percentage, choose Show guides at object edges and deselect Show guides at object center if it’s selected. Now, we need to create the grid using Keynote’s pop-up alignment guides. Place your pointer on the vertical ruler on the left, click, and drag to the slide. You’ll see an indicator letting you know where you are. Drag until you get to the zero point in the middle and drop. Now, create new guides every 25 points until your slide has been filled with vertical guides. Then, do the same horizontally, dragging the first guide to zero then filling in the rest every 25 points. when you finish, you should have the entire slide criss-crossed with guide lines. Now, do it all again, except do it on a Master slide. You don’t absolutely positively need both of these, but I found it easy when attempting to do my own shapes. In fact, it’s so darned handy, it’d be a downright shame keep it to myself, so you can download grid.zip and we’ll continue from there.

Ok, where was I? Oh yeah! Step 1! Open the grid file, get your sprite graphic and drag it onto the first slide, the slide where you see all the grid lines. Be careful as you’re moving the image because one wrong click will move one of your carefully placed lines! Move the image onto the slide and enlarge it so that one of the graphic’s pixels equal to one grid square. Resize and reposition until it fits. It may take a few times, but when you’re finished it should look a little like the image here. Now, you’ve got your image lined up pretty close to the guide lines, but you don’t want to draw with that in the way, so copy and paste the image to your second slide (where the guide lines are a part of the master slide and are invisible). Next, grab the Draw a Shape tool and begin roughly marking out the same color pixel boundaries. Two things to remember,

1. •1, when you click, don’t drag. Dragging creates curves and we don’t need any.
   

2. •2, don’t try to be perfect. This is just a rough sketch to get the correct number of points in approximately the right places. You’ll fix everything up later.
   

Once you’ve got it all sketched out, you will select point by point and move them around until they snap to the nearest horizontal and vertical guide lines. Make sure that the guide lines they snap to extend to the edges of the slide and not just within the nearby points. After you’ve straightened the lines, change the fill to a white color fill and the stroke to two pixels. This will enable you to eyeball the segments to make sure they’re all straight (any non straight lines will show anti-aliasing).

That’s pretty much it! Use the color picker to pick colors from your sprite and you’ve got yet another graphic just waiting to be an attractive graphic for iWeb. Ok, maybe just an attractive graphic for an iWeb Mario fansite. :)