Attracting Friends with a Fabulous Facebook Design

At the top of every Facebook profile, you’ll find an area where you can add two images: one is a big horizontal image, called the Cover image; and one is a small, square image that overlaps the bottom-left corner of the bigger image, called the Profile picture. Facebook uses the word Timeline to refer to the entire collection of pictures, text, and videos that you post to a profile.

Photographers have a huge advantage when it comes to creating great Facebook designs because the best designs start with fantastic images. Simply uploading a striking photograph for your cover image is more than enough to create a great profile design. But don’t stop there. Mix things up by changing your cover image to showcase your latest creations, like photographer Gilad Koriski does.

Unless you delete your cover images, they are saved in an album called Cover Photos. When you (or a visitor to your profile) click on your current cover photo, that image opens in a larger window with arrows that enable you to navigate through all of the previous cover images that you have posted.


credit: Gilad Koriski

GETTING CREATIVE WITH FACEBOOK PROFILE DESIGNS
Although Facebook recommends one small headshot and one large cover photo, some of the best profiles are designed to make it appear as if the cover image and profile photo are one image. Serhan Koçak created one of the most creative Facebook cover designs I’ve found by combining two photos that make it seem as if he’s both a giant holding himself by the feet, and that he’s hanging upside down from his own grasp. It’s an eye-catching design and a smart way to show off his talent as an art director.

Because your profile photo is also used as a thumbnail when you post updates or comments on Facebook, make sure the smaller image looks good alone as well as with your larger cover image.


credit: Serhan Koçak

