Smashing Magazine
Free Full Layered Facebook GUI PSD Kit
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.
- large preview (.png, 0.72 Mb)
- download the .zip-package (zip, 6.5 Mb)
- alternative download link (zip, 5.1 Mb)
- release on the developer’s page
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 (large view)
Facebook App Template (large view)
Thank you, guys. We appreciate your work and your good intentions!
Vitaly Friedman, editor-in-chief of Smashing Magazine, an online magazine dedicated to designers and developers.
- 90 Comments
- 1
- 2
July 23rd, 2010 12:19 pmYa really good and helpful
- 2
- 3July 23rd, 2010 6:14 am
useful stuff… thx for the effort :)
- 4July 23rd, 2010 6:18 am
uau thanks for the great kit :) especially now with facebook fan pages and client applications, good for concepts! :)
- 5July 23rd, 2010 6:25 am
Great!
I’ve been looking for this long time ago.
Thank you very much, it looks awesome. - 6July 23rd, 2010 6:31 am
amazing! Thanks a lot!
- 7July 23rd, 2010 6:42 am
Excellent! I can now throw out all my PSDs ;)
- 8July 23rd, 2010 6:45 am
That’s pretty awesome! Does it come with free updates? :-P
- 9July 23rd, 2010 6:46 am
Great stuff. Thanks.
- 10July 23rd, 2010 6:52 am
Awesome! This is one of the reasons I visit smashingmagazine each and every day… :)
- 11July 23rd, 2010 7:02 am
wow just when need them ! thnx a lot
- 12July 23rd, 2010 7:09 am
Nice! The examples contain several typos though – I’m assuming I can edit those out?
- 13July 23rd, 2010 9:53 am
you assume correctly. stop complaining about free stuff.
- 14July 24th, 2010 2:11 am
lol. I assume no matter what if it contains typos it’s better than creating this by yourself which helps you rapid develop faster. Free stuff is free and doesn’t have to be perfect.
- 14
- 13
- 15July 23rd, 2010 7:30 am
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 :)
- 16July 23rd, 2010 7:46 am
It would be really great if there were a Fireworks version too!
- 17July 23rd, 2010 7:58 am
Woohoo… Congratulations Ney & Renato for being featured on Smashing Magazine. :)
- 18July 23rd, 2010 7:59 am
Just what I needed! Thanks for the post – Hope to see updates since Facebook makes changes to their UI quite often! :D
- 19July 23rd, 2010 8:00 am
Thanks!
- 20July 23rd, 2010 8:01 am
Cool stuff. Thanx a lot!
- 21July 23rd, 2010 8:17 am
great! thx!
- 22July 23rd, 2010 8:38 am
Thanks, for the great job! Really useful :)
- 23July 23rd, 2010 9:10 am
Thanks for great and very useful package! Super..as usual on smashing magazine :)
- 24July 23rd, 2010 9:27 am
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.
- 25July 23rd, 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.
- 26July 23rd, 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.
- 27July 25th, 2010 4:50 am
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.
- 26
- 28July 23rd, 2010 9:34 am
That’s really cool and well done. Congrats for the people involved. :)
- 29July 23rd, 2010 9:55 am
Most clutch site.
- 30July 23rd, 2010 9:59 am
This is a great!
- 31July 23rd, 2010 10:45 am
this is insane!
- 32July 23rd, 2010 11:18 am
Cool Man!.. It’s a good idea and useful for all of us
- 33July 23rd, 2010 12:15 pm
Great
Thankyou for sharing it ;) - 34July 23rd, 2010 12:37 pm
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?
- 35July 23rd, 2010 12:56 pm
Awesome! Thanks a lot!
- 36July 23rd, 2010 2:12 pm
I feel like I’m STEALING by downloading this.
- 37July 23rd, 2010 2:23 pm
Amazing! Right in line for my current project. Awesome how you guys always come along with the right tools just as I need them.
- 38July 23rd, 2010 2:51 pm
This is great! Thanks for sharing.
- 39July 23rd, 2010 2:56 pm
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.
- 40July 23rd, 2010 8:43 pm
its going to be 520px for profile tabs, apps will remain 760px. So all good! Thanks for an awesome resource guys
- 40
- 41July 23rd, 2010 3:21 pm
This is definitely great! Thank you! Cheers!
- 42July 23rd, 2010 3:23 pm
Very helpful, thanks for sharing. ;D
- 43July 23rd, 2010 8:11 pm
It is very useful for all designer. They can understand that how facebook UI has made in photoshop. Thanks very much for sharing.
- 44July 23rd, 2010 9:00 pm
Really amazing helpful ! thanx
- 45July 23rd, 2010 10:18 pm
Great! I had to make an entire page mock-up for a client a month ago. WHERE WAS THIS THEN!?
;) - 46July 24th, 2010 12:08 am
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
- 47July 24th, 2010 12:12 am
Wow! This will come in very handy for my future FBML and maybe websites! Thanks.
- 48July 24th, 2010 2:11 am
This helps a lot, I too want to create my first facebook app to promote my tutorials. Thanks a lot!
- 49July 24th, 2010 2:21 am
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.
- 50July 28th, 2010 2:41 pm
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…
- 50
- 51July 24th, 2010 2:39 am
Thanks 4 sharing man!!! really very helpful!!! ♥
- 52July 24th, 2010 2:43 am
Thank you. It’ll help fb apps development
- 53July 24th, 2010 3:52 am
Thank you!!
- 54July 24th, 2010 4:24 am
Really amazing stuff and helpful too….. thanks a ton….. :)
- 55July 24th, 2010 9:41 am
Thanks,
- 56July 24th, 2010 11:58 am
It’s AMAZING kit..but..sad it just onother workshiping for facebook, facebook sucks.it won’t last long :)
- 57July 24th, 2010 5:57 pm
thanxx for sharing!!!
- 58July 24th, 2010 6:38 pm
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.
- 59July 24th, 2010 11:23 pm
Wonderful … It’s really huge collection…
- 60July 25th, 2010 1:58 am
Thanks!
- 61July 25th, 2010 4:19 am
A very resource full article! Thanks for compiling the tips and tricks. I have some already implemented…thanks for the rest.
- 62July 25th, 2010 4:20 am
@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.
- 63July 25th, 2010 4:20 am
What a great collection, I’m definitely bookmarking these for future ideas. They all have a ‘professional’ feel to them too.
- 64July 25th, 2010 12:11 pm
Nice, but too bad facebook changes their interface every 3 months or so.
- 65July 25th, 2010 3:38 pm
Thanks. Now i’ll be developing FB app soon.
- 66July 25th, 2010 8:24 pm
Great Stuff……
Thanks a lot…….. - 67July 25th, 2010 10:17 pm
you guys have always been a valuable resource for me and this Facebook template is no exception – thanks a lot
- 68July 26th, 2010 12:07 am
Thanks guys. Very very usefull!!! Great job as always.
- 69July 26th, 2010 4:27 am
That’s great! Shame it’s out of date already though. Anyone know if it will be actively kept updated?
- 70July 27th, 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
- 70
- 71July 26th, 2010 10:31 am
This is a crazy Barão’s work.
- 72July 26th, 2010 9:58 pm
Thank ! Great work !
- 73July 26th, 2010 10:57 pm
Nice!
Thanks! - 74July 26th, 2010 11:27 pm
Awesome
Great collection. - 75July 27th, 2010 1:01 am
Let’s phish!
- 76July 27th, 2010 3:47 am
waw… awesome! thx for share bro
- 77July 27th, 2010 1:16 pm
Awesome, I just wrote a blog article on the best UI resources for us designers, linked it up! contenttocommerce.com/fuel/ui-round-up/
- 78July 28th, 2010 12:15 am
Thanks a lot guys, this is the bomb! ;)
- 79July 28th, 2010 5:12 am
Thanks for the GUI… Some of the elements in it are really helpful
- 80July 29th, 2010 8:57 am
As always – Brilliant !!!!!
Thank you so much for this! - 81August 3rd, 2010 10:09 am
wow what a great work :D
- 82August 4th, 2010 2:00 am
thanks!
- 83August 6th, 2010 12:34 pm
Nice and Helpful thanks :)
- 84August 9th, 2010 1:38 am
Its Very Nice. Its very Useful for Facebook Designers and Developers.
- 85August 11th, 2010 8:26 pm
Great PSD. Hope no one using it for phishing. LOL…
- 86August 12th, 2010 7:16 pm
Woot, this is a great reference for creating a social networking site.
Thanks for sharing :> - 87August 15th, 2010 4:39 pm
Great, very useful recently used ff GUI on my portfolio
Now got to try this :D - 88August 25th, 2010 5:13 am
I’m loving the idea but I’m not sure how to use this. can someone please explain to me?
- 89August 27th, 2010 6:18 am
Usefull if you want to do “pishing website” …
- 90July 24th, 2010 4:29 am
Me. Designing lots of Facebook applications for clients at the moment
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
- 10 Useful USB Thumb Drive Tricks - http://bit.ly/bUtuYc
- @kassy4 oh good good, you know how I respect your hard work and your efforts, Kat, didn't mean to sound harsh or something.
- @kassy4 dear Kat, sorry if my e-mail was disappointing... I didn't mean to upset you or something.
- The Three Key Elements ofIrresistible Email Subject Lines - http://bit.ly/aHN3wN
- Don’t Reduce Your Audience To A Stereotype - http://bit.ly/cc3yiS
- RT @abraham: Sometimes I write a letter on paper with a pen then burn it laughing about how Google must be crying over information it wi ...
- @jongold no, it's not :-)
- @collis it sounds exciting :-) We at Smashing should do it, too ;-)
- Try the “four minutes in the morning” routine with your significant other. It’ll pay many dividends. - http://bit.ly/bndnnE
- iCandies Icon Set: 60 Free Icons For Your User Interfaces and Apps - http://bit.ly/bRNdjB (please RT)
This is great – really useful for anyone creating Facebook Applications!