cherrypick from jb-dev Change-Id: Ib0ec41960017725db3fbedb2b62350dc8f8d3468

new Google Play badges and some updates to corresponding pages

Change-Id: I8502a47b9d79d9a03a51c7baaacaa454fd63e5a5

Author: scottamain

docs/html/distribute/distribute_toc.cs

@@ -72,10 +72,10 @@
         <span class="en">Linking to Your Products</a></li>
        <li><a href="<?cs var:toroot ?>distribute/googleplay/promote/badges.html">
         <span class="en">Google Play Badges</a></li>
-       <li><a href="<?cs var:toroot ?>distribute/googleplay/promote/brand.html">
-        <span class="en">Brand Assets and Guidelines</a></li>
        <li><a href="<?cs var:toroot ?>distribute/promote/device-art.html">
         <span class="en">Device Art Generator</a></li>
+       <li><a href="<?cs var:toroot ?>distribute/googleplay/promote/brand.html">
+        <span class="en">Brand Assets and Guidelines</a></li>
      </ul>
    </li>
 

docs/html/distribute/googleplay/promote/badges.jd

@@ -1,11 +1,20 @@
 page.title=Google Play Badges
 @jd:body
 
-<p>Google Play badges give you an officially branded way of promoting your app to Android users. Use the form below to quickly create badges to link users to your products from web pages, ads, reviews, and more. See <a href="linking.html">Linking to your products</a> for more ways to bring users to your apps.</p>
+<p>Google Play badges allow you to promote your app with official branding in your
+online ads, promotional materials, or anywhere else you want a link to your app.</p>
 
-<p>Input your app's package or your publisher name, choose the style, size, and language, and click "Build my badge". The form will generate code for an embbeded button that links to your app's product page or a list of your apps. </p>
+<p>In the form below,
+input your app's package name or publisher name, choose the badge style,
+click <em>Build my badge</em>, then paste the HTML into your web content.</p>
 
-<p>Note that you should not modify the Google Play badges after generating them, including colors, size, text, and logo. See <a href="http://www.android.com/branding.html">Android Brand Guidelines</a> for more information.</p>
+<p>If you're creating a promotional web page for your app, you should also use the
+<a href="{@docRoot}distribute/promote/device-art.html">Device Art Generator</a>, which quickly
+wraps your screenshots in real device artwork.</p>
+
+<p>For guidelines when using the Google Play badge and other brand assets,
+see the <a href="{@docRoot}distribute/googleplay/promote/brand.html">Brand Assets and
+Guidelines</a>.</p>
 
 <style type="text/css">
 
@@ -34,19 +43,21 @@ div.button-row {
 }
 
 div.button-row input {
-  vertical-align:120%;
+  vertical-align:middle;
+  margin:0 5px 0 0;
 }
 
 #jd-content div.button-row img {
   margin: 0;
+  vertical-align:middle;
 }
 
 </style>
 
 <script type="text/javascript">
 
 // variables for creating 'try it out' demo button
-var imagePath = "http://www.android.com/images/brand/"
+var imagePath = "http://developer.android.com/images/brand/"
 var linkStart = "<a href=\"http://play.google.com/store/";
 var imageStart = "\">\n"
         + "  <img alt=\"";
