Free Full Layered Facebook GUI PSD Kit

Advertisement

In this post we release a free Facebook GUI PSD Kit, designed by SurgeWorks1 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.

Screenshot2

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-Request7
Facebook App Authorization Request (large view)8

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

Features11
Features (large view)1612

Features13
Features (large view)14

Features15
Features (large view)1612

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

Footnotes

  1. 1 http://surgeworks.com
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/uploader/images/facebook-gui-psd-kit/full_preview.png
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/uploader/images/facebook-gui-psd-kit/full_preview.png
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2010/07/facebook-gui-psd-kit.zip
  5. 5 http://media.libsyn.com/media/surgeworks/facebook-gui-psd.zip
  6. 6 http://surgeworks.com/blog/design/facebook-gui-free-psd-resource
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2010/07/Facebook-App-Authorization-Request.png
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2010/07/Facebook-App-Authorization-Request.png
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2010/07/Facebook-App-Template.png
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2010/07/Facebook-App-Template.png
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2010/07/zoom01.png
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2010/07/zoom01.png
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2010/07/zoom02.png
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2010/07/zoom02.png
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2010/07/zoom03.png
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2010/07/zoom01.png

↑ Back to top Tweet itShare on Facebook

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, online workshops and loves solving complex performance problems in large companies. Get in touch.

Advertisement
  1. 1

    thanxx for sharing!!!

    0
  2. 52

    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
  3. 103

    Wonderful … It’s really huge collection…

    0
  4. 154

    Dareen Alhiyari

    July 25, 2010 1:58 am

    Thanks!

    0
  5. 205

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

    0
  6. 256

    @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
  7. 307

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

    0
  8. 358

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

    0
  9. 409

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

    0
  10. 460

    Great Stuff……
    Thanks a lot……..

    0
  11. 511

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

    0
  12. 562

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

    0
  13. 613

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

    0
  14. 664

    This is a crazy Barão’s work.

    0
  15. 715

    Thank ! Great work !

    0
  16. 766

    Nice!
    Thanks!

    0
  17. 817

    Awesome
    Great collection.

    0
  18. 868

    Let’s phish!

    0
  19. 919

    waw… awesome! thx for share bro

    0
  20. 970

    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
  21. 1021

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

    0
  22. 1072

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

    0
  23. 1123

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

    0
  24. 1174

    wow what a great work :D

    0
  25. 1225
  26. 1276

    Nice and Helpful thanks :)

    0
  27. 1327

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

    0
  28. 1378

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

    0
  29. 1429

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

    0
  30. 1480

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

    0
  31. 1531

    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
  32. 1582

    Usefull if you want to do “pishing website” …

    0
  33. 1633

    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
  34. 1684

    God bless you guys!! That’s great.

    0
  35. 1735

    Thank you so much … good job man !!

    0
  36. 1786

    this is great!thanks!

    0
  37. 1837

    Great. But is it up to date?

    THX-M-

    0
  38. 1888

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

    0
  39. 1939

    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
  40. 1990

    Martin Pottjewijd

    March 7, 2011 1:39 am

    Great work thanks!!!

    0
  41. 2041

    Thanks,it’s great.

    0
  42. 2092

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

    0
  43. 2143

    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
  44. 2194

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

    Love you SM!

    0
  45. 2245

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

    0
  46. 2296

    Hi
    This is great.
    Thanks

    0
  47. 2347

    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
  48. 2398

    Hi This is great.
    Thanks

    0
  49. 2449
  50. 2500

    GR8 man … !! Thanks a lot brow ….

    0

↑ Back to top