Freebie: Facebook Fan Page GUI PSD

Advertisement

Today we are glad to release a yet another freebie: a Facebook Fan Page GUI PSD, designed by Hike1 and released for Smashing Magazine and its readers. The PSD will speed up the process of creating previews, thus sparing you from drawing all the comps and letting you customize all the texts, buttons and data as you need. All layers are vectorized, allowing you to scale up the GUI without loss of quality. The mock-up is 100% pixel-accurate, it has 4 viewing modes (default wall, wireframe wall, default tab, wireframe tab), all layers labeled and grouped. Smart guides are included. The PSD is compatible with Adobe Photoshop CS3+.

With every update Facebook performs to its fan page design, Hike reproduces it 24 hours later and updates its download link with the latest version. The main idea behind this PSD was to provide all designers and agencies with a useful tool that will improvs their daily workflow when it comes to preparing Facebook-related previews for their clients or internal presentations. As usual, the goodie is absolutely free to use in private and commercial projects.

2

Download the PSD for free!

You can use the freebie for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the file as you wish.

Screenshot3

Features

  • 100% pixel-accurate
  • 4 viewing modes (default wall, wireframe wall, default tab, wireframe tab)
  • Fully vectorized
  • Limitless scaling
  • All layers labeled
  • Smartly grouped
  • Completely editable
  • Includes smart guides
  • CS3+ compatible
  • Always up to date

Previews

tab_wireframe8
Tab wireframe (large preview)9

wall_default10
Default wall (large preview)11

wall_wireframe12
Wall wireframe (large preview)13

layerpalette14
Layer Pallett (large preview)15

Behind the Design

As always, here are some insights from the designer:

“From our own experience we knew how time consuming it could be to have to recreate or prepare a decent Facebook template that allows you to implement custom tab graphics, profile banners etc. It’s a real pain and waste of time and it only takes away your focus from the actual artwork. At Hike we once decided to invest multiple days into creating a complete Photoshop template that would allow us to create design previews on the fly.

What sets this PSD apart from similar files is the fact that with every update Facebook performs to its fan page design, Hike reproduces it 24 hours later and updates its download link with the latest version. As listed under Features above, we actually reproduced each and every pixel of Facebook’s fan page UI. The PSD includes 4 viewing modes for the most common design tasks and it’s fully vectorized. Thanks to smart grouping and clever labeling, everybody will easily get along in our PSD. If you have suggestions for improving the file or feel like something is still missing, feel free to post it on our Fan Page wall and we will respond. Follow @HikeSocialApps for updates!”

Thank you, guys! We appreciate your work and your good intentions.

Footnotes

  1. 1 http://www.wearehike.com
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/uploader/images/fan-page-gui-psd/full_preview.png
  3. 3 http://www.wearehike.com/files/fb-fanpage-gui
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/uploader/images/fan-page-gui-psd/full_preview.png
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2011/09/Facebook-fan-page-GUI-PSD.zip
  6. 6 http://www.wearehike.com/files/fb-fanpage-gui
  7. 7 http://www.wearehike.com/blog/2011/07/11/free-facebook-fan-page-gui-psd-for-designers
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/uploader/images/fan-page-gui-psd/full_tab_wireframe.png
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/uploader/images/fan-page-gui-psd/full_tab_wireframe.png
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/uploader/images/fan-page-gui-psd/full_wall_default.png
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/uploader/images/fan-page-gui-psd/full_wall_default.png
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/uploader/images/fan-page-gui-psd/full_wall_wireframe.png
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/uploader/images/fan-page-gui-psd/full_wall_wireframe.png
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/uploader/images/fan-page-gui-psd/full_layerpalette.png
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/uploader/images/fan-page-gui-psd/full_layerpalette.png

