Free Full Layered Facebook GUI PSD Kit

Advertisement

In this post we release a free Facebook GUI PSD Kit, designed by SurgeWorks and released for Smashing Magazine and its readers. The main idea behind the kit is to speed up the prototyping of Facebook application UIs and Facebook fan pages, thus sparing you from drawing all the comps and letting you customize all the texts, buttons and data as you need. As usual, the kit is free to use in all projects, without any restrictions.

The kit brings the Facebook vector icon and logo. Also, since the focus of this resource are the UI elements, it brings a main window with the header, menu and the chat window for you to set up your realistic mock-ups. Plus all the modal components, comment boxes, buttons, message boxes, tabs, etc. All the components are full layered, built using vectors and blending options, so that scaling and editing the objects will not be a problem.

Download the set for free!

The theme is released under Creative Commons. You can use it 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 kit as you wish.

Screenshot

Features

The PSD set consists of 3 PSD files:

  • Facebook-GUI.psd contains all Facebook UI elements;
  • Facebook-App-Authorization-Request.psd and Facebook-App-Template.psd contain the basic structure for Facebook applications design.

Facebook-App-Authorization-Request
Facebook App Authorization Request (large view)

Facebook-App-Template
Facebook App Template (large view)

Features
Features (large view)

Features
Features (large view)

Features
Features (large view)

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

