Want your Facebook Profile Cover Photo size to look good on both desktop and mobile?
Facebook doesn’t make this easy, because their cover photos in 2018 still display differently on different devices.
I’ve written about (and am constantly updating) the sizes for:
THIS post is only about the Facebook Personal Profile Cover Photo size. Follow the links above if you need to make a header for a business page, group, or event.
Read on for a guest post about personal profiles from designer Oliver. The instructions and free template are for use in Photoshop.
How to design Facebook profile cover photos with previews for mobile devices
Designing profile and cover photos for social media platforms can become quite challenging when it comes to guessing what your design will look like on mobile devices. Especially when you are working for a client and absolute precision is needed for every element.
Wouldn’t it be nice to see misplaced text or cut off logos on mobile devices already during the design process in Photoshop?
The social media profile mockup files from Feingold Design Agency can be used to preview a profile for desktop, tablet and phone during its creation in Photoshop. There are a bunch of files for different social media platforms available, but the mockup file for private Facebook profiles was made available free of charge and can be downloaded here.
So how does it work?
When you first open the Photoshop document, you will notice that every text block is editable. This is how you can make this mockup look like your profile or even translate the entire profile into another language, quickly and easily.
Up-to-date profile and cover photo sizes are already prepared inside the Photoshop documents Smart Objects, so you don’t have to worry about resolution and color profiles.
What are Smart Objects?
Smart Objects are layers in Photoshop which contain a separate independent Photoshop document.
In this case the Smart Object layers enclose our profile and cover photo. To get started, simply open the two Smart Object layers by double clicking their layer icons. Any changes you make inside these Smart Objects will show up on the mockup file after you have saved the Smart Object.
Working on a new social media profile design will immediately feel quicker, as you will have the extra benefit of neat, ready-made previews for desktop, tablet and phone right inside Photoshop.
When you are done developing your new design, all that is left to do is to save the Smart Object files for web and upload your results to Facebook. You could even use the mockup to present to your client, showing your fresh social media design as it will look online!
You can download the free Facebook profile mockup for Photoshop on Feingold’s Behance profile. The file works in Photoshop CS4-CS6 and CC. For additional help you can watch an extended version of the introduction video directly below, or take a look at the PDF help guide.
Did this help your Facebook profile cover photos?
I hope you enjoyed this guest post tutorial with free template!
Oliver has more social media header templates available for purchase on Creative Market. These also use Photoshop Smart Objects.
Note: I’m a Creative Market affiliate and will make a small referral fee if you purchase.
I believe the small cost is well worth the time you’ll save.
You can test his Facebook profile cover photo template before you buy the others!
Let us know in a comment what you think.