Menu Search
Jump to the content X

Free Full Layered Facebook GUI PSD Kit


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! Link

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.


Features Link

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 (large view)8

Facebook App Template (large view)10

Features (large view)1612

Features (large view)14

Features (large view)1612

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

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16

↑ 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 UX, front-end and performance problems in large companies. Get in touch.

  1. 1

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

  2. 2

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

  3. 4

    useful stuff… thx for the effort :)

  4. 5

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

  5. 6

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

  6. 7

    amazing! Thanks a lot!

  7. 8

    Mimojito (aka Efren)

    July 23, 2010 6:42 am

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

  8. 9

    Sudarshan Gurung

    July 23, 2010 6:46 am

    Great stuff. Thanks.

  9. 10

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

  10. 11

    wow just when need them ! thnx a lot

  11. 12

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

  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 :)

  13. 18

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

  14. 20

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

  15. 21

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

  16. 22


  17. 23

    Cool stuff. Thanx a lot!

  18. 24

    great! thx!

  19. 25

    Thanks, for the great job! Really useful :)

  20. 26

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

  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.

  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.

    • 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 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.

    • 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.

    • 31

      You sir, are an idiot.

  23. 32

    Marcus Derencius

    July 23, 2010 9:34 am

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

  24. 33

    Most clutch site.

  25. 34


    July 23, 2010 9:59 am

    This is a great!

  26. 35

    this is insane!

  27. 36

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

  28. 37

    Thankyou for sharing it ;)

  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?

  30. 39

    Matthew Mueller

    July 23, 2010 12:56 pm

    Awesome! Thanks a lot!


↑ Back to top