Deke's Techniques 86: Creating the Perfect Facebook Cover in Photoshop
So far, I've really lucked out where Deke's Techniques is concerned. The series debuted with "Creating Ice Type" the first Tuesday of 2011, and it became an immediate hit in the lynda.com Online Training Library. I accidentally recorded "Creating a Star Wars Hologram Effect in Photoshop CS6" for the very same week Photoshop CS6 went into public beta. And then I inadvertently recorded "Joining Type to a Circle in Illustrator CS6" for the same week Adobe announced Illustrator CS6.
But where Deke's Techniques: The Challenge is concerned, not so lucky. I recorded an Illustrator technique ("The Octagonal Rings of the Underworld") during the second week of The Photoshop Challenge. I recorded two Photoshop techniques ("Hand-Coloring Line Art in Photoshop" and "Creating a Screen Print Effect in Photoshop") for both weeks of the Illustrator Challenge. And I created this week's technique, which pimps my Facebook page all about The Challenge, for the very week when the damn contest ends. Balls!
But, hey, it's a great technique. And, plus, it begs you to become a fan of facebook.com/dekepod. Which you should do because it's cool, stupid, frivolous, and a waste of time. And who doesn't like wasting time? On the Internet! How hip is that?
Anyway, today's technique shows you how to create the perfect Facebook cover in Photoshop. Here's the official description from lynda.com:
In this week's free Deke's Technique, Deke McClelland shows you how to create a perfectly spaced, sized, and positioned Facebook cover photo. Sure, you can take your chances and upload a carefully selected photo for your cover image. And then hope Facebook's limited repositioning controls let you present your creative vision adequately. Or you can watch this week's movie and find out how to craft your cover in Photoshop ahead of time, with the strict intent to present a vision that is exactly what you want for your Facebook page.
The key to getting things meticulously positioned is to create a template that allows you to plan your composition precisely. Specifically, here are the dimensions that you want:
Although the 851 x 315 dimensions of the standard Facebook cover are fairly common knowledge, the key to ultimately having your cover and the smaller inset profile picture work together with technical accuracy is to anticipate, in Photoshop, how the two will visually interact. In this project, Deke's goal is to create text that spans across the cover photo and look as though it begins inside the smaller profile photo. (His kooky brush tiki man also spans across both images.) This requires some deft use of smart objects, layer masks, duplication, trimming, and of course, the Save for Web command. Here's the result of Deke's project:
Naturally, you can extrapolate this technique to create your own professionally crafted cover photo for your own personal or business page. And members of lynda.com can watch this week's exclusive video, in which Deke continues the project by showing you how he got his inset profile picture to work as part of the larger cover photo, replete with letter D and the handle of the brush character positioned so that they flow from one image to the next.
Deke will be back next week with another free technique.
Just so's you know, the keys to making a profile picture are to A) keep the layered composition as flexible as possible, meaning lots of smart objects, and B) save your JPEG, GIF, or PNG image way bigger than the 160 x 160 pixels that Facebook ultimately displays it at. Because Facebook strangely requires that, and profile pictures serve many purposes on Facebook. Here's my profile pic rendered very big indeed.
I can't remember what size I actually submitted mine at. But Facebook requires at least 180 x 180 pixels. What a weird site, eh? Join me in celebrating its weirdness at facebook.com/dekepod.