Twitter Bootstrap 2.0 Photoshop Template PSD

Posted by on Mar 23, 2012 in My Perspective, UX Design | 75 Comments

// Twitter Bootstrap: Web Guidelines for Developers

Twitter Bootstrap
Developer Guide (HTML, CSS, CSS3, LESS)
v 2.0
View Web Guidelines

I’ve become very fond of the Twitter Bootstrap 2 guide and have become an advocate of it ever since I found out about it.  It was created for and meant to be a guide for front-end developers to kickstart projects with common UI elements needed for most web apps and explains well how to implement it into existing code or a fresh new project. Its wonderful to base a style guide off and very easy to implement and customize especially with the use of less css.  Its especially great for hybrid designer/developers like myself that can design within the browser and quickly put together prototypes and demo functional wireframes. What about those designers that don’t code or that aren’t as versed or efficient in designing in the browser but want to pass their design off to a developer that wants to use bootstrap to streamline the coding process? I can just here them thinking “It would be nice to have a photoshop template that I can use to quickly put together a comp using existing styles already set up in the bootstrap css framework code”. Well that was I was thinking.

// Twitter Bootstrap: Photoshop Template for Designers

Twitter Bootstrap for v2.0
Design Template (Adobe Photoshop, PSD)
v 1.0

Download Photoshop Template

As I begin to use twitter bootstrap more and more with new apps and more designers are working on different enhancements to the same app I realized it would be nice to have a photoshop template we could all use to keep consistency in the app as we decide we evolve or enhance the twitter bootstrap defaults to adapt to the brand . So I searched around to see if anyone had already created one and there were a couple but I couldn’t find one that was for bootstrap version 2 but I did find an Adobe Fireworks template created by Grady Kelly (@gradykelly) that was well put together and very close to what is on the Twitter Bootstrap 2 guide. So I decided I’d convert it over to photoshop since that is what I work best in for UX Design.

// Twitter Bootstrap: Fireworks Template for Designers

Twitter Bootstrap  for v2.0
Design Template (Adobe Fireworks, PNG)
v 1.0

Download Fireworks Template

As I searched around for a bootstrap version 2 photoshop template I found an Adobe Fireworks template created by Grady Kelly (@gradykelly) that was well put together and very close to what is on the Twitter Bootstrap 2 guide. If you want to check for updates on the fireworks template visit the Extending Firewoks (@extendingfireworks) website. I’m providing it here as a resourse in the case that those looking would prefer it in Fireworks over Photoshop.

