It started innocently enough. I started working at an agency that only did social media. We were in charge of creating brand pages for various clients. This meant mocking up how a page would look for approval before we put anything live. You can understand what kind of hassle this can be. Especially when you like your mockups to look great.
So during a slow spell I set to making a PSD that I could plunk branded elements into and quickly turn around what a brand page on Facebook would look like. Here it is for everybody to enjoy. Built with smart objects and vector shapes, its pretty accurate and has helped me loads when it comes to cranking out different looks and feels for a client.
I've tried to keep the file as organized as possible. That means lots of color coded folders and smart objects. you should have everything you need to get you up and going. All text is live and can be swapped for whatever you need to get that essential client approval :)
You'll notice some items are turned off. These are different instances of items within the Facebook timeline. You'll hopefully only concern yourself with the two types of profile/cover photos. One where they are separate and one where they bleed into one an other. It's important to notice that Facebook puts minimum size requirements on these. For example the profile is 160px x 160px but must be uploaded at 180px x 180px at minimum. I've taken the time to do some really bad math and figure it out for you.
*dont forget you'll want to export your images from the smart objects when moving assets to your actual Facebook brand page.
*HOT TIP* Use the search in your layers pallet to show you only the green colored layers. These are the big deals that need to be changed. Also use text "Find and Replace" to replace "Your Brand" with whatever brand you're working on.
Orange colored layers are your branded content. Blue are Facebook native things. Red for cover photos.
Often when creating a content calendar for clients they like to see posts in situation. Especially if you are posting copy and a photo. You'll be able to grab a layer set and iterate on it fast and simply.
Sometimes you want your cover photo to be different from you're profile photo. This PSD is set up so that you also have the option of having your cover photo bleed into you'r profile photo. Since Facebook has minimum size restrictions on uploaded images for profile photos. Some basic math was done to figure it out for you. This is by no mean's 100% accurate and you may have to play with a pixel here or there. But for me 98% of the time I get the result I want when I need to do this type of cover/profile photo. Have fun!
Look I'm in no way associated with Facebook. Making this PSD template has helped me tremendously. I've been fortunate enough to have had some great people help me along the way with files or chats. It's the least I could do to give back a bit in the hopes that somebody else finds this useful.
Since the Facebook platform changes constantly its impossible for me to dedicate the time in constantly updating this file. If something major changes I'll be sure to make some adjustments to the file. But for mock-up purposes this should serve you well. Enjoy.
Now go and make your clients brand pages beautiful!