Thursday, January 31, 2013

Facebook Banner Fun (and a Spoiler!)

Hi there, everyone! Ron here with another Thursday digi-idea.

When Facebook updated their site a while back, they added the ability to have a banner on your home page. Many members just upload a photo to display in the banner area, but some folks (both companies and individuals alike) have gotten a bit more creative with their banner. So how about a quick tutorial on how to create your own cool banner?

Okay, before we look at how to create your own banner (or 'cover photo' as it's also known), you need to know that Facebook has published a list of things that you can't do with that banner:

You can't…
  • Use it as an ad.
  • Include your contact details – i.e., no website address, no phone number, no email, etc. 
  • Include pricing or purchase information – i.e., ’40% off…’ or ‘Get yours now at our website…”
  • Reference any “user interface element” – i.e.,  you can’t ask for, mention or even use a graphic to point to Like, Share or any other Facebook feature. Facebook even makes special mention that you cannot encourage or incentivize people to upload your cover image to their personal timelines.
  • Include calls to action – i.e., ‘Get yours now’ or ‘Tell your friends.’
  • Use an image you do not own or have the rights to use, that is false, deceptive or misleading.

Despite the things you can't do, you can still create something that's fun! And don't worry about that last bullet - If you wanna use some elements from a Club Scrap Digital™ kit, Tricia said it's okay - you have the right to use them - just as long as it's for your own personal use on your own page. So no making cover photos with CS® parts and start selling them to make extra craft money!
Let's start with the size: 851 pixels wide x 315 pixels high, 72 ppi and less than 100Kbs in size. (I'm using Photoshop, but these steps should be similar in whatever program you're using.)

Now since all of the CS® digi components have a resolution of 300 ppi, it's a good idea to change the resolution of your file to 300 now - makes working with those pieces a bit easier. Don't worry, we'll change the resolution back to 72 when we're done! To do this, go to Image -> Image size and change the resolution to 300, the pixel width and height will change automatically.

Now here's a 'template' that I created for the Cover Photo. You'll notice that it has a red box in the lower left - that's where your profile photo will actually cover part of the banner, so you'll probably want to leave that area blank with you design your cover, since it will end up being hidden anyway. In Photoshop, I keep that red box as a separate layer - you'll see why later on.

Now that we've gotten the tedious stuff out of the way, let's get creative! I'm using February's Up, Up, & Away digital kit for this (yes, I got permission to post a spoiler today!).

1. Pick a background, any background. I chose the blue one, just 'cuz I like blue, but you can pick something else if ya want.

2. Drag it on to the Facebook canvas - in Photoshop, if you hold the 'Shift' key down while you drag, it will automatically center itself.

3. I want to give it a little more visual texture, so I'm going to add one the overlays - cool, huh?

4. Time for an embellishment - I added this really cool steampunk balloon (believe it or not, Jac constructed this out of digital elements - she's so talented!).

5. And maybe a ribbon and bow - with shadows, of course! (but that's another lesson for another time)

6. One last embellie, I think - a word balloon (see, I'm keeping a balloon theme here, folks!) from the Comics kit with "Up, Up & Away" inside - positioned so that it looks like the profile photo is speaking :)

7. Remember I said that I'd do something with that red layer? Well, it's time! I'll turn it white and add a fuzzy shadow all around so that the profile photo will 'glow' just a bit.

Once you're happy with your banner, save it in the program's native format (that would be a PSD file for Photoshop users) so that you can use it as a starting point later to build a new one. Then merge the layers and change the resolution back to 72, and save it as a JPG (you might need to reduce the quality of the JPG to make sure it's less than 100Kb in size). Last step - log-in to Facebook and go to your home page; click on the 'change cover' button and upload your new creation!

That's it for today - now go and create a Facebook Cover of your own - I can't wait to see what you create!


  1. RON! The new kit elements look AMAZING! Can't wait for tomorrow! And thanks for the cool tutorial on the banner!

  2. Great idea, Ron! Thanks for the spoiler!

  3. Very cool Ron and thank you for the spoiler too.


  4. Ooooh, I can't wait to play! I've used a digital scrapbook page as my cover before, but this is cool, too!

  5. that is amazing, love the little air balloon

  6. Thank you for the tips! I've been thinking about replacing my cover photo and this came at the right time!


Note: Only a member of this blog may post a comment.