Google Web Designer tips, tricks, and tutorials

With the future of banner ads resting solely in the hands of HTML5, we here at OMA have been bidding Flash adieu and embracing HTML tools such as Hype and Adobe Edge. However, with strict file size restrictions, we have to sadly squeeze every pixel possible from our poor jpegs in order to meet the requirements.

My designer heart couldn’t take it anymore. Fortunately, our knights in shining armor in Media introduced us to Google Web Designer. Despite the fact that this program is still in beta (and it does have its short failings) this baby is built for banner ads. Shedding teardrops on my computer as I torture my jpegs is a thing of the past.

That being said, here are some helpful tips I found while using Google Web Designer. I had to learn the hard way by trial and error, but being the generous and loving designer I am, I’m here to share them with you:

1. When in doubt, close and reboot As I said earlier, Google Web Designer is still in Beta, and that means some bugs. While I haven’t run across any that are too damning, once in a while I’ll run across a frustrating tick (What do you mean I didn’t specify a location in that keyframe??) rather than repeatedly banging your head against a wall, just use the age old trick: save, close application, and reopen.
2. Adding a Click tag I have a tendency to know enough about code to be dangerous and in this case it came back to bite me. I made the mistake of going into the code view in an attempt to add a Click tag. Don’t do this, I repeat, this is not necessary. The best piece of advice I can give you is to follow this Google tutorial to add your click tag.
3. Adding and swapping images This is probably the best feature about Google Web Designer once I fully grasped how to use it properly. If you’re working in Photoshop, Copy and/or Copy Merged allows you to paste directly into your timeline. Google Web Designer will automatically create an assets folder and add that asset you just pasted into your file. If you need to swap it later and maintain the same keyframes, right click on the asset, select “Swap image…” and you can either select an asset for your asset library, or choose “Browse.” Note: This is a somewhat buggy feature, though it’s one of the most helpful. If I have pasted an asset into my file and I want to swap an old asset with the newly pasted asset, it doesn’t always show up in my Swap image list. I find that if I hit browse and exit out, the asset will show up.
4. F5 removes a keyframe F6 adds a keyframe Super simple, super helpful tip.

Feel free add your own tips and/or questions in the comments.