Google Plus Cover Photo & Profile Photo Template

Dec 5th, 2013

I’ve been meaning to create a new template for the Google Plus cover photo ever since the redesign on November 14th.

Download the Template

Things are a bit simpler now that there is less variation in the way Google displays the cover photo. One of the good things about the new design is that you don’t have to scroll up to see the entire image.

1920x1080-screenshot1280x1024 screenshotNow, the main thing to take into account is the difference between the mobile and desktop display.
After taking many screenshots in my desktop browser, I found that I was getting very consistent results and that every screen size I tested showed that just a sliver of the cover photo gets hidden and the difference between 1920x1080px and 1280x800px was negligible.
In fact, for every screen size tested, I found that the cover photo only displayed in two different sizes. On my 1920×1080 monitor the cover photo was 920x518px. The cover photo on the next three screen sizes (1680×1050, 1280×1024, 1280×800) displayed at 620x349px.

Social Identities TemplateThat changed though once I saw a post from Hugh Briss at Social Identities. The template Hugh created had much more space on both sides of the cover photo that could be hidden on smaller displays compared to what I was noticing.

The safe zone for Google Plus cover photos.Since you’ll never catch me on a Windows machine, I’ve included Hugh’s findings into my template to make sure it works for everyone.

The messed up thing about trying to find a safe zone, where your logo/graphics show best on all devices and orientations, is that it’s not really possible to do and have a cover photo that makes sense.

Difference between Android and iOS Google Plus apps

Difference between the Android and iOS mobile apps.

Using my Photoshop template

Photoshop layer groups for cover photo templateMaybe I went overboard but I just love Smart Objects in Photoshop. In my template you will find Layer Groups for iPhone, Android and desktop.
Each group lets you simulate how your cover photo will look.

There is a smart object/layer for the cover photo and the profile picture. Double clicking on the thumbnail will open the associated PSD file where you can make edits and save the results to upload into your business page or personal profile.

Double-click the layer icons to edit the cover photo and profile image.Besides being able to edit your profile photo and cover photo, you can also customize the look of your profiles by editing the text layers for your name, bio, location and number of circles you’re in.
It’s something that comes in handy for me when I’m showing clients mockups of designs I’m working on. Hope they come in hand for you too.

The downloadable zip file contains two files. One Photoshop file with separate layers, and one transparent PNG for those using other image editors.

Download The Free Template

Simply enter your email address and the download link will be sent directly to your Inbox (we can only send you the download link if you enter a valid email address).




Photoshop Presentation Template

Google+ Profile or Page on Android/iOS, Desktop and iPad

Photoshop Presentation Template - Google Plus PageUse this template to create realistic mockups of your Google+ design for clients or portfolios. See your how your design looks on an iPhone, iPad, Samsung Galaxy S3 and Apple Laptop.

File Specs:
4444px by 2013px @ 72ppi
or
12.6″ by 5.7″ @ 350ppi

About the author:

Michael Currey is an experienced web designer, front-end developer and social media manager with 15 years of experience and an education from the Academy of Art University in San Francisco.

3 Responses to “Google Plus Cover Photo & Profile Photo Template”

  1. […] 2013Tweet Update 12/5/2013 – After the recent redesign of Google Plus, there is now a new template for download. Update 4/6/2013 – The template has been updated with a new layer group for the circular […]

  2. […] The New Google+ Profile Banner Image Size Apr 11th, 2012Tweet Update 12/5/2013 – After the recent redesign of Google Plus, there is now a new template for download. […]

  3. […] middle will be overlapped with your profile photo. Look at the difference screen design taken by Michael Currey. Difference between Android and iOS Google Plus appsDesignLike all visual image, let your image […]

  4. on3simpleclick says:

    awesome (: thanks

  5. […] Design your own Google+ cover photo with this handy template from Inline Vision. […]

  6. Hielca says:

    Thx a lot

  7. Lisa says:

    Thank you for the information on the template. Knocked of some of the learning curve and gave us a place to start!

Leave a Comment

4 Trackbacks

  1. Guide to the New Google+ Cover Photo Size - With Template! » Blog: Social Media, FAQs & Blog | InlineVision: Web Design / E-Commerce / PPC / Social Media | Las Vegas, NV

    […] 2013Tweet Update 12/5/2013 – After the recent redesign of Google Plus, there is now a new template for download. Update 4/6/2013 – The template has been updated with a new layer group for the circular […]

  2. The New Google+ Profile Banner Image Size » Blog: Social Media, Blog: WebDesign & WebDevelopment, FAQs & Blog | InlineVision: Web Design / E-Commerce / PPC / Social Media | Las Vegas, NV

    […] The New Google+ Profile Banner Image Size Apr 11th, 2012Tweet Update 12/5/2013 – After the recent redesign of Google Plus, there is now a new template for download. […]

  3. Google+ Cover Photo Basics | Ascelade

    […] middle will be overlapped with your profile photo. Look at the difference screen design taken by Michael Currey. Difference between Android and iOS Google Plus appsDesignLike all visual image, let your image […]

  4. 7 Google+ Tips to Create Maximum Engagement

    […] Design your own Google+ cover photo with this handy template from Inline Vision. […]