I was scrolling down my news feed, hunting for any interesting news, when I saw this article about a girl who’s Facebook cover photos are just fantastic – and I naturally had to check it out!
Honestly, this girl is kicking some serious ass:
You also must have seen some cool combinations of cover photos and profile pictures, where the entire design looks like one continuous graphic, whether it was on individual profiles or business pages. Naturally, you might think that all the biggest brands would be eager to create something as epic as the example above, right?
Well, not really.
I spent more than an hour going trough various business pages, trying to find any design integrations where the profile picture would be smoothly overlaid on the cover photo. And even from those few that I found, the majority couldn’t get the exact layout just right. *sigh*
See for yourself:
Other than being a boring design, the profile picture is also slightly larger than it’s supposed to be. – Jack Daniel’s
At first sight looks perfect, but you can see the design doesn’t match if you click on the cover photo. – Pepsi
Nice try but outdated – the profile picture is misaligned. – Sprite
Finally – a beautiful example of what can be done. – Levis
And kudos to Johnnie Walker Lithuania for an impeccable cover photo and profile picture design. – Johnnie Walker Lietuva
As you can see, it’s not an easy task!
So after a lot of trial an error, I created my own Facebook cover photo template that you can use for your designs too (woop!).
[yellowbox] Click *here* to download your free template (no sign-up required) [/yellowbox]
And to make things easier, here’s a short tutorial on how to use the template. By the end of it you will know exactly how to create a stunning cover photo that blends seamlessly with the profile picture.
As the measurements are the same, you can use it for both individual profiles and Facebook business pages.
The Dimensions Problem
Before anything else, let’s have a look at why it can be difficult to incorporate the profile picture into your cover photo.
As you might already now, the dimensions of a Facebook cover photo are 851x315px (that is, 851 pixels in width by 315 pixels in height). However, the profile picture has to be uploaded as at least a 180x180px image that will then be shrunk to 160x160px.
This means that if you just used a 851x315px canvas and tried to crop out the profile picture, the size of the resulting photo will be 160x160px only, and Facebook will not allow you to upload it (as I mentioned, it has to be 180x180px, at least) – and that’s a pain, but…
This is exactly why the cover photo template I created is twice as wide than recommended by Facebook, 1702px in width, leaving the cropped out profile picture a 320x320px image.
How To Use The Template
NOTE: in order to use the template you will need to use the Adobe Photoshop or another application that supports .psd or files. I also included a .png file of the page frame, so you could use that too.
Profile Picture Design:
Open the template and add the photo you want to use for the design. Use the frame as a guideline on how it will appear on your Facebook page and adjust the photo the way you like it.
In the template you will find a layer called Profile Picture. Press and hold the CTRL button (or Command on Mac) and click on the shape to load the selection of the profile picture (more precise than just using the crop tool).
Go to Image -> Crop and you’ll be left with a cropped profile picture. Finally, be sure to use “File -> Save As” to save the profile picture as a separate .psd file and then export it as a .png file.
Cover Photo Design:
Go back to the initial template. Again, hold CTRL (or Command) and click on the “Cover Photo” layer to load the selection.
Go to Image -> Crop – you will now be left with the cover photo that’s 1702x630px in dimensions. To decrease the image size go to Image -> Image Size, and enter: Width: 851px, height: 315px.
Use “Save As” to save the cover photo as a separate .psd file and then export it as a .png file again…
And you’re done!
The Final Look
If you followed the steps correctly, you will now have two files: one profile picture (320x320px) and one cover photo (851x315px).
To upload the new design, go to your Facebook page, click on “Update Profile Picture” and “Upload Photo…”. For cover photo, click to “Change Cover” and “Upload Photo…” and select the newly created image.
Talking about alignment, I got obsessed with it and, after a few modifications, managed to get it as close as technically possible.
Just how aligned is it, I hear you ask?
This much:
As you might have already guessed, the opportunities are endless. However, don’t forget some basic design rules: if you have a light logo, make sure to pick a dark photo for the design so that the logo stands out in the news feed, next to the page name, something like this:
And if you’re an advanced Photoshop user or have a designer that can help you out, feel free to get as creative as this:
Bonus Section: Mobile Optimisation
And the very final thing: cover photo optimisation for mobile devices. If you visited any Facebook pages on your iPhone, you might have noticed that the cover photo isn’t displayed the same way it is on desktop – only the middle section will appear on mobile, while the profile picture will move significantly towards the centre.
In order to avoid ugly discrepancies, I added an additional Mobile Layout layer which will help you to fit your visuals and text accordingly – don’t place important information on the sides, especially if you know that the majority of your page users are mobile users:
If you haven’t yet, grab the free template here:
[yellowbox] Click *here* to download your free template (no sign-up required) [/yellowbox]
Will you be using the template? Have you seen any other great cover photo examples? Let me know in the comments below!
See ya,
Adomas
I cant chose ‘Crop’?
Hi Marius, where in the process did that happen? Was it after importing the photo? Did you make sure that you applied the transformation changes by clicking on the check-mark in the menu bar and made a selection of the area first?
I have a similar cocern. I guess what Marius is saying is that that the “Crop” is disabled and cannot be clicked. I tried to check if it is also disabled from the time I opened my PhotoShop, so I closed PS and re-opened, then I realized that Crop has been disabled even before I re-opened your file. How can I solve this problem? Thanks!
Hi Garry, please drop me a message and we’ll see what could be the problem! >> https://www.adomasbaltagalvis.com/contact/
I’ve been wanting to do this with my Facebook Page for a while now, and this works really well. Thanks!
Cheers Paul! Really glad you found it useful, and thanks for stoping by to leave a comment!
There’s no way to make the seamless effect work on mobile also? nevertheless, great work!
Hi Paulo! Sadly, not that I’m aware of.. and it’s even different on tablets – Facebook doesn’t make it easy 🙂 and thanks, glad you found it useful!
downloaded template and it is not the correct size, what good is it? 1700 wide?
Hi Thomas! Thanks for stoping by.
Sorry, I might not have emphasised it enough – the template is twice as big than usual (1702×630 instead of 851×315) because otherwise the saved profile picture would be too small. Before saving the cover photo you just need to edit the image size and that will solve the issue!
If you just took the 851×315, the resulting profile picture would be 160x160px and you couldn’t upload it to Facebook. Cheers!
Read the actual article and you will understand. ^^
Thanks mate.. My new FB page is looking great now. https://www.facebook.com/IpsoMoFo69
It’s a shame FB aren’t more with Business owners and offer you a different set up for phones and tablets so we can get some consistency across devices.. I noticed you have even dropped your own seamless profile pic?
Hi Noe, glad you found it useful! Your cover photo looks really cool.
Yeah it is a shame, but I guess there’s no easy way to keep that consistency, especially when mobile devices have very different resolutions and layout.
Good call! I’ve dropped it just a few days ago, wanted to have something different for a change, but I’m already working on some new variations 🙂
Adomas, I think I am missing a step in the process. Does my cover photo need to be higher than the blue area so it can cover the bottom line of the profile pic? If I replace only the blue area with my content, then I will end up with a black line on the bottom of the profile pic.
Hi Nadine! Thanks for stopping by.
Yes, the photo has to be slightly bigger than the blue area, so that it also covers the bottom of the profile picture to make it look seamless.
So you would start by adding some image into the template and move it around, so that entire profile picture and cover photo spaces are filled. You would then cut out the profile picture (the black area) and the cover photo (the blue are). Finally, the cover photo will have to be shrinked to 851x315px to match the exact dimensions. Does that help?
Awesome, yes, I got it now! Thank you for offering this cool tool! I am working on a banner for a client and will post the link if he decides for the seamless version. Thank you!
Glad it worked!
sorry .. PS newbie question .. how do you add the image to the template ?
Hi Bruce! You need Adobe Photoshop to edit the document (or some other software that can read .psd files). Adding the image can be as simple as dragging and dropping it to the worksheet form your folder.
This is perfect! Exactly what I was looking for. Thank you.
Thanks Steph, glad you found it useful!
Thank you so much! It worked great!
Thanks Kaissa!
Hi, I realise it is me as every one else has used the template fine but I cannot figure out what I’m doing wrong, my result is slightly misaligned with the profile image sitting about 2.5ml below the cover on FB. Any suggestions? I will try again because I know it’s something I am doing but am not seeing what it is. Thanks in advance.
Hi there, Facebook has changed the dimensions of the business page profile picture to sit within the frame now… I can’t believe I only just realised this after getting very frustrated with myself that I couldn’t make your tutorial work haha. Do you have a template available for the new dimensions? It appears the cover image shows as darker than the profile pic image now too so it would be very difficult to match them anyway. Annoying!! The business page I am trying to do this for does not have a logo that fits the FB dimensions, so there is not much else we can do with that space.
Hi Kylie! No, not yet, but I’m planning to create one. I will let you know!
Hi, just wondering if you have a up to date template for a business page? Thanks for you work.
Hi Gurtej, not yet.. haven’t had the time to work on that. But I’ll see if I can make it in the next few weeks.
Hey Adomas, good work on the template (it would’ve been a real pain figuring that one out myself!)
Your explanation is not clear to me, i still do not know how to use the template…
Hi Patrick, can you specify which part is not clear? Where did you run into a problem?
Thanks for the share – was messing with this for hours!
Cheers Rob, glad you found it useful 🙂
Thank you for this!
Oh, yay! My page is so pretty now. :3 Thank you sir!
Thank you for this, Adomas!
I was wondering if it is possible to have a cover/profile picture that is seamless on both computer and mobile device? If so, how would you set that up?
Hi Jacob, thanks for the comment. And no, not really… the layout of the profile picture and cover photo on mobile is completely different from desktop, so I don’t think there’s any way to fix it.
thank you.
Hello Adomas!
Thank you so much for the wonderful tutorial and the template! However it would seem that Facebook has changed either the dimensions or the way it displays the profile picture on the cover photo, so it no longer aligns properly. Would it be possible to update the tutorial and the template to match the current FB display methods? Would be forever grateful!
Cheers!
hi this was helpful thanks 😉
Cheers for this 🙂
Thank you, mate 🙂
Thank you SOOOO much, it is really amazing!!
Thank you very much! Do you have something like this for twitter, or can I use the same template?
wow
Thank you so much! This is a great template and works beautifully! 🙂
Worked perfectly 🙂 thanks.
Thank you so much! This really helped.
Hi Adomas…. thank you for this. I joined facebook today and created a (I think) wonderful profile using sort of the same thing you did. I was so disapointed when I saw it on my mobile phone… all distorted! – i am delighted about your Mobile Optimisation… I have one question.. do I have to decide which template ….either the mobile way or the laptop way… I cannot have both? – please excuse this very amateur question… that is what I am … a creative amateur!
Hi Nicky, thanks for stopping by! And I’m not sure it is as relevant as it was – the design of pages changed on desktop quite a lot (the profile photo is no longer on top of the cover photo, but to the left of it, so we can’t combine them). And I don’t think for mobile devices there is a single template either – it will look slightly different on iphone/ipads and other devices.
Well it is now Jan 20 2017 and the Profile for facebook is now a circle instead of a square
will anyone be updating this template to work with the new FB dimensions?
Awesome template! Thanks.
Thanks, Adomas! Many, many hours of fun ahead 🙂
This template worked quite well for me!
For those trying to use it, note that you must Ctrl/Command click on the layer icon (not the layer name) to select the profile picture/cover photo sections.
how do you save a selected part? when i try to drag it in another page it changes. lmk
I do Ctrl+C (copy), then File > New > Ok, then Ctrl+V (paste). That should allow you to copy the selected section into a new file.
Question – how do I design one that flows seamlessly between desktop AND mobile layouts? I’ve created one for my desktop but when I open it on my phone is completely misaligned. Suggestions??
Depends in background you want to use. If its not a picture just like the avenger one up there, but some simple alligned symbols or such things you can try to make the left section alligned to desktop and middle section alligned to mobile, but obviously your choice is quite restricted.
So many thanks… ! Much appreciated.
Awesome Tips. I can use in my profile.
Hi Adomas, thanks a lot !
I don’t find any of the exemple…Did facebook change something about cover presentation ? (I see the one of Sprite but it doen’t have the superposition effect.
Do you know if it’s possible to do that on a page ?