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 on FacebookTweet 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 clickTags

ClickTag goal is to keep track of the clicks from advertisements and banners in 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 of 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 Botttle 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. Tinypng.com 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

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 is a good advise to double check your HTML5 banners in Safari and Firefox.