Google Web Designer Tricks
Webprogramo > Google Web Designer > Basic > 5 tricks with Google Web Designer

5 tricks with Google Web Designer

Jorge Ramírez

16 agosto, 2017

Webprogramo > Google Web Designer > Basic > 5 tricks with Google Web Designer
SHARE! and the author will get a Yummy Cookie :
Share this...
Share on Facebook
Tweet about this on Twitter

1. Swapp images

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 working. If you need to swap it and maintain the same keyframes, Just right click on the asset, select “Swap image…” and you can either select an asset for your asset library or another directory from your computer.”


Google Web Designer - Swap images


2. Add click tags

ClickTag goal is to keep track of the clicks from advertisements and banners on the web. Depending on the ad serving platform the requirements for its implementation may change. Let’s see how to add a clickTag to your banner easily:


Google Web Designer Components

Once you have your banner already created, go to the components panel and insert the Tap Area component.


Google Web Designer Gestures

Make sure to set the tap component size the same as the banner, in this case, is 300×600.


Insert Click Tag in Google Web Designer

Go to the events options and add a new one, then select “clickTag”, at Actions select the “Google ad option” and “exit ad”, and finally as a receiver select “gwd-ad”. In Metric ID: clickTag and a URL.


3. Keyboard Shortcuts

The following keyboard shortcuts are the ones that can help you most:

  • New File – Ctrl+N (for Windows) or Cmd+N (for Mac OSX)
  • Open-File – Ctrl+O / Cmd+O
  • Close File – Ctrl+W/Cmd+W
  • Save – Ctrl+S/Cmd+S
  • Select tool – V
  • Tag tool – D
  • Pen tool – P
  • Text tool – T
  • Rectangle Shape tool – R
  • Oval Shape tool – O
  • Line Shape tool – L
  • Paint Bucket tool / Ink Bottle tool – K
  • 3D Stage Rotate tool – M
  • Hand tool – H
  • Zoom tool – Z


4. Optimize your banners

Sometimes it is difficult to reach the standard required by an advertising platform. Especially when it comes to the weight that your banners should have. is a site that can help to reduce to the maximum the weight of your PNG and JPG images and make your life easier.

Optimize Images with Tiny Png for HTML5 Banners


4. Try your banner in other browsers

It is always easy to check your banners only in your favorite (Google Chrome) browser and don’t take in count the others. Sometimes your work doesn’t render correctly in all platforms, so it is good advice to double check your HTML5 banners in Safari and Firefox.