@@ -167,28 +178,29 @@ $(document).ready(function() {
             onclick="return clearLabel('publisher','Example, Inc.');">clear</a>
          <br/><br/>
 
+
 <div class="button-row">
-  <input type="radio" name="buttonStyle" value="get_it_on_play_logo_small" id="ns" checked="checked" />
-    <label for="ns"><img src="http://www.android.com/images/brand/get_it_on_play_logo_small.png"
-alt="Get it on Google Play (small)" /></label>
+  <input type="radio" name="buttonStyle" value="en_app_rgb_wo_45" id="ws" checked="checked" />
+    <label for="ws"><img src="{@docRoot}images/brand/en_app_rgb_wo_45.png"
+alt="Android app on Google Play (small)" /></label>
     &nbsp;&nbsp;&nbsp;&nbsp;
-  <input type="radio" name="buttonStyle" value="get_it_on_play_logo_large" id="nm" />
-    <label for="nm"><img src="http://www.android.com/images/brand/get_it_on_play_logo_large.png"
-alt="Get it on Google Play (large)" /></label>
+  <input type="radio" name="buttonStyle" value="en_app_rgb_wo_60" id="wm" />
+    <label for="wm"><img src="{@docRoot}images/brand/en_app_rgb_wo_60.png"
+alt="Android app on Google Play (large)" /></label>
 </div>
 
 <div class="button-row">
-  <input type="radio" name="buttonStyle" value="android_app_on_play_logo_small" id="ws" />
-    <label for="ws"><img src="http://www.android.com/images/brand/android_app_on_play_logo_small.png"
-alt="Android app on Google Play (small)" /></label>
+  <input type="radio" name="buttonStyle" value="en_generic_rgb_wo_45" id="ns" />
+    <label for="ns"><img src="{@docRoot}images/brand/en_generic_rgb_wo_45.png"
+alt="Get it on Google Play (small)" /></label>
     &nbsp;&nbsp;&nbsp;&nbsp;
-  <input type="radio" name="buttonStyle" value="android_app_on_play_logo_large" id="wm" />
-    <label for="wm"><img src="http://www.android.com/images/brand/android_app_on_play_logo_large.png"
-alt="Android app on Google Play (large)" /></label>
+  <input type="radio" name="buttonStyle" value="en_generic_rgb_wo_60" id="nm" />
+    <label for="nm"><img src="{@docRoot}images/brand/en_generic_rgb_wo_60.png"
+alt="Get it on Google Play (large)" /></label>
 </div>
 
   <input type="button" onclick="return buildButton(this.parentNode)" value="Build my badge"
-style="padding:5px" />
+style="padding:10px" />
   <br/>
 </form>
 

docs/html/distribute/googleplay/promote/brand.jd

@@ -88,87 +88,64 @@ any way you want, provided that you follow the guidelines described below.</p>
           "Android is a trademark of Google Inc."</span>
         </p>
 
+
 <h2 id="brand-google_play">Google Play Brand</h2>
 
-<div style="clear:both">
-  <div style="float:right;width:50%;padding:1.5em;">
-    <p>
-      <img alt="Google Play logo" src="http://www.android.com/images/brand/google_play_logo_450.png">
-    </p>
-    <p>
-    <img alt="Get it on Google Play badge, large" src=
-            "http://www.android.com/images/brand/get_it_on_play_logo_large.png"><br>
-            Download: <a href="http://www.android.com/images/brand/get_it_on_play_logo_small.png">Small</a> | <a href=
-            "http://www.android.com/images/brand/get_it_on_play_logo_large.png">Large</a>
-          </p>
-          <p>
-            <img alt="Android App on Google Play badge, large" src=
-            "http://www.android.com/images/brand/android_app_on_play_logo_large.png"><br>
-            Download: <a href="http://www.android.com/images/brand/android_app_on_play_logo_small.png">Small</a> |
-            <a href="http://www.android.com/images/brand/android_app_on_play_large.png">Large</a>
-          </p>
-  </div> 
+    <img alt="" src="http://www.android.com/images/brand/google_play_logo_450.png"
+         style="float:right;">
+      
+    <img alt="Android app on Google Play badge, large"
+         src="{@docRoot}images/brand/en_app_rgb_wo_60.png"
+         style="float:right;clear:right;">
+
+    <img alt="Android app on Google Play badge, small"
+         src="{@docRoot}images/brand/en_app_rgb_wo_45.png"
+         style="float:right;margin:0 30px 30px">
+
+    <img alt="Get it on Google Play badge, large"
+         src="{@docRoot}images/brand/en_generic_rgb_wo_60.png"
+         style="float:right;clear:right;">
+
+    <img alt="Get it on Google Play badge, small"
+         src="{@docRoot}images/brand/en_generic_rgb_wo_45.png"
+         style="float:right;margin:0 30px 30px;">
 
-  <div style="width:45%;">
     <h4>06/ <em>Get it on Google Play</em> Badge
           </h4>
           <p>
             The "Get it on Google Play" and "Android App on Google Play" logos are badges that you
             can use on your web site and promotional materials, to point to your products on Google
             Play.
           </p>
-          <p>
-            The logos are available in two sizes:
-          </p>
-          <ul>
-            <li>Large: 60(h) x 172(w)</li>
-            </li>
-            <li>Small 45(h) x 129(w)
-            </li>
-          </ul>
           <p>
             Guidelines for usage:
           </p>
           <ul>
-            <li>Never separate the phrase “Get it on Google Play” or "Android App on Google Play"
-            from the Google Play logo, and do not change the color, proportions, spacing or any
-            other aspect of the logo.
+            <li>Do not modify the color, proportions, spacing or any other aspect of the badge image.
             </li>
-     </ul>
-     </div>
-     
-     <ul>
-            <li>When used online, the badge logo should be used to direct users to:
+            <li>When used alongside logos for other application marketplaces, the Google Play logo
+            should be of equal or greater size.</li>
+            <li>When used online, the badge should link to either:
               <ul>
-                <li>The Google Play landing page: <br />
-                  <span style="margin-left:1em;">http://play.google.com</span>
-                </li>
-                <li>The Google Play Apps landing page: <br />
-                 <span style="margin-left:1em;">http://play.google.com/store/apps</span>
-                </li>
-                <li>A list of products that include your company name, for example, <br />
-                <span style="margin-left:1em;">http://play.google.com/store/search?q=<em>yourCompanyName</em></span>
-                </li>
-                <li>A list of products published by you, for example,<br />
+                <li>A list of products published by you, for example:<br />
                 <span style="margin-left:1em;">http://play.google.com/store/search?q=<em>publisherName</em></span>
                 </li>
-                <li>A specific app product details page within Google Play, for example,<br />
+                <li>A specific app product details page within Google Play, for example:<br />
                 <span style="margin-left:1em;">http://play.google.com/store/apps/details?id=<em>packageName</em></span>
                 </li>
               </ul>
             </li>
-            <li>When used alongside logos for other application marketplaces, the Google Play logo
-            should be of equal or greater size</li>
   </ul>
+
+          <p>For your convenience, you can use the 
+            <a href="{@docRoot}distribute/googleplay/promote/badges.html">Googe Play badge generator</a>
+            to create badges that link to your apps on Google Play.</p>
 
-            <p>For details on all the ways that you can link to your product details page in Google Play, 
+          <p>For details on all the ways that you can link to your product details page in Google Play, 
             see <a href="{@docRoot}distribute/googleplay/promote/linking.html">Linking to your products</a></p>
 
-          <p>For convenience, if you are using the logos online, you can use the 
-            <a href="{@docRoot}distribute/googleplay/promote/badges.html">badge generator</a>
-            to create the appropriate markup and link to your apps.</p>
-
 <h2>Other Brands</h2>
 
 <p>Any other brands or icons depicted on this site are <em>not</em> are the property of their
 respective owners and usage is reserved. You must seek the developer for appropriate permission to use them.</p>
+