Exporting layers from Gimp as PNG files

Gimp for MacOSX is now a "native" (-ish) application, and is a great graphics tool for game developers - especially those who can't afford Photoshop.  I've always used it and wouldn't go for PhotoShop as I know GiMP so well now.

You can create animations in layers and Gimp allows you to preview your animations when you've done them as a bunch of layers, by simply invoking the handy "Animation" option in the menu:  "Filters" > "Animation" > "Playback..." - very nice.

But now how do you export those layers as a collection of separate PNG's so you can import them via TexturePacker into your game?

It turns out there is a handy Gimp plug-in to help you - but installing it is not for the faint-hearted.

Installing Plug-ins for GiMP on Mac OSX

On Windows or Linux the process is comparatively easy and is described in a nice tutorial.  If that article happens to be unavailable the GiMP registry lists a number of others.  On MacOSX where normally things "just work" for some reason its a lot more obscure.

The first insight is to know how to find your plugin folders.  Use the Preferences menu in GiMP to find the Folders item and choose "Plugins":

I didn't use the one for just my user name because I wanted the changes in GiMP to be available to anyone using the GiMP install on this computer.  Also it saves me a step as I don't have to create that folder.  I used the GiMP internal folders.  It also has the advantage that if I copy that GiMP to another machine, its plugins go with it.  Nice.

The second thing to know is that there is a laundry list of different types of things that you can install into GiMP, and this makes things more complex for the GiMP automation newbie.  You have "scripts" which are small helpers that can automate what GiMP already knows how to do.  Then you have "plugins" which are larger actual programs which extend GiMP's functionality.  And then there is modules, brushes and the list goes on.

Confusingly enough scripts are written in scheme, but if you want to write a script in python, that is considered a plugin.  Why?  Because the GiMP authors decided it would be so.  In any case if you want to install the export_layers Python script, you have to install it in the plugins folder.

Also since it is a plugin, it has to "look" like the other plugins which maybe complied C program binaries and so on - in other words it has to be executable.  If it isn't then it won't show up when you restart GiMP.  And also - note - restarting GiMP is required, since this is a "plugin": you cannot get it to show up by selecting the "Refresh" option from the script-fu menu in GiMP.

So first step - shut down GiMP.

On MacOSX using the Terminal its then an easy 3 step process:

cd ~/Desktop
curl -O http://gimp-registry.fargonauten.de/files/export_layers-0.6.py.txt
chmod a+x export_layers-0.6.py.txt
mv export_layers-0.6.py.txt /Applications/Gimp.app/Contents/Resources/lib/gimp/2.0/plug-ins/export_layers

If you have problems using the Terminal I really strongly suggest that you start getting over them.  Seriously.  You're missing out on a lot of what Mac has to offer - all the power of Unix just a few keystrokes away.  It's much faster and much easier to capture the process to repeat or modify it.  In some cases the Terminal is the only way to do things.

I use a mixture of UI dragging-and-dropping and always have the Terminal handy to do things that the Terminal is great for.  If your Terminal is not already running, type <cmd>-<space> in Finder and then type "Term" to get hold of it with Spotlight, then press Enter.  With your fingers on the keyboard you're ready for the Terminal to do your bidding.

Let me demystify the above a bit for those of you not keen on the Terminal:

