Make an illustration for the popup page

[liquid06]

On the popup page, we need to show:

• Users should have the site less-than-full-screen
• The tutorial is going to pop up on the left

Sequence we want users to take to make sure they don't "lose" the tutorial popup:

• See the popup page
• Resize the window or make sure it's not full screen
• Click the button
• See the tutorial content appear on the left
• Start working with the content! :)

[liquid06]

I've started creating an animated image for the popup page.

Notes so far:

• add some visual indication for 'click'
• grab and scooch for the window moving - don't show the window controls

[liquid06]

Get me out of here!

I'm silly and started working in AfterEffects because I'm not familiar animation tools. While the process did help me think through some parts of my idea, it's not a good tool for this kind of thing.

Here's the general direction I'm trying to go (not sure how well this export worked)

[liquid06]

Here's how far I was able to get with Illustrator + Fireworks today. This is kinda fun now that I have some idea of how to do it! It's still a bit fast and the color seems a little odd, but it's much better than my first attempt. :/

[liquid06]

Still to do:

• Another iteration on the animation. I'm not quite happy with the speed, the loop transition, the "click" indication, or that weird green tint on some of the grays. (What happened there?)
• Add the final image to the template and include the assets somewhere in the repo. (At least an .eps or .ai and maybe also the individual frames?)

@michaelhagedon, is there already a place for source files like this in the repository? Where should they go? I can't find the tinymce icon sources...

[liquid06]

OK, here's another iteration - I'm happier with this one even though I ended up changing quite a bit more about it.