Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Photoshop PSD to make it easy to make creative use of the cover photo feature in Facebook timeline-based profile layout.
Branch: master
Failed to load latest commit information.
README.md Fixed markdown formatting
template.psd Updated PSD

README.md

Facebook Cover Photo Template

Contained within is a single PSD, template.psd, with all the guides and helpers you need to prototype cool photos utilizing Facebook's timeline profiles. The PSD contains:

  • A flat example image for context
  • A group with placeholders for the cover photo, including an empty layer to add your photo. The empty layer is grouped with a container so your photo will automatically be bound to the area.
  • A group with placeholders for the profile photo, also with an empty layer to add your photo.

Export the cover photo:

  1. Hide the Profile Photo group
  2. Hide the "cover photo border overlay" group inside of the Cover Photo group.
  3. Using the marquee tool, select the entire area of the cover photo placeholder, using the guides placed around the edges.
  4. Edit > Copy Merged, File > New (dimensions of new file should be 851 by 314), paste, and save for web.

Export the profile photo:

  1. Using the marquee tool, select the area of the "profile thumb placeholder" layer (125px x 125px) using the existing guides
  2. Edit > Copy Merged, File > New, paste, and save for web

Additional Information

Profile Photo CSS Info

  • Box around thumbnail has white (#fff) border, radius of 2px, 4 pixel border.
  • Profile image itself is 125 x 125, but with border (not shadow) is 133 x 133
  • Outer shadow of 1px black at 75%.

Cover Photo CSS Info

  • Photo has div overlay with inner border 1px solid, black at 25% opacity. Top border is black at 10% opacity.
  • Photo is cropped at 851 x 314
Something went wrong with that request. Please try again.