Google +1 Button for Retina Displays

I’m putting together some HiDPI mockups for a site I’m working on, that require a Google +1 button. Oddly, as of February 2013, Google doesn’t appear to offer @2x versions of their +1 icons. They do offer a very nice EPS of the button, but they require that the button be used in the provided red color scheme or in grayscale. Neither of these options fit the most popular +1 button nor the button required by my project, red text on gray background:

google-plus-one-original
Additionally, the EPS is substantially different than the standard button: the placement of the g, +, and 1 are all different; the thickness of the +, 1, border, and drop shadows are different; and, most odd, the size of the button is different. Swipe the image below to see the differences:

What’s the solution to getting a 38x24px icon to look great at 76x48px? Clearly, the best answer is to redesign the entire thing from the ground up in Illustrator!

Now, doing this may violate the Google+ Buttons Policy. And I will overtly say that I do not have any association with or endorsement by Google of my editorial content, product, service, event, or organization. This work was solely created and solely intended to make the web a little bit nicer to look at on a retina display. If you represent Google and would like this removed, please get in touch.

I started by making the border, then matched the colors, and did the very subtle background gradient. In the EPS you can see a nice lighter red drop shadow at the top, that follows the curves of the icon border, but one the tiny version, this looks like a solid white line. I created a linear gradient with three stops: #E4E4E4 at 0%, #F5F5F5 at 93%, and #FFFFFF at 94%. The goal was for the white line to be the same thickness as the border, and it turned out great.

Thanks to whatthefont.com, I discovered that the g is from the Catull typeface. The + was easy enough to perfectly replicate, while the 1 was taken from Arial, converted to an outline, and edited slightly. I duplicated the g, +, and 1, moved it down a border width, made it white, and did a 5px Gaussian blur.

Lastly, I exported two PNGs, one at 38x24px and an @2x copy at 76x48px. As you can see there were some elements that need to be edited by hand. The final product isn’t a pixel perfect duplication of the Google +1 logo, but I like it a little better, and it looks fantastic on retina.

And here are the two finished icons, standard res on the left and @2x on the right:

google-plus-one-redux-massaged-lowgoogle-plus-one-redux-massaged

Click here to download the .ai file.

Comments are closed.