↑ Back to top

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops and loves solving complex problems in large companies. Get in touch.

  1. 1

    This is great – really useful for anyone creating Facebook Applications!

    0
  2. 3

    useful stuff… thx for the effort :)

    2
  3. 4

    uau thanks for the great kit :) especially now with facebook fan pages and client applications, good for concepts! :)

    2
  4. 5

    Great!
    I’ve been looking for this long time ago.
    Thank you very much, it looks awesome.

    1
  5. 6

    amazing! Thanks a lot!

    1
  6. 7

    Mimojito (aka Efren)

    July 23, 2010 6:42 am

    Excellent! I can now throw out all my PSDs ;)

    -2
  7. 8

    That’s pretty awesome! Does it come with free updates? :-P

    -2
  8. 9

    Sudarshan Gurung

    July 23, 2010 6:46 am

    Great stuff. Thanks.

    1
  9. 10

    Awesome! This is one of the reasons I visit smashingmagazine each and every day… :)

    -2
  10. 11

    wow just when need them ! thnx a lot

    -2
  11. 12

    Nice! The examples contain several typos though – I’m assuming I can edit those out?

    1
  12. 17

    lol I can’t believe the timing of this.

    I just spent 4 days doing just this to make a FB themed Powerpoint for the office Town Hall/year in review brief. Did it all in PS from scratch..used a few screen captures, mimic the fonts and everything, creating profile pages for each division etc etc.

    I’m just amazed this came out 2 days after the meeting was held.

    Ah well, it’s still a great download so thanks :)

    1
  13. 18

    It would be really great if there were a Fireworks version too!

    -4
  14. 20

    Woohoo… Congratulations Ney & Renato for being featured on Smashing Magazine. :)

    0
  15. 21

    Just what I needed! Thanks for the post – Hope to see updates since Facebook makes changes to their UI quite often! :D

    0
  16. 22

    Thanks!

    -1
  17. 23

    Cool stuff. Thanx a lot!

    0
  18. 24

    great! thx!

    0
  19. 25

    Thanks, for the great job! Really useful :)

    0
  20. 26

    Thanks for great and very useful package! Super..as usual on smashing magazine :)

    0
  21. 27

    As well-done and useful as this is, Facebook iterates their design fairly often. Granted, the changes are often small and un-noticeable to the average Facebook user, I think this is great for doing comping more general situations. Thanks for sharing it either way.

    0
  22. 28

    Charles Wedsbery

    July 23, 2010 9:29 am

    This ‘kit’ is a copyright violation of Facebook’s look-and-feel.

    Using it could open you up to getting sued.

    It doesn’t matter if it’s released as Creative Commons.

    -2
    • 29

      Renato Carvalho

      July 23, 2010 9:56 am

      Dear Charles, the only goal here is to help developers to mockup, design and develop applications http://developers.facebook.com for Facebook quickly and professionally. With that, we can have a real idea of what the application is going to look like.

      I’m one of the designers who worked on this project. If there’s any problem with that, please someone from Facebook let us know. So, one more time, what we wanted is to make an application design/development easier and following the Facebook UI standards.

      1
    • 30

      Only if you go and use this kit to make your own artwork/website not related to Facebook…

      Using this to help layout wireframes is pure gold. If you didn’t already screengrab/mimic a site that you needed to incorporate into your webpage, you’re doing something wrong.

      0
    • 31

      You sir, are an idiot.

      0
  23. 32

    Marcus Derencius

    July 23, 2010 9:34 am

    That’s really cool and well done. Congrats for the people involved. :)

    0
  24. 33

    Most clutch site.

    0
  25. 34

    iammichaeljames

    July 23, 2010 9:59 am

    This is a great!

    0
  26. 35

    this is insane!

    0
  27. 36

    Cool Man!.. It’s a good idea and useful for all of us

    0
  28. 37

    Great
    Thankyou for sharing it ;)

    0
  29. 38

    Very cool download. In the middle of creating a custom facebook tab so this is much needed.

    Though with all the fantastic freebies and inexpensive stock images available now, I’m finding myself in need of an excellent Digital Asset Manager (DAM) for Mac.

    Anyone have any ideas?

    0
  30. 39

    Matthew Mueller

    July 23, 2010 12:56 pm

    Awesome! Thanks a lot!

    0
  31. 40

    I feel like I’m STEALING by downloading this.

    0
  32. 41

    Amazing! Right in line for my current project. Awesome how you guys always come along with the right tools just as I need them.

    0
  33. 42

    This is great! Thanks for sharing.

    0
  34. 43

    THANK YOU SO MUCH! This is exactly what I need today. Just remember the new width spec for apps is 540 pixels. It’s wider in the GUI.

    0
    • 44

      its going to be 520px for profile tabs, apps will remain 760px. So all good! Thanks for an awesome resource guys

      0
  35. 45

    This is definitely great! Thank you! Cheers!

    0
  36. 46

    Very helpful, thanks for sharing. ;D

    0
  37. 47

    It is very useful for all designer. They can understand that how facebook UI has made in photoshop. Thanks very much for sharing.

    0
  38. 48

    Really amazing helpful ! thanx

    0
  39. 49

    Great! I had to make an entire page mock-up for a client a month ago. WHERE WAS THIS THEN!?
    ;)

    0
  40. 50

    I’m not that much FB fan so first thing that came to mind was fear of people abusing this… let’s hope it won’t happen then

    0
  41. 51

    Wow! This will come in very handy for my future FBML and maybe websites! Thanks.

    0
  42. 52

    Bratu Sebastian

    July 24, 2010 2:11 am

    This helps a lot, I too want to create my first facebook app to promote my tutorials. Thanks a lot!

    0
  43. 53

    I could of used this a few months ago. Well at least I have it for when the one client comes calling with something else to do. Thanks much.

    0
    • 54

      It’s worse than that – now you’re going to get grammar nazis shouting “could have” at you too. Hopefully they’ll at least be so ashamed of their pedantry that they’ll write in the third person…

      2
  44. 55

    Thanks 4 sharing man!!! really very helpful!!! ♥

    0
  45. 56

    Thank you. It’ll help fb apps development

    0
  46. 57

    Thank you!!

    0
  47. 58

    Really amazing stuff and helpful too….. thanks a ton….. :)

    0
  48. 59
  49. 60

    It’s AMAZING kit..but..sad it just onother workshiping for facebook, facebook sucks.it won’t last long :)

    0
  50. 61

    thanxx for sharing!!!

    0
  51. 62

    OMG, been looking for something like this for a LONG time. Awesome, truly awesome. Can’t wait to download it to my collection at work.

    0
  52. 63

    Wonderful … It’s really huge collection…

    0
  53. 64

    Dareen Alhiyari

    July 25, 2010 1:58 am

    Thanks!

    0
  54. 65

    A very resource full article! Thanks for compiling the tips and tricks. I have some already implemented…thanks for the rest.

    0
  55. 66

    @MANON:

    “Though with all the fantastic freebies and inexpensive stock images available now, I’m finding myself in need of an excellent Digital Asset Manager (DAM) for Mac.”

    Try Aperture – it’s a pro photo catalog/editor etc., but I find it invaluable for just having a sepaarte library with all my “collected images”, symbols etc.

    0
  56. 67

    What a great collection, I’m definitely bookmarking these for future ideas. They all have a ‘professional’ feel to them too.

    0
  57. 68

    Nice, but too bad facebook changes their interface every 3 months or so.

    0
  58. 69

    Thanks. Now i’ll be developing FB app soon.

    0
  59. 70

    Great Stuff……
    Thanks a lot……..

    0
  60. 71

    you guys have always been a valuable resource for me and this Facebook template is no exception – thanks a lot

    0
  61. 72

    Thanks guys. Very very usefull!!! Great job as always.

    0
  62. 73

    That’s great! Shame it’s out of date already though. Anyone know if it will be actively kept updated?

    0
  63. 74

    This is a crazy Barão’s work.

    0
  64. 75

    Thank ! Great work !

    0
  65. 76

    Nice!
    Thanks!

    0
  66. 77

    Awesome
    Great collection.

    0
  67. 78

    Let’s phish!

    0
  68. 79

    waw… awesome! thx for share bro

    0
  69. 80

    Awesome, I just wrote a blog article on the best UI resources for us designers, linked it up! contenttocommerce.com/fuel/ui-round-up/

    0
  70. 81

    Thanks a lot guys, this is the bomb! ;)

    0
  71. 82

    Thanks for the GUI… Some of the elements in it are really helpful

    0
  72. 83

    As always – Brilliant !!!!!
    Thank you so much for this!

    0
  73. 84

    wow what a great work :D

    0
  74. 85
  75. 86

    Nice and Helpful thanks :)

    0
  76. 87

    Its Very Nice. Its very Useful for Facebook Designers and Developers.

    0
  77. 88

    Great PSD. Hope no one using it for phishing. LOL…

    0
  78. 89

    Woot, this is a great reference for creating a social networking site.
    Thanks for sharing :>

    0
  79. 90

    Great, very useful recently used ff GUI on my portfolio
    Now got to try this :D

    0
  80. 91

    Dumisani Luthango

    August 25, 2010 5:13 am

    I’m loving the idea but I’m not sure how to use this. can someone please explain to me?

    0
  81. 92

    Usefull if you want to do “pishing website” …

    0
  82. 93

    Great resource, but I find it rather odd that there isn’t a “Like” button in any of the files. Seems like that may be a good addition for the next round of revisions. Again, cheers!

    0
  83. 94

    God bless you guys!! That’s great.

    0
  84. 95

    Thank you so much … good job man !!

    0
  85. 96

    this is great!thanks!

    0
  86. 97

    Great. But is it up to date?

    THX-M-

    0
  87. 98

    really sad that there is no hover buttons and user interactions styles

    0
  88. 99

    Sorry guys im new here:
    why is it good to have all that stuff in psd layers, when all that thing i already have in facebook?!? Sorry i didnt get it.

    0
  89. 100

    Martin Pottjewijd

    March 7, 2011 1:39 am

    Great work thanks!!!

    0
  90. 101

    Thanks,it’s great.

    0
  91. 102

    thanks ppl! too bad i didn’t stumble upon it earlier, would have spared me much work

    0
  92. 103

    Just I open with PS, but, seems I didnt have a font , anybody has the name of the font the template need?
    Thnks in advance

    0
  93. 104

    Thank you very much…this will save time for the really important thing, the user experience design =D

    Love you SM!

    0
  94. 105

    Thanks! this will really help me on my iPhone designs that require facebook posts modals.
    TY!

    0
  95. 106

    Hi
    This is great.
    Thanks

    0
  96. 107

    Oliver Bob Lagumen

    August 4, 2011 1:02 am

    Nice work, may I know what fonts are used here in this psd files? Its missing in my PC. Thanks.

    OBL

    0
  97. 108

    Hi This is great.
    Thanks

    0
  98. 109
  99. 110

    GR8 man … !! Thanks a lot brow ….

    0
  100. 111

    Thanks a lot, It is a great help.

    0
  101. 112

    Great! Thanks for sharing.

    3
  102. 113

    How i can find a wireframe for facebook to work on balsamiq?

    2
  103. 114

    Me. Designing lots of Facebook applications for clients at the moment

    -1
  104. 115

    Renato Carvalho

    July 27, 2010 2:21 am

    Philip, could you please specify what is out of date?

    Maybe if you help letting us know what is out of date we could help to keep up to date. But without contributing is not going to help ;) Cheers

    0
  105. 116

    Very Good Job =)
    Thanks a lot

    2

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top