Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

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

Facebook App Template (large view)9

Features (large view)1511

Features (large view)13

Features (large view)1511

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
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ 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


    July 23, 2010 6:45 am

    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

    Adrian Demian

    July 23, 2010 6:14 am

    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

    Tomislav Bilic

    July 23, 2010 7:58 am

    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

    Gerd Wippich

    July 23, 2010 8:01 am

    Cool stuff. Thanx a lot!

  18. 24

    great! thx!

  19. 25

    Morris Clay

    July 23, 2010 8:38 am

    Thanks, for the great job! Really useful :)

  20. 26


    July 23, 2010 9:10 am

    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!

  31. 40

    I feel like I’m STEALING by downloading this.

  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.

  33. 42

    Denver Poria

    July 23, 2010 2:51 pm

    This is great! Thanks for sharing.

  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.

    • 44

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

  35. 45

    Gene Ronquillo

    July 23, 2010 3:21 pm

    This is definitely great! Thank you! Cheers!

  36. 46

    Very helpful, thanks for sharing. ;D

  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.

  38. 48

    Surajit Kayal

    July 23, 2010 9:00 pm

    Really amazing helpful ! thanx

  39. 49

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

  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


↑ Back to top