↑ Back to topShare on Twitter

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Perfect timing! :) Thank you Hike & SM.

  2. 2

    Wow, thanks for all your hard work! This saves so much time! :)

  3. 3

    Was looking for the same since a long time, thank you

  4. 4

    Perfect, just what I needed!

  5. 5

    Excellent timing. Thanks SM & Hike!

  6. 6
  7. 7

    Great work. But just a small error, the right size for a profle image is 180x540px.

    Cheers!

    • 8

      Hey Hugo, thanks for pointing this out. Of course you’re right and the correct height is 540px (it used to be 600px, but that’s old news). Expect it to be fixed with the next update which will become available on our fan page shortly.

  8. 9

    Beautiful! Thank you so much, Hike.

  9. 10
  10. 11

    This will be really useful, thanks! :) x

  11. 12

    I just love SM for sharing this type of stuff, especially for free. Thank you :)

  12. 13

    Great Job, thx for share

  13. 14

    Thanks just what I was looking for! really useful :D

  14. 15

    Hike definitely deserves a link for this! This is awesome.

  15. 16

    Maybe a dumb question: How can this be useful? To design another facebook?

  16. 18

    hey thanks for sharing

  17. 19

    Noticed a typo, first one I have ever seen on Smashing Mag!

    Second par, third line:
    with a useful tool that will improvs their

    Great resource, thanks : )

  18. 20

    This will make my life easy… thanks a bunch for sharing!

  19. 21

    Great job….Thank you Hike :)

  20. 22

    Thanx

  21. 23

    Good timing!
    This will be really useful, thanks!

  22. 24

    Thumbs up! Plus perfect timing for me, too.

  23. 25

    Thanks a ton for your great help. It is really too good.

  24. 26
  25. 27

    Awesome stuff guys, thanks!

  26. 28

    Just looking for something like that now: also for me perfect timing!!! Thanks so so much ;)))

  27. 29

    And this is different from facebook screenshot how ? Why do i need all these layers when i cant event touch them in facebook? Seriously …

    • 30

      Yeh I have to say that a quick and dirty screen shot of the clients Facebook Page is really all I need – or ever will need. All those layers – making me feel a little woozy!

  28. 31

    FIREWORKS MASTER RACE

    September 14, 2011 3:31 am

    haha designing web sites in Photoshop, some people are just gluttons for punishment.

    I mean look at those layers, it’s clearly the wrong tool for the job.

    FIREWORKS MASTER RACE!

  29. 34

    wow, a great PSD file, perfect for my Banner for Facebook dotcom product, heheh!

  30. 35

    Off topic but I get very annoyed when you guys put “Mostly Vitaly, Sven, etc”. Just seems very unprofessional and attention hungry.

    I’m sure there’s another way to put it without sounding the way you do while at the same time giving certain people credit.

    Sorry just my two cents.

  31. 36

    Yeah, FIREWORKS is a better tool for this kind of job, no doubt!

  32. 37

    Wow! Thanks for that!

  33. 38

    Awesome, THANKS!

  34. 39

    Got problem opening zip files but great tips. Thanks! Btw does FB compress profile images? I see pixelation…

    • 40

      I’ve definitely seen pixelation on FB profile pics. I only find it to be bothersome when I have designed a Facebook Fan Page App that relates the canvas area to the profile image, then its rather noticeable.

  35. 41

    We appreciate your work. Nice work.

  36. 42

    it’s amazing that FB doesn’t supply this.

  37. 43

    Aha!! Great PSD file. Will definitely come in handy. Thanks!!!!

  38. 44

    Great work!

  39. 45

    Thanks a lot!

  40. 46

    Thank you so much! Highly appreciated!

  41. 47

    Great PSD file. Thank you very Much.
    you have said the height of FB fan page tab is not limited and the default value is 800px.
    so is there a way to increase this height ..
    please help.
    thanks in advance

    • 48

      Hey Shafraz, you can easily adjust the height of the tab layer (800px) by using the transforming tool in Photoshop (cmd + t). Beforehand you should increase the overall canvas height by the amount you want to expand the tab content. Be sure to adjust the layer “content” accordingly as well. Have fun!

  42. 49

    thanks a lot SM.

  43. 50

    ultimate, thanks a lot

  44. 51

    Hike Fan Page GUI PSD Update: Version 09/21/2011 is now available. Major update to the header, several pixel adjustments, view shares and more. Download: Visit “Hike – Social Apps” on Facebook … You saw it here first!

  45. 52

    This is cool. Thanks for sharing this SM.

  46. 53

    Hike Fan Page GUI PSD Update: Version 09/28/2011 is now available. Find Friends, updated wall bars (new style), several pixel adjustments and more. Download: Visit “Hike – Social Apps” on Facebook … Go get it!

  47. 54

    Wow, i feel like i’m late, 2 weeks late, but still quite happy, thanks a million.

  48. 55

    Thanks a lot!!!!

  49. 56

    Great! Very usefull :)

  50. 57

    The “average viewport” line will support clients about the “fold issue”. Fellow designers, don’t show a mockup with this line ;)

    • 58

      Exactly right, it simply serves as an orientation when designing graphics. Of course the line shouldn’t be part of your final artwork ;)

  51. 59
  52. 60

    Hike Fan Page GUI PSD Update: Timeline Version is now available. No need for any explanation. It’s ALL NEW, ALL TIMELINE! Get it now! Download: Visit “Hike – Social Apps” on Facebook

  53. 61

    Wow, incredible blog structure! How lengthy have you been blogging for? you made blogging glance easy. The whole look of your site is excellent, let alone the content!

  54. 62

    Mariechen Du Plessis

    October 16, 2013 11:37 am

    Thank you Thank you Thank you – to infinity and beyond!!

↑ Back to top