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!
James
July 23rd, 2010 6:13 amThis is great – really useful for anyone creating Facebook Applications!
Kaushik
July 23rd, 2010 12:19 pmYa really good and helpful
Adrian Demian
July 23rd, 2010 6:14 amuseful stuff… thx for the effort :)
h1brd
July 23rd, 2010 6:18 amuau thanks for the great kit :) especially now with facebook fan pages and client applications, good for concepts! :)
Nico
July 23rd, 2010 6:25 amGreat!
I’ve been looking for this long time ago.
Thank you very much, it looks awesome.
Domsche
July 23rd, 2010 6:31 amamazing! Thanks a lot!
Mimojito (aka Efren)
July 23rd, 2010 6:42 amExcellent! I can now throw out all my PSDs ;)
guitarguru102
July 23rd, 2010 6:45 amThat’s pretty awesome! Does it come with free updates? :-P
Sudarshan Gurung
July 23rd, 2010 6:46 amGreat stuff. Thanks.
Bassem
July 23rd, 2010 6:52 amAwesome! This is one of the reasons I visit smashingmagazine each and every day… :)
Tanveer
July 23rd, 2010 7:02 amwow just when need them ! thnx a lot
Jenni
July 23rd, 2010 7:09 amNice! The examples contain several typos though – I’m assuming I can edit those out?
mike
July 23rd, 2010 9:53 amyou assume correctly. stop complaining about free stuff.
MAJ3STIC
July 24th, 2010 2:11 amlol. 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.
John
September 23rd, 2010 12:46 pmfree is not an excuse for typos.
Jack Nycz
February 27th, 2011 11:28 amYou, sir, are a dick.
Wysiwyg
July 23rd, 2010 7:30 amlol 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 :)
markus
July 23rd, 2010 7:46 amIt would be really great if there were a Fireworks version too!
haze
May 18th, 2011 1:48 am+1
still great work tough!
Tomislav Bilic
July 23rd, 2010 7:58 amWoohoo… Congratulations Ney & Renato for being featured on Smashing Magazine. :)
Ray
July 23rd, 2010 7:59 amJust what I needed! Thanks for the post – Hope to see updates since Facebook makes changes to their UI quite often! :D
DEKDaddy
July 23rd, 2010 8:00 amThanks!
Gerd Wippich
July 23rd, 2010 8:01 amCool stuff. Thanx a lot!
D E N Y
July 23rd, 2010 8:17 amgreat! thx!
Morris Clay
July 23rd, 2010 8:38 amThanks, for the great job! Really useful :)
FeryKloucek
July 23rd, 2010 9:10 amThanks for great and very useful package! Super..as usual on smashing magazine :)
Mig Reyes
July 23rd, 2010 9:27 amAs 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.
Charles Wedsbery
July 23rd, 2010 9:29 amThis ‘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.
Renato Carvalho
July 23rd, 2010 9:56 amDear 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.
Simon
July 25th, 2010 4:50 amOnly 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.
Justin
November 1st, 2011 6:38 amYou sir, are an idiot.
Marcus Derencius
July 23rd, 2010 9:34 amThat’s really cool and well done. Congrats for the people involved. :)
mike
July 23rd, 2010 9:55 amMost clutch site.
iammichaeljames
July 23rd, 2010 9:59 amThis is a great!
SilentMan
July 23rd, 2010 10:45 amthis is insane!
Martin
July 23rd, 2010 11:18 amCool Man!.. It’s a good idea and useful for all of us
shahram
July 23rd, 2010 12:15 pmGreat
Thankyou for sharing it ;)
Manon
July 23rd, 2010 12:37 pmVery 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?
Matthew Mueller
July 23rd, 2010 12:56 pmAwesome! Thanks a lot!
Ken
July 23rd, 2010 2:12 pmI feel like I’m STEALING by downloading this.
James
July 23rd, 2010 2:23 pmAmazing! Right in line for my current project. Awesome how you guys always come along with the right tools just as I need them.
Denver Poria
July 23rd, 2010 2:51 pmThis is great! Thanks for sharing.
Patrice
July 23rd, 2010 2:56 pmTHANK 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.
geoff
July 23rd, 2010 8:43 pmits going to be 520px for profile tabs, apps will remain 760px. So all good! Thanks for an awesome resource guys
Gene Ronquillo
July 23rd, 2010 3:21 pmThis is definitely great! Thank you! Cheers!
Thomas Dik
July 23rd, 2010 3:23 pmVery helpful, thanks for sharing. ;D
Deepak
July 23rd, 2010 8:11 pmIt is very useful for all designer. They can understand that how facebook UI has made in photoshop. Thanks very much for sharing.
Surajit Kayal
July 23rd, 2010 9:00 pmReally amazing helpful ! thanx
Speider
July 23rd, 2010 10:18 pmGreat! I had to make an entire page mock-up for a client a month ago. WHERE WAS THIS THEN!?
;)
Nox
July 24th, 2010 12:08 amI’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
Huw Rowlands
July 24th, 2010 12:12 amWow! This will come in very handy for my future FBML and maybe websites! Thanks.
Bratu Sebastian
July 24th, 2010 2:11 amThis helps a lot, I too want to create my first facebook app to promote my tutorials. Thanks a lot!
C
July 24th, 2010 2:21 amI 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.
D
July 28th, 2010 2:41 pmIt’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…
gravitywarrior
July 24th, 2010 2:39 amThanks 4 sharing man!!! really very helpful!!! ♥
Kate Mag
July 24th, 2010 2:43 amThank you. It’ll help fb apps development
claudio
July 24th, 2010 3:52 amThank you!!
Sulochana
July 24th, 2010 4:24 amReally amazing stuff and helpful too….. thanks a ton….. :)
salman
July 24th, 2010 9:41 amThanks,
Tommix
July 24th, 2010 11:58 amIt’s AMAZING kit..but..sad it just onother workshiping for facebook, facebook sucks.it won’t last long :)
prakarsh
July 24th, 2010 5:57 pmthanxx for sharing!!!
Jen Walter
July 24th, 2010 6:38 pmOMG, been looking for something like this for a LONG time. Awesome, truly awesome. Can’t wait to download it to my collection at work.
Jauhari
July 24th, 2010 11:23 pmWonderful … It’s really huge collection…
Dareen Alhiyari
July 25th, 2010 1:58 amThanks!
Aisha
July 25th, 2010 4:19 amA very resource full article! Thanks for compiling the tips and tricks. I have some already implemented…thanks for the rest.
Jonas
July 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.
sarfraz raza
July 25th, 2010 4:20 amWhat a great collection, I’m definitely bookmarking these for future ideas. They all have a ‘professional’ feel to them too.
Tim
July 25th, 2010 12:11 pmNice, but too bad facebook changes their interface every 3 months or so.
damu
July 25th, 2010 3:38 pmThanks. Now i’ll be developing FB app soon.
Rajeesh
July 25th, 2010 8:24 pmGreat Stuff……
Thanks a lot……..
roger
July 25th, 2010 10:17 pmyou guys have always been a valuable resource for me and this Facebook template is no exception – thanks a lot
NikTheGreek
July 26th, 2010 12:07 amThanks guys. Very very usefull!!! Great job as always.
Philip
July 26th, 2010 4:27 amThat’s great! Shame it’s out of date already though. Anyone know if it will be actively kept updated?
Renato Carvalho
July 27th, 2010 2:21 amPhilip, 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
Diego
July 26th, 2010 10:31 amThis is a crazy Barão’s work.
Danish Refai
July 26th, 2010 9:58 pmThank ! Great work !
Neety Rai
July 26th, 2010 10:57 pmNice!
Thanks!
Dhaval
July 26th, 2010 11:27 pmAwesome
Great collection.
grubbs
July 27th, 2010 1:01 amLet’s phish!
Anton Hilman
July 27th, 2010 3:47 amwaw… awesome! thx for share bro
Tiana
July 27th, 2010 1:16 pmAwesome, I just wrote a blog article on the best UI resources for us designers, linked it up! contenttocommerce.com/fuel/ui-round-up/
Eva
July 28th, 2010 12:15 amThanks a lot guys, this is the bomb! ;)
Bhargav
July 28th, 2010 5:12 amThanks for the GUI… Some of the elements in it are really helpful
Pieter Brink
July 29th, 2010 8:57 amAs always – Brilliant !!!!!
Thank you so much for this!
Leonardo
August 3rd, 2010 10:09 amwow what a great work :D
Dee
August 4th, 2010 2:00 amthanks!
AceeBaBa
August 6th, 2010 12:34 pmNice and Helpful thanks :)
J G Karthik
August 9th, 2010 1:38 amIts Very Nice. Its very Useful for Facebook Designers and Developers.
faisalmalik1989
August 11th, 2010 8:26 pmGreat PSD. Hope no one using it for phishing. LOL…
charmine
August 12th, 2010 7:16 pmWoot, this is a great reference for creating a social networking site.
Thanks for sharing :>
Tomasz Haracz
August 15th, 2010 4:39 pmGreat, very useful recently used ff GUI on my portfolio
Now got to try this :D
Dumisani Luthango
August 25th, 2010 5:13 amI’m loving the idea but I’m not sure how to use this. can someone please explain to me?
weaH
August 27th, 2010 6:18 amUsefull if you want to do “pishing website” …
Alupa
September 7th, 2010 11:32 amGreat 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!
Leonardo Oliveira
September 29th, 2010 12:44 pmGod bless you guys!! That’s great.
d3sine
November 14th, 2010 7:48 pmThank you so much … good job man !!
motiodesign
December 12th, 2010 4:30 amthis is great!thanks!
Michael
December 14th, 2010 8:30 amGreat. But is it up to date?
THX-M-
kwiss
January 7th, 2011 8:46 amreally sad that there is no hover buttons and user interactions styles
aansel
January 31st, 2011 4:59 pmSorry 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.
Martin Pottjewijd
March 7th, 2011 1:39 amGreat work thanks!!!
haiyanzhu
April 7th, 2011 6:58 amThanks,it’s great.
Nam O`Rip
June 21st, 2011 1:08 amthanks ppl! too bad i didn’t stumble upon it earlier, would have spared me much work
Alfonso
June 22nd, 2011 11:00 pmJust I open with PS, but, seems I didnt have a font , anybody has the name of the font the template need?
Thnks in advance
Edo
July 7th, 2011 9:49 amThank you very much…this will save time for the really important thing, the user experience design =D
Love you SM!
flamedidea
July 23rd, 2011 1:15 amThanks! this will really help me on my iPhone designs that require facebook posts modals.
TY!
Mahmoud
July 28th, 2011 11:36 pmHi
This is great.
Thanks
Oliver Bob Lagumen
August 4th, 2011 1:02 amNice work, may I know what fonts are used here in this psd files? Its missing in my PC. Thanks.
OBL
aladdin
August 16th, 2011 12:28 amHi This is great.
Thanks
andra
September 22nd, 2011 10:13 amThanks!!!
zani
September 26th, 2011 9:02 amGR8 man … !! Thanks a lot brow ….
Isuru Ranawaka
October 9th, 2011 6:01 amThanks a lot, It is a great help.