Did you see...

Facebook Cover Template (late 2015) in Photoshop CC

Scot on Twitter Scot's Site

Facebook is rolling out more changes! The cover image and profile image dimensions are changing again and these latest changes mean that all those nicely crafted facebook covers no longer work! But fear not, Tipsquirrel.com has you covered (baboom tish! sorry for the poor pun). This post shows how to create the perfectly positioned profile image & cover using our FREE Facebook Cover Template for the late 2015 changes.

Below is a walk through of how to create your own pixel perfect facebook cover, and after the walkthrough is the downloadable template available only from Tipsquirrel

First step is to the load template into Photoshop CC. (This theme may well work with older versions of Photoshop but changes in the Creative Cloud version makes exporting the images so much easier)

facebooktemplate1

As you can see above, I have already prepared a finished cover art that fits into the our template. If you notice in the layers panel on the right there are 3 main sections..

  1. guides
  2. cover design
  3. selections

Guides are the overlays that line up with the current Facebook cover, and contain the box around the profile photo and areas that contain your name (or company name) and your call to action button. Cover design is where you create your own artwork and Selections are the correctly sized areas for the cover image and the profile photo.

Use the guides to create your own cover art, positioning elements of your design to fit the profile image and avoiding the areas for name and ‘call to action’. Once you have created your own artwork, flatten the image and continue.

Let’s turn off the guides layers and selection layers as shown below..

facebooktemplate2

To create our selection for the profile photo, simply CMD (Ctrl on Windows) & click the profile photo layer as shown below to create a selection around the profile photo area.

facebooktemplate3

The marching ants now show the selected area for the profile photo.

Select the main cover image layer as show below and with the selection still active..facebooktemplate4

Click CMD (Ctrl on Windows) J to create a new layer with the selected portion on the cover image. This will be our profile photo

facebooktemplate5

Rename the new layer to profile.jpg. Setting the layer name to end with .jpg works magic within Photoshop CC as we will soon see

facebooktemplate6

Make sure that ‘Generate Image Assets’ is turned on within File/Generate and Image Assets should be ticked

facebooktemplate7

with only the profile photo layer & the cover image layer visible in Photoshop, both layers having a .jpg suffix to the layer name and Generate Image Assets turned on… Navigate to the location of your original cover image in Finder or Windows File Explorer and see the newly created assets folder which now contains your Facebook cover image and profile image.

facebooktemplate8In Facebook, load up your new cover image and profile image see how perfectly they match up! (until Facebook changes the design again..)

facebooktemplate9

 


I hope you found this walk through and template useful, and as always I would love to hear your comments and thoughts below.

[sociallocker id=”21239″]

Thank you for the support! Click here to download the file.

[/sociallocker]


 

About Scot Baston (31 Articles)
Scot Baston is a Commercial & Wedding Photographer that lives on the south coast of Devon, that inspires much of his work. Whether it the technical or emotive sides, Photography is a passion that continues to challenge and inspire.

3 Comments on Facebook Cover Template (late 2015) in Photoshop CC

  1. Thanks for the walk-through. Am I missing the link to the template? I don’t see it anywhere…

  2. Hi Lara,

    the link to the template is at the bottom of the post, just click to share using the box and it reveals the link

    hope that helps

    Scot

  3. Scott Burkett // 16/12/2015 at 1:26 pm //

    I guess I’m missing something….I’ve clicked on every link in the Share and it just brings me back to the intro page to the article?

Leave a comment

Your email address will not be published.


*