• First I change directory to the Mac desktop - we're going to temporarily store the downloaded plug-in there. 
• Next we use the curl command that downloads stuff
• I use the -O (that's a capital Oh) to say that the output file should be named 
• curl will call it after what ever it was on the server I got it from.  
• Try typing "man curl" to find out more about curl - its a handy tool
• Then the script has to be made executable with the chmod command
• if you've managed to get the Python script in the right folder but it still does not appear in GiMP - you probably missed this step.
• Finally copy the script into place.

To do most of all this graphically is possible, but its a pain.  You'll need to

• Go to the export_layers plugin web page and right-click on the link to download it to your Desktop.
• Now you'll need to make the file executable
• I know of no way to do that apart from the command line - so you'll need to open the Terminal for that.  
• See the above "chmod" command, and first cd to wherever you downloaded the file to.
• Click on the downloaded file and rename it to export_layers
• Now go back to Finder and open two windows.
• In one, navigate to your Gimp program in the Applications folder, right-click and
• choose "Show Package Contents"
• the Finder window will change to a view of the inside of the GiMP application bundle.
• Navigate down to through these folders
• Contents > Resources > lib > gimp > 2.0 > plug-ins
• In the other window navigate to your desktop
• Drag-n-drop the executable export_layers into place in the plug-ins folder in the other Finder window

Now when you restart GiMP you will find that you have a new menu option under the "File" menu with "Export Layers" > "as PNG" which will do what you need. Note you may find some oddness/bugginess with where it drops the generated files. If that happens, use Spotlight to find them - in my case they were dropped into my home folder.

Bonus Content

There are a bunch of Mac file name changer apps out there. If you're a Terminal master you don't need 'em.

After running the file export my original sprite sheet called "process-working.xcf" had resulted in a bunch of weirdly named files as a result of the Export Layers command. The names were like "process-working_xcf-working-1.png" - where the first part was the file name and the second parts were all the layer names.

for f in *; do g=${f#process-working_xcf-}; do mv -v $f $g; done

This command will strip off the leading characters "process-working_xcf-" part and just leave the layer names. The -v just gives verbose output so you can see what it's doing. You'll need to cd into the directory where the files are located before running it.

This is using the Terminal (well, the Bash shell's) ability to do substring mangling. To find out more at the Terminal, type "man bash" and then a forward slash "/" and then "substr". Press enter a few times until it gets to the stuff with the curly braces. As explained there you can use the % instead of # do strip stuff off the end of the string instead of the beginning. For more complex things you can go from just using to f and g, to h and j as well - and so on - successively picking apart the string as you go.

When experimenting with this stuff it pays to preview your command before you run it. You can do that by prefixing it with "echo" like this:

for f in *; do g=${f#process-working_xcf-}; do echo mv -v $f $g; done

Then you'll get a nice listing of all the "mv" commands that would be run, and you can inspect them to make sure your substring mangling did what you expected. Have fun!

Games: Free Stuff, No Matter What the Cost?

XCode's In-App-Purchase API doc

As an Indie game developer my livelihood depends on being able to sell what I make.  What I make has to be good, and then - so the theory goes - people will pay what its worth and I will be able to make rent and go on making games.  In this little article I am not posting because I have the answers - I guess what I'm more interested in hearing about is what people feel about the issues.  In-App-Purchasing - which is made drop-dead simple by technologies and API's like Apple's iTunes one shown here - make it easy to make money, but if people feel that is evil, that then is a thing.  Feelings can't be fixed by technology.

Thing is, a lot of people don't want to pay for games.  This is the so-called "race to the bottom" in game pricing.  One way to deal with the desire for free games, while still making money, is via In-App-Purchase - but there is a lot of contention out there amongst gamers about IAP.  I agree that there ought to be some rational perspective on IAP, but it can cause media spectacles like the kid in the UK who spent thousands of dollars buying virtual donuts on IAP.

I was having a discussion yesterday with a friend about how badly we as human beings do our calculations on what is good value.  We'll crawl over broken glass to get something "for free", even though it would actually be much better value to us to pay up front for it.  Why IAP works is that we "get something for free" and figure we'll have the judgement to not fall for the mechanisms that lie in wait to get us to pay for it.  So why is the games industry so hot on IAP?

IAP as an Anti-Piracy Mechanism

Here's another way to look at In-App-Purchase - as a response to "piracy" of games.  Below I mention the SimCity fiasco and a mention of it in an interesting article by Tommy Refenes which I link to.  That was ElectronicArts trying to do "DRM" by making SimCity players connect to a server - IAP requires connecting to a server to access game content too.  But IAP is not DRM and its not the flash-point rage causing issue that DRM is.  It's like "DRM-low-tar" and we can sort of deal with it, so industry is turning to it big time.

So let's look at this: what is "piracy"?  Note that I put that word in quotes because I think its a poor choice of word but one we seem to be stuck with.

I have some acquaintances who pirate movies.  I smile and shake my head.  One of my friends downloads her movies via torrent and when the file arrives burns it onto a DVD for watching later.  She downloads the color cover art for the movie, and prints it out on her colour printer, and tucks it into the DVD jackets she buys for the purpose.  She feels she has "got something for free" then because she has the same DVD she could have bought from JB HiFi in town, but didn't have to pull out her credit card for it.

But she did have to pay.  All that printing and stuffing about.  Even if you're not a high-rent computer pro your time is worth something.  My point is doing that downloading is not nothing - its a personal investment.  Those bytes come out of your quota.  When you torrent you advertise your IP, and expose yourself to malware.  Then there's the cost of whatever else you have to do to install and maintain the software to do the downloads, and manage and store the content.

My point is that with all these costs, why would folks do it?  Answer: our desire for free stuff.  IAP is clever because instead of defeating the human urge to get stuff for free, its exploiting it.  So - with IAP if we get stuff for free, what's the problem?  Answer - its not free because we shoulder risk.

Risk is a Hidden Cost

Downloading also involves a small but not inconsequential amount of personal risk.  When I was at the University of Queensland doing my degree (far too long ago) the RIAA showed up one day at the IT center with a bunch of lawyers, and a court order demanding the computers at a given set of IP addresses and the hides of the students & staff using them.  I know some people were identified in that fiasco, and I don't know what happened to their careers - I would not want to be part of that.  Regardless of what you personally feel the morality is of downloading, you cannot say that the personal risk is zero.

Risk is a cost.  If you shoulder a 0.1% chance that you have to pay $100,000 - then a statistician or an economist will tell you the expected outcome of that decision is $100.  Its just that as humans we are absolutely lousy at seeing this.  We are crap at figuring out if we really got something for free or if we wound up paying in some way that we did not expect.

I know some of you are pretty clued up when it comes to downloading stuff, and you know how to use torrents and other warez services so that you're not at risk: you can manage all that stuff, and make out like a bandit.  I'm impressed - I would not know how to secure myself against those risks.  I guess I could learn.  But when it comes to getting warez there's lots of folks cleverer than me, I freely admit.

But you know what?  A lot of people feel the same about IAP - they can download the free game and not be hooked in by the IAP.  But plenty of people do fall foul of these things.  I guess all those folks who wound up paying felt they would not be the ones to be hooked - but they were.  Maybe we'll be the clever ones - but we need to ask, how good am I really at assessing the chances?

Maybe I'm drawing a long bow here, but my argument is that whenever we think we're getting something for free, we should be saying "if its too good to be true, it probably is".  Google search is "free" right?  "I never click on those adverts!"  But guess what - millions and millions of people do.  Maybe you've clicked on them and not realized?  How confident are you really that a "free" app won't cost you in the long run?

Buying Up-Front versus the "Never-Never"

I don't have time to muck around searching for warez and freebies - I find it much easier to buy stuff.  I'm not rich, in fact I'm not well-off even - but I can afford to buy a movie or TV program if I want.  Certainly I can afford to buy more than enough for the time I have to watch them.

My friend that downloads stuff - I don't judge her for that.  I just smile and shake my head in wonder because the once or twice I have been at her place and seen some of that stuff the quality is pretty awful.  I know if I'm watching a 100 minute movie I don't want the key part of the movie to have some guy with  big hair stand up in front of the cam, and obscure the best part of the show.

I know its possible to get much better quality pirated stuff, but why should I bother?  I can spend a fraction of the time and buy stuff on line - in and out in seconds from Amazon or where-ever.  I have only once had issues with quality on some DVD's I bought that way - and it was a lousy cardboard jacket that a collection of X-Files DVD's came in.

But the point for me is that watching DVD's is a relaxing and fun thing to do - I don't want to be stressed out trying to deal with all the issues around pirating stuff.  LifeHacker has this interesting article about how to torrent safely - man it sounds like a lot of work.  Some of the best suggestions like using a VPN service may actually cost money, and still don't guarantee your safety.

I just feel a lot more comfortable with my nice crunchy shrink-wrapped thing I bought for some $$$$ and if there is any quality issues I know exactly how Amazon or whoever can fix it for me.

Paying for Games

Does this carry over into games?  

For me it does - I know I personally would much rather just pay up front for a game.  I just don't think in general that I am clever enough to monitor how much I would spend on IAP on games that work that way.  One $0 game is "worth" about the same as any other $0 game - but if I pay $7 for a game - like I did with Bulky Pix's "Yesterday" recently - then I know some things about what I'm buying.  I have some expectations about its quality, the amount of content, and I know if I'm not satisfied I can hit up iTunes for my money back.  That's not really an option with IAP.

Maybe this is a weird analogy - comparing downloading a free game with IAP, to "pirating".  What I am really trying to say is that what we do as humans and as gamers when we "go for free stuff" is always driven by the same desires. 

It's like loans with "pay nothing for 6 months", and credit cards with high limits.  Some people do well on those things.  Most people don't and pay a fortune.  Corporations and fancy marketing guys know how to abuse our desire to get free stuff.  They are awake up to how poor our decision making can be in that regard, and now they're in digital media gunning for our wallets with the same techniques.

As far as "piracy" of digital stuff goes - I think that word is idiotic - it is stupid to compare attacking ships on the high seas to downloading digital content.  I think it is not a crime, its just bad karma.  I think that if companies need draconian laws to protect their business model they are doing something wrong.  And I think that if they make it easy enough and cheap enough to buy good stuff, people will do that rather than pirate it.

No Harm, No Foul?

However: I think "piracy" is not innocuous and its not harmless.  I strongly suspect it hurts you and me more than it hurts Electronic Arts.  I suspect that faster than we can profit from it clever corporate types can turn the urge for free stuff into profit for them.

There is an interesting article about piracy of Super Meat Boy, from Tommy Refenes who was one of the creators of Super Meat Boy, and featured prominently in the indie movie "Indie Game" about the lives of indie game developers.

Tommy is pretty philosophical about piracy, and I agree with pretty much all of what he says.  I agree that if someone pirates 1000 copies of your game you still have infinite copies.  Tommy says "there's worse things than piracy:  like DRM and refund requests".

True that.  However I have a couple of comments.

First I think that the best industry response to piracy - "easy enough and cheap enough" - when driven to its logical conclusion means IAP and things like it.  I don't think IAP is evil, but I do think its very easy for people to spend a lot of money on IAP without being aware of it.  You need to be pretty clever to avoid paying out large on those things - I don't trust myself to be that clever and so I mostly avoid such schemes.  I'm lousy with my credit card - so I have a low limit.  And I just know I'd be lousy with IAP in my games I buy.

I think that our desire to "make out like a bandit" can be used against us by corporations to make a profit and IAP is an example of that.  We can outsmart ourselves too easily this way.

Secondly - you know what?  Ripping off digital content is Just Wrong(TM).  Do you really want to be that guy?  When something is wrong that doesn't make using DRM or laws to try to stop it right or justifiable.  "Wrong" doesn't mean - "let's bring in the DMCA and the goon squad".  Wrong means bad karma.

Play Nice with your Friendly Neighbourhood Indie

Developers of games are people, people like you and me.  People like Tommy Refenes and Edmund McMillen.  Pirating our games is just lame.  Go ahead and do it, why not?  We can't stop you.  Like Tommy in his article all I am going to do about it is say "WTF really?" and write about it.

I understand Tommy's point that there are worse things to worry about than piracy.  But just because you can find something worse, doesn't mean that its harmless.  Just because there's other stuff going on that's bad doesn't make it totally fine.

I'm going to sell my games with an up-front price and hope that folks are OK with that.

I doubt my game will be as successful as Super Meat Boy, and if I fail to make enough money to keep doing games then it won't be piracy that causes that problem.  In fact if I ever get to where my game is pirated that probably means I have finally made it to the Big Time.  :-)

But we're all gamers and I just think that our desire to Get-Stuff-For-Free-At-Any-Cost(TM) is just making our world a worse place to be in, but worse we're outsmarting ourselves when we follow that instinct without watching our hip-pocket.

Rushy Anim Tut for Walk-cycles

Update: most of what is contained in this video is still valid as far as it goes, however I have now moved to Spine for my in-game animations.  I will still be using AS9 for cut-scenes.

Check the post I wrote about Spine character animation for more details on that amazing tech.

---

This is a very quick export of first walk-cycle animations, showing a bit of how I work.  I'm still in the middle of working on this so its rough, but I thought I would take this moment to cover what I have learned for my in-game character animations.

First can I say that AS9 Pro is very good for this job.  Combined with TexturePacker this process gives you a set of sprites in a sprite sheet that you can drop right into your Cocos2D game.

The horizontal lines show my method for getting the walk correct.  I recommend this excellent tutorial on the fundamentals of the walk-cycle at AngryAnimator.com - refer there for the meaning of the pose names and to explain the lines.  That tut is for pencil-and-paper cel animation but its by far the best of any tutorial I have seen yet.  The best insight it has that you need to base your cycle around the contact pose, which is when the legs are at their farthest apart.

There are some differences taking Angry Animator's method to the 2d-bone animation technique, but most of it is the same.  In the computer-animation your big bug-bear is skating/sliding.  To fix this I do the animation with a translation (so the character moves across the room as well as pumping his/her legs) and this allows me to mark the foot-falls and retro fit the feet to the marks.  This seems to fix skating quite nicely.

To get my sprites the right size I use one of my game rooms as a background and then I can position the character at the largest size it will need to be against that room.  Then when I do the export the Anime Studio camera is set at the same size as the background, so the PNG's that are exported have the character sprites at the correct size.  Because I use TexturePacker I don't have to worry about the vast amounts of transparent pixels all around each PNG frame exported: TP will remove that and pack the actual sprite into the sheet.  (Note, I have made a terrible job of this part in the sample files shown here -   but they are just for illustration only).

Having the game background also allows me to do the sprite sheets for other animations such as sitting down on the bed, reaching for the window and so on.  Here I'm just talking about the walk animation.

Here is my process:  I do my animations as a walk with translation by:

• Set the animation marker to frame 0
• Draw and rig the character
• Draw the guide lines on a seperate layer based off your character
• Pose the bones to the contact pose; left-leg in front
• This counts as your first step/foot-fall
• Mark its position on the guide line layer
• Measure out 3 more strides to find the foot-fall points on the guide lines
• Temporarily translate the character in its contact pose
• Using legs & feet like a pair of dividers
• Mark each foot-fall positioning the back foot at a mark
• Then do mark a new foot-fall at the front foot
• To mark I use Anime Studio's "note" feature
• Translate the whole character so that the 4 strides take 48 frames by
• Move the animation marker to frame 48
• Translate to the final marked position at 4 strides completed (4 steps/foot-falls)
• Don't use bone translate for this - use whole-character-layer translate
• Go back to frame 0 (contact pose; left-leg in front)
• Copy the contact pose at frame 0 to 24 and 48
• Create the opposite contact poses at frames 12 and copy to frame 36
• See Angry Animator's tutorial
• Use the Z move bone tool to switch the legs over
• Keep the character at the same height
• Now add the recoil poses at 2 and copy to 26
• Use the translate bone  on the root bone (not the whole character) tool
• move the character down to the lower guide mark for the head
• The recoil is the lowest pose so head-height  should be checked carefully
• Adjust the feet to the foot-fall marks so they don't skate or slide
• Adjust the legs to the "sink" pose so the feet are still on the lines despite the lowering
• Copy the recoil pose to 14 (and dup to 38)
• Copying key frames makes sure you get the height & attitude right
• Switch the legs front-for-back to get the correct opposite pose
• Make sure you don't change the height of the recoil when doing this
• Do the high-point at 8 (and copy to 32)
• As for the recoil use translate bone on the root bone to move character up
• Copy these forward as for the recoil and switch to get the opposites at 20 & 44
• Do the passing pose at 6 (and copy to 30)
• Do the opposite passing poses at 18 & 42
• Add in hand-arm swing, bending the elbows
• Add in some head bob, and other movements
• I did ponytail up in the recoil and down in the highpoint

Once complete, run the animation through on loop mode over and over, looking for timing issues, mistakes and unevenness.  Tweak as necessary.

I find its impossible to do this without the translation in the animation (as above) especially with respect to removing/reducing skating, where the characters feet slide or "moon-walk" across the ground.  Also, even though technically you could do all the above in 24 frames instead of 48 I find it much easier to have the extra framing so I can see what I'm doing.

Once everything is golden, you're ready to create game art.

Choose the key frame channel for whole-of-character translation (not bone translation) and delete it.  This will remove the character animation that does the travel across the room, and leave all of the bone translations and rotations done for the walk-cycle itself.  If this somehow removes your height adjustments done for the recoil or high-point poses (because you used whole of character translate instead of bone translate) then undo the delete, and go back - carefully remove the bad keys and replace with bone translate keys.  See the above.

At this point playing the animation should show your character doing a 48 frame in place walk-cycle, with nothing else on the screen.  Now to export game ready art, hide the guide lines, any background images used for scale and go ahead and choose "Export Animation".

Select the PNG exporter from the drop-down.

You only need to select 25 frames of the above animation.  I do a full 48 frames so I can select the part that looks good, and because I find its easier to check the animation for errors.

If you go with the passing pose as your start frame then it works well with a standing character moving into a walk because the feet are together, and then one picks up and starts walking.  To do that, in the export dialog choose 18 as the start frame and 42 as the end frame.

At this point you also have the choice to export at half-frame rate by checking "Render at half frame-rate" on the export dialog.  This will give you 13 frames when exporting frames 18 to 42, and 12 frames per-second is probably OK for most games.  If you need 24 frames a second leave this box unchecked and you'll get 25 frames.

Run the export, choosing a folder (use create folder if needed) to put the frames into.  Don't worry about background colour - PNG export by default will alpha out all the background for you.

Now you can use Texture Packer to put the frames into a sprite sheet, by dragging and dropping the folder you exported the PNG files to.  Follow Ray Wenderlich's excellent tutorial for this - I won't repeat the details here.

The sort of result you get is as here (although this is a PNG sheet).  

Note that I have done a power-of-two sheet with my crazily large sprites.  This sheet is 2048x2048 (fine for desktop but bloated for mobile).  You can (and should) do a non-power-of-two (NPOT) sheet if you know that your platform supports it.  Most new platforms do.  Also using the pvr.ccz compressed PVR format will give a good result in sprite sheet size with fast loading times as well on mobile - check the Wenderlich tutorial for more details.

Character rushes

Rushes from the studio floor.  This is a still frame from my current work, animating the main character Erin.  She looks a bit grim, but I suppose you would be if you woke up with the headache she has in the game.  :-)

I use Anime Studio Pro which uses vector art in layers; and the above is actually around 30 different layers, one for each of the moveable parts of the body, and another one in some cases (switch layers) for parts of the body that have different appearances.  The hands for example have a "grasp" position as well as the above relaxed position; and the feet can either be straight on (as the left foot) or aside (as in the right one).

When the camera zooms in the vectors scale nicely which gives a good result.  The shading is done with a single polygon defined by another unstroked vector.

Anime studio lets me export to PNG sequences, which I then texture packer down into sprite sheets for use with Cocos2D.

Now to work, doing the walk cycle, idle animations (scratch eyebrow, twitch feet to different stance) and a few others.

Update: mov export of first walk-cycle animations.  Going to refactor this a bit.

Game screen design in Google Docs

Looked at Google Docs lately?

If you're like me you probably think you know pretty much what there is to know about Google Docs: its a web-based thing that tries to be like Microsoft Office, right?

Well its been getting better - a lot better.  There's a really good Draw app now.  Combining Google Docs Draw app with the Google Sites features allows you to create a real-time game screen-flow sharing/co-development tool.  The cost is $0 and there's not much you have to do without compared to some commercial apps.  Here's how I use it.

Quick note: these are mocked up development shots for this post, but based on real work from my private Google Docs/Sites - please don't make any judgements about this based on its current state - "Oh I saw the game from Sez and she's making this thing about a room with nothing in it...".  Examples only guys.  :-)

What I discovered is how awesome Googles suite of apps can be as a platform for doing game design, especially if you're an indie and trying to work with others who are not in the same location as yourself.    If you have mentors or friends you want to get reviews from same applies - its a great tool for sharing development ideas in a quick mock-up form before you spend ages coding them up or paying out for finished artwork.

When you work from your spare room, and need some who's remote, doing art-work or some other part of the game to be able to see your ideas, it can be a pain to try to get the latest version of your stuff and drag it into DropBox, or share it on some kind of paste-bin site.

The Draw application is not good enough in itself to do finished work, but its great for quick mockups of screens so that you can get the general proportions, colours and most importantly the flow or sequencing of screens right.  You can import artwork including sprites and backgrounds (like the room background below) and combine it with graphics created with Draw's basic vector tools.  It has a palette of predefined shapes you can use, and you can fill them with color, or make them transparent - even alpha blended, like the Map HUD above.

What is great about Google docs is that you can edit the document right in the web-page and who ever you're working with always gets the latest version when they open it.  In fact you can collaborate in almost real-time.

But even better with Google Sites you can then embed your Google Docs - graphs from the spreadsheet app, or in my case drawings from the draw app - right into the webpage, creating a flow of screens for different use-cases.

When you update the Draw doc, folks visiting the screen-flow page with your use-cases on it get the latest version - since its a live link, not an embedded render of the drawing.  This makes the Google Docs & Sites a very powerful way to collaborate.

Sites also has very good sharing features so you can make collaborators have writer levels of access, and provide others with read-only, all while keeping the whole thing private while you're still in development.

One other quick tip - if you want some great general icons that are good for doing development mock-ups and use as placeholders, but do not have the commercial limitations of some icon sets, have a look at the Tango project - I've used some of them in the above shots.  There's around 180 icons with standard sorts of things, like "Save" and "Quit" and so on.

The direct link to download the tar.gz of their icons is here:  http://tango.freedesktop.org/releases/tango-icon-theme-0.8.90.tar.gz - on Mac you  should be able to open that archive up without any problems, but on Windows you might need a special archive tool.

Have fun designing your screens!