In his design, photographer Kay Int Veen (https://www.facebook.com/kayintveen) seems to be peeking out from behind the profile page. This illusion was created by adding a white bar across the bottom of his cover image that looks like it’s part of the Facebook interface. He then added a self-portrait, cleverly posed to look like he’s peering over the edge. Adding to the design, he lined up a few more photos on the left-hand side of the cover image and positioned them just above his profile picture.


credit: Damon Pijlman and Kay Int Veen

The trick to creating designs like the ones in Serhan’s and Kay’s profiles is getting the images to line up just right in Facebook, which turns out to be a bit more complicated than most people expect.

Even with a relatively basic knowledge of Photoshop, creating a composite image like the one in either of their profiles is easy enough. The challenge is that you’re limited to two separate images, each a different size and dimension, and each restricted to a fixed position at the top of the page. To make things even more challenging, both images are displayed smaller in your profile page than they are in other parts of Facebook.

If you want to position your profile and cover images so that they work together, these size differences can really complicate things. The trick is to crop and position your images so they work together in the smaller size displayed in your profile page, and then upload larger versions of each image that are cropped exactly the same and sized in the same aspect ratio so that they still work in your profile design, and look good when displayed at larger sizes in other parts of Facebook.

OPTIMIZING AND SIZING PROFILE IMAGES
If you’ve been confused by these differences, you’re not alone. Facebook doesn’t explain any of this in their Help files, but here’s what I’ve found after considerable testing. Your profile photo is displayed at 160×160 pixels at the top of your main profile page, and every Facebook template I’ve ever found on the Web is set up for a profile photo that size; however, if you try to upload a profile photo that’s 160 pixels wide, you’ll receive the following error message: “The image you tried to upload is too small. It needs to be at least 180 pixels wide. Please try again with a larger image.” That’s because in some parts of Facebook, profile photos are displayed in the larger size.

Facebook’s guidelines for cover images are even more confusing (and misleading) than the rules for profile images. Facebook’s Help files state that your cover image should be exactly 851 pixels wide by 315 pixels tall. If you upload a cover image that is smaller than 851×315 pixels, Facebook will stretch it to fit the larger display area.

My best advice is that you upload cover images that are larger than Facebook recommends. That’s because when you click on a cover photo and the image opens in a new window over the profile page, your photo is displayed in its actual size (or as close to full size as the space in your browser window allows). If you want to create a slide show that showcases multiple photos when a visitor clicks on your cover image, bigger images definitely look better.

Here’s what I found: If you upload a larger cover photo that’s the same aspect ratio as the recommended 851×315, even 200% or 300% larger than the recommended size, Facebook will reduce the image so that it displays just fine in your profile page, and you’ll have the benefit of the larger size when someone clicks on it.

If you upload a larger image that’s not the same aspect ratio, Facebook will reduce the dimensions until the width is 851 pixels and then crop off any extra height, but you can reposition the image after you upload it to control where it’s cropped. I was able to upload images as large as 2400 pixels wide, but I found 1000–1200 pixels wide was ideal.

OPTIMIZE IMAGES BEFORE UPLOADING
The most limiting factor is that you need to keep the file size of each image under 100 KB; otherwise, Facebook will compress it for you and you’ll almost certainly get better results if you optimize your images yourself in Photoshop.

I recommend using the Save for Web dialog in Photoshop. To use this feature, choose File>Save for Web. In the Save for Web dialog, choose JPEG from below the Preset drop-down menu, and lower the number in the Quality field at the top right of the dialog to reduce the file size. The size of the image is displayed in the bottom-left corner of the preview pane and changes automatically to reflect your changes to the Quality field. If you don’t like how the image looks when it’s compressed enough to be 100 KB or less, consider reducing the physical dimensions a little more and then try the Save for Web dialog again.


credit: Erin Manning

UPLOADING IMAGES TO FACEBOOK
When you’re ready to add your profile picture and cover image to your Facebook profile, the only trick is finding where to click to start the process. You won’t find these links until you roll your cursor over your profile photo or cover image to make the links appear.


credit: Erin Manning

After one of these edit links becomes visible, click on it, and a drop-down menu appears displaying multiple options for how you can replace your photo. Select Upload Photo to upload a new image and replace your profile picture at the same time. Select Choose from Photos to replace your current profile picture with any other image you’ve already uploaded to Facebook.

Keep in mind that each time you change your profile or cover photos, that image is added to your Timeline like any other post and displayed for all your friends to see on Facebook. As a result, if you change your profile or cover photos too many times (especially if you do this over in rapid succession while you’re trying to get it right), you may look like you’re spamming your friends with pictures of yourself.


credit: Jeff Gatesman

To help you align the images before you upload them to Facebook, you can download a Facebook template from my website at www.digitalfamily.com/social-design.

COMPARING PROFILES, PAGES, AND GROUPS
Everyone who uses Facebook must start with a profile, but you don’t have to stop there. You can also create groups and pages. The design tips and sizes described in this column are for profiles: groups and pages are different. Here’s a brief description of how you should use these features.

Profiles: In a nutshell, profiles are for individuals. You’re supposed to use your real name in your profile and manage it yourself. Everyone who uses Facebook must have a profile, and you need to have a profile in order to create a Facebook Group or Fan Page. The instructions in this column apply best to Facebook profiles.

Pages: Designed to broadcast information to a large audience, Facebook Pages, such as the new KelbyOne fan page, are the best option for big brands, actors, authors, businesses, and anyone else with a large following. Pages must be created by an official representative of a brand, business, institution, etc. You can authorize more than one person to manage the account, but don’t go thinking you can create a spoof page about your favorite breakfast cereal. Design tip: Although you can create a fan page design using the same process you used for your profile, pages offer more design options, including the ability to use a larger cover image and to create a tabbed design with multiple images.

Groups: Anyone can create a Facebook Group on any topic, and they can be managed by one or more people. Groups are designed to foster discussion and are ideal for professional associations, Adobe User Groups, and just about anything you want to share with a community. Design tip: A popular design option enables you to automatically create a banner image for your group page using the profile pictures of members of your group.

Share & Enjoy


 

  1. Hilde T (Reply) on Wednesday February 26, 2014

    Haha! Awesome! Thanks :D



Planet Photoshop Photoshop World KelbyOne Lightroom Killer Tips Scott Kelby