Facebook Cover Photo Templates for Pages & Events
Business Cover Photos That Look Good on the Desktop & Mobile App
It has been a while since my last update to my Facebook cover photo templates so I had some cleaning up to do. The buttons changed size and shape and a call to action (CTA) button was added as an option. The weird sizing of the profile image seems to be fixed, they are one size only, no options like before. This makes creating seamless designs where the cover photo and profile image look like one continuous graphic much simpler than before.
My template is on the large side (1233×693) and not the same size/ratio as the standard 851×315 cover photo. My template started out large because of tricks we had to play to get seamless designs and the fact that I like to include a bit of the Facebook UI for ambiance. I also picked up a trick from another designer Hugh Briss, about creating taller cover photos so that the edges don’t get cut off when viewed on a mobile device. I took some screenshots, adjusted the height of the canvas and added a mobile preview to my template.
The great thing about all this is that the new size of my Facebook template is almost exactly the same size/ratio as the Google+ cover photo.
Two social networks and three cover photos covered with just one image size — pretty cool.
To create the “seamless” look, just create your design and upload the two images. The profile image will be 229×229. No resizing needed.
When you upload the cover photo you will need to adjust the image vertically but again you don’t have to resize your graphic down to 851px wide. Facebook does that for you. The added bonus is that when someone clicks on your cover photo it will be much larger.
For added realism, I included the gradient Facebook adds the the bottom of the cover photo. It’s kind of annoying that it’s there, darkening your design, but it’s there so your page name and categories stand out.
I also extended the gradient to the profile image area just in case. You can use it so your profile image will not be bright and shiny and different than the rest of your design, like someone cleaned a small section of a dirty window.
Facebook Event Cover Photo Templates
So, all my templates needed a refresh. I was creating event cover photos at the designated 784×295 but noticed, and was not happy about the fact that the sides of the image were cropped when viewed on my phone.
The trick I’m using for business page cover photos works with event listings as well. What’s even better is that the aspect ratio for the two is very close. When blown up to 1233px wide, the same width I use for pages, the cover photos for events are just 74px shorter, coming in at 1233×619.
This template has a bunch of stuff going on… I decided to combine all of the mobile and desktop elements together. I’ve included the gradient overlay at the top because hey, Facebook loves covering our artwork with gradients.
You’ll also see exactly where the text is going to be and the pink shaded area shows you where the cover photo gets cropped on mobile. The purple area is the part of the image that only gets seen if someone clicks on the cover photo to blow it up.
All the changes I’ve made will definitely be saving me time! I now have one image size to work with and merely have to switch views to customize the placement of elements before saving my JPGs for Facebook Pages, Event listings and Google+ covers.
I hope you enjoy the templates and get lots of use out of them. I’m always here if you have question or comment.
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. He founded inlineVision with his business partner and software engineer Nina Khoury in 2011.
June 15, 2016 by Michael Currey
March 1, 2016 by Sandra ZorattiFebruary 10, 2016 by Michael Currey