75 Comments

  1. Quora
    March 24, 2012

    Is there a PSD ui kit for Twitter Bootstrap?…

    Here is a PSD for Bootstrap 2.0 – http://www.bentdesignstudio.com/v2/2012/03/twitter-bootstrap-2-photoshop-template-psd/...

  2. Avinash D'Souza
    April 2, 2012

    Hey Ben,

    Just wanted to say thanks for taking the time and effort to put this out there.

    Much appreciated! Will cut down dev time in spades…

    Reply
    • Ben Peck
      April 2, 2012

      You’re very welcome. I know there is a lot of support for bootstrap, me being one of them. I find a psd for bootstrap useful in many ways so I figured it would do the same for others. Let me know if you’d like anything added and I’ll see what I can do.

      Reply
  3. Brandon Taylor
    April 3, 2012

    This is great work, and it’s very kind of you to share this. I can’t even begin to calculate how much time this will save me!

    Reply
  4. James
    April 3, 2012

    Thanks! This is rad.

    Reply
  5. Nick
    April 5, 2012

    It appears that this is the “wide” version of the grid and not the 960 one. Can you include the 960 fixed grid in the template as well?

    Reply
    • David
      April 7, 2012

      Hey @Nick, I found a 960 Version. However, bootstrap 2.0 is no longer 960 it is 940. Hope it works for you. It is about midway down the page. http://gui.repixdesign.com/#freebies

      Reply
  6. David
    April 7, 2012

    Ditto on the 960 version of the template

    Reply
  7. Sandesh Mandavkar
    April 10, 2012

    Thaks a lot..doing very hardwork…

    Reply
  8. Eric
    April 16, 2012

    Hi Ben, thank you for putting this Twitter Bootstrap photoshop template together. It is much appreciated! Twitter Bootstrap 2.0 is getting a lot of support from the community that is using it. I think your Photoshop template is a great step towards helping people use Bootstrap in every way they desire.

    Reply
  9. Quora
    April 22, 2012

    Is there a (fluid) grid available primarily focused on mobile (web) design?…

    Based on your wording “primarily focused on mobile (web) design”, I’m going to take that to mean, you want a ‘mobile first approach’, right? There are a number of solutions that will make your web pages responsive, but mobile first implies you are…

  10. Edgar Fleming
    April 27, 2012

    Ben… big up!

    As others have pointed out, this is a big help.

    Just wanted to add another “Thank You” to the pile.

    Reply
  11. Michal
    April 29, 2012

    Good job, thanks! If there was Google +1 you would get one

    Reply
  12. Higor Morais
    May 3, 2012

    Great job and thank you, Ben!

    Reply
  13. Taty
    May 6, 2012

    Thanks a lot for this nice resource!

    Reply
  14. Mink7
    May 8, 2012

    Thumbs up Ben. Saves a lot of time to rig up wireframes. Keep up the good work

    Reply
  15. JoeShon Monroe
    May 27, 2012

    This is a really good resource. Thanks for your efforts.

    Reply
  16. Pali Madra
    June 5, 2012

    Thanks Ben for the downloads. These are specially helpful for people like me who are learning bootstrap.

    Reply
  17. Nick Clark
    June 7, 2012

    I’m getting started in the Web Design industry and it seems like a lot of other people do and I guess there is nothing wrong with it but I want to know for sure…
    A lot of people use website templates and plug-ins from here, there and everywhere and put it together and they then sell it to their client as a site they have built.
    In fairness, you put it together and they wouldn’t know how to do that; never mind building it from the ground up but it’s clearly not the same as building one from scratch like I imagine they presume you are doing…

    So what’s the deal with it…
    It doesn’t make sense reinventing the wheel but where is the difference between using, tweaking and stealing code.

    Reply
    • Ben Peck
      July 19, 2012

      Web Design / UX Design has been an evolution. Users show patterns in the way they interact with the content we as user experience designers present them. The content we present to them has been in most cases, especially in early internet days, a guess of what we think a user would understand or want.

      Over time we’ve seen the patterns or tools that users have gravitated to and use the most. Once its been figured out that some from of web usability has been proven to be useful or easy to understand by the majority of users whether it was created by you or someone else its logical to utilize it when it applies to your needs. But we still continue to test our users with new “experimental” designs to explore the possibility of a new or better way. When we succeed we move forward using it, when we fail we move on and try other ideas.

      There is a popular quote by Picasso that is “Good artists copy, Great artists steal”. Bootstrap by Twitter is a collection of what is currently working(people understand it, they don’t have to think) in the web world right now. The designers/developers that created Bootstrap are saying, “Hey, use this, it makes sense to people. Restyle it, make it yours, but it always works the same no matter how the design looks” These guys didn’t invent these tools, they just noticed that people understand them, use them and decided to put it in one collection.

      Great designers steal but “The secret to creativity is knowing how to hide your sources.” —Albert Einstein. Look for inspiration for web design in things that aren’t web design. Look in the places you’d least expect to find it. When you find it and apply it to your designs for the web you’ll be the one that people think “invented” it.

      Reply
  18. PatC
    June 22, 2012

    This is awesome! Thanks for sharing.

    Reply
  19. Teylor Feliz
    July 10, 2012

    Great resource. Thanks for sharing!

    Reply
  20. Seanbelly
    July 11, 2012

    This is a really nice tool, thanks for putting it together.
    I can’t believe how much detail went into creating this psd!
    -Sean

    Reply
  21. John
    July 13, 2012

    Ben you are a genius. Thanks for being the man.

    Reply
  22. Jake
    July 19, 2012

    It’s nice, but pretty unorganized. For example the Nav-bar layer folder. There are like 50+ sub-layers in there. A little bit of work organizing them into subfolders for each nav-bar (there are 5 of them) and the dropdown would be really helpful. Otherwise it’s a royal pain trying to figure which element on the screen goes with which sublayer…

    Reply
    • Ben Peck
      July 19, 2012

      I’m aware of this and completely agree. I’m working on cleaning it up. I also have some areas were there are extra layers when really they’re not needed.

      This was version 1 and I put it together quick. I’ll be updating the link soon with a more cleaned up version.

      Reply
  23. Jeff
    August 1, 2012

    Hey Ben, I just wanted to say you’re a very thoughtful and generous individual. Thanks for making the Web development world a better place to live and work.

    Reply
  24. Joe
    August 6, 2012

    Thank you! Very useful and your hard work is much appreciated!

    Reply
  25. Anders
    August 8, 2012

    From Sweden with love!

    Reply
  26. Uds
    August 27, 2012

    Nice job mate.

    Reply
  27. thomas
    September 7, 2012

    thanks ben, really useful!

    Reply
  28. dennis
    September 19, 2012

    tnx m8 .. not a small tnx a big TNX

    Reply
  29. Mark Narusson
    September 26, 2012

    Ben this is awesome. I was given your link by a web development company I’ve just started working with. I didn’t know this existed so it will no doubt be very useful. I’ve always used the 960 grid as a basis, so this will possibly convert me. Thanks for sharing/taking the time to produce.

    Reply
  30. Quora
    October 1, 2012

    Where can I find a good and free gallery of web UI icons, buttons, bars, etc.?…

    In case you use Twitter Bootstrap (CSS elements) here is a stencil you can use in photoshop etc – http://www.bentdesignstudio.com/v2/2012/03/twitter-bootstrap-2-photoshop-template-psd/...

  31. Liam
    October 16, 2012

    Nice PS tool, thanks for sharing with community :-)

    Reply
  32. why.you.and.i
    October 25, 2012

    Exactly what i’ve been looking for! thank you for sharing :)

    Reply
  33. Mark Hallam
    November 5, 2012

    I really appreciate this. Thanks so much.

    Reply
  34. kched
    November 24, 2012

    Nice ty so much
    i’ve been looking for

    Reply
  35. Sumeet Chawla
    December 7, 2012

    This is great stuff! One of the best Bootstrap PSDs out there :) Thank you for creating this.

    Reply
  36. Mike
    December 16, 2012

    Ben,

    You are a genius! I have been looking for something like this for a while now and I must say I am quite impressed. This is going to shave a great deal of time off design work and just create a better end result for responsive sites!

    Thank you for crafting this!

    Do you accept donations!?

    Reply
  37. Sara
    December 21, 2012

    Thank you so much for this , it will save a lot of time :)

    Reply
  38. Raza
    December 27, 2012

    Very nice of you Ben for sharing it, It will save a lot of our time.

    Best Regards
    Raza M.
    http://webbuilderstudio.com/

    Reply
  39. Preston McCauley
    January 3, 2013

    Thanks. It’s always great to get new resources from the community!

    Reply
  40. Louie
    January 6, 2013

    Thank you, this is perfect,! I really appreciate you making this available to us all, awesome work!

    Reply
  41. Barry Ramsay
    January 25, 2013

    Cheers for putting this together, much appreaciated

    Reply
  42. Nijk
    January 28, 2013

    Brilliant, thanks for sharing this :)

    Reply
  43. Justin Parra
    January 28, 2013

    Hey thanks for posting this. This will save a lot of time building comps!

    Reply
  44. Noman
    January 30, 2013

    Great stuff man, exactly what I was looking for!
    Can you also share font used in this PSD. Helvetica Font Family, please?

    Thanks.

    Reply
  45. tim iversen
    February 1, 2013

    Guys like you make it so much easier for guys like me.

    Thank you, sincerely

    Reply
  46. Wolle
    February 1, 2013

    Awesome!

    Reply
  47. Hugo Mastromauro
    February 7, 2013

    Very cool, I like everything that has to do with the Twitter Bootstrap, use a lot in my work.

    Reply
  48. Junaid Atari
    February 11, 2013

    You saved my life. I love You Man.

    Reply
  49. get a free ipad
    February 12, 2013

    Amazing web pages…

    the time to check out or see the subject matter or websites we have now related to underneath the…

  50. best led tvs
    February 12, 2013

    Awesome online websites…

    we came across a wonderful internet site you could get pleasure from. Consider a glance if you need…

  51. penis advantage scam
    February 12, 2013

    Impressive site…

    The facts talked about within the publish undoubtedly are a very few of the highly finest available…

  52. high quality backlinks
    February 12, 2013

    Impressive site…

    The facts talked about within the publish undoubtedly are a very few of the highly finest available…

  53. xbox giveaway
    February 12, 2013

    Gems in the online world…

    highly few web sites that happen for being in depth below, from our viewpoint are undoubtedly properly well worth checking out…

  54. portable dvd player for kids
    February 12, 2013

    Customer recommendations…

    among our site visitors fairly recently suggested the subsequent web-site…

  55. mike geary truth about abs
    February 12, 2013

    Blogs ou should really be reading…

    Right here may be a exciting Blog You may Obtain valuable that we Motivate You to look at…

  56. Pool Service
    February 12, 2013

    give you the flexibility to run a…

    very powerful blog. the point i’m trying to make is there is a large market for premium additions, and enhancements.5. ease of installation – it use to be said blogger was better for beginners because of their ease of installation. a…

  57. truth about six pack abs
    February 12, 2013

    Cambridgeshire wedding ceremony photographer…

    an example of our readers a short despite the fact that ago preferred the subsequent websites…

  58. penisadvantage
    February 12, 2013

    Blogs ou ought to be studying…

    Below really is a Excellent Blog site You may perhaps Acquire Interesting that we Motivate You…

  59. does penis advantage work
    February 12, 2013

    Examine was captivating, continue to be in contact…

    you should head over to the online sites we carry out, like this a person, given it signifies our picks in the web…

  60. Antonio Lafrance
    February 13, 2013

    Check this out…

    that’s the finish of the report. Here you’ll unearth some websites that we suppose you are going to enjoy, just click the one way links more than…

  61. Kristine Iams
    February 13, 2013

    Salvador Cochrum…

    we came throughout a cool online site which you will just take enjoyment in. Acquire a look for once you want…

  62. David Rousseau
    March 16, 2013

    WOW, thank you so much for this PSD, works like a charm and SO USEFUL!

    Reply
  63. How Do I Get Twitter Followers
    March 26, 2013

    Perfect tool as well as the blog, actually I was starting using similar to that tool for the future plan. Right now I have seating up an online business, my first internet business fully targeted on social websites and apparently focusing on twitter as we’ve know that twitter is most popular for online business and best social networking site.

    Reply
  64. Elise
    April 11, 2013

    Hi Ben,

    I see you’ve already read this type of message, but I just wanted to add to the pile – thanks for your effort!

    I’m doing the design for an accounting app at the moment that will really benefit from this template – so this is much appreciated kind sir!

    Cheers again
    Elise

    Reply
  65. santosa suryadi
    May 4, 2013

    Hi,
    this probably means nothing to you since ton of people already said it, but i just want to say it properly to you : thank you very much for your hard work. your resource is pretty useful for me and ton of people out there.

    Reply
  66. Aarti
    May 8, 2013

    gr8 help…thanks for uploading this. Thanks a tonnns :)

    Reply
  67. Timofey
    May 29, 2013

    Hi Ben, thanks for the contribution!

    Can you state the licensing on this? Creative Commons Attribution 3.0?

    Thanks!

    Reply
  68. Rajesh
    June 12, 2013

    Ben… tons of thatx to you for such a time saver tool you’ve shared.. Now I’ll spend more time with some thing else just beco’z of you..

    -Rajesh

    Reply
  69. anouar
    August 19, 2013

    Thanks from Algeria

    Reply
  70. Smithe274
    April 4, 2014

    mometasone spray over counter fbbegdggek

    Reply
  71. Pharmg548
    April 5, 2014

    Very nice site! cheap goods

    Reply

Leave a Reply

Spam protection by WP Captcha-Free