Menu Search
Jump to the content X X

Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now →

Freebie: Twitter GUI PSD

Updating your Twitter profile can give you really unnecessary headaches. In today’s post, we proudly present to you a Twitter UI GUI template, designed by Shelby White1 which has exclusively been released for Smashing Magazine and its readers. As usual, the theme is absolutely free to use in private and commerical projects.


Download the Template for Free! Link

The template is released as freeware. 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 template as you wish.


Behind the Design Link

As always, here are some insights from the designer:

“Time after time I dealt with the headache of updating my Twitter profiles. After searching thoroughly for an alternative to editing live, it was clear that there weren’t any great solutions or intentions by anyone to create a pixel-perfect template for anyone to use. Not to mention, a template that would remain up-to-date as the website evolved.

This PSD includes grouped elements by name respective of their location in the HTML of The profile images utilize smart objects to ease the pain of changing images. Update the image once and it will proportionally scale the images across the whole PSD. Hope this template makes mocking up your profile a lot easier. Enjoy!”

Thank you, Shelby White. We appreciate your work and your good intentions.

(il) (vf)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7

↑ Back to top Tweet itShare on Facebook


The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1

    Emiel Kwakkel

    October 12, 2011 4:43 am

    Thanks, that will come in use! Nicely structured too.

  2. 2

    Must have. Thank you.

  3. 3

    Thank you Shelby and @smashingmag. I’ve been looking for this for a while now!

  4. 4

    It’s a good one. Thanks Shelby.

  5. 5


  6. 6

    What’s up with dimensions, margins, etc? Check with screen shot of original twitter profile page.

  7. 7

    Martin Alejandro

    October 12, 2011 7:33 am

    Great work. Thank you for sharing.

  8. 8

    David Stephenson

    October 12, 2011 7:54 am

    Well cool, thanks bud.

  9. 9

    I don’t get it…what is this for? You talk about the “headache of updating my Twitter profiles”, what’s a Photoshop file got to do with that?

    Also, WTF is a “UI GUI”? User Interface Graphical User Inferface? Huh?

    • 10

      Yep, and who needs this when we can use this code:

      javascript:document.body.contentEditable=’true’; document.designMode=’on’; void 0

      and change everything on the website.

    • 11

      Please do your homework first before posting silly questions like this.

      • 12

        @Dexter : I think it would have been a wise idea to explain the purpose of something like this within the article. Calling someone’s question ‘silly’ is arrogant and uncalled for.

        Last I checked, there were no rules against questions here. I see them asked all the time.

  10. 13

    Mitch McDeere

    October 12, 2011 1:29 pm

    Hey, what’s Shelby’s home address? I’ll need it for the process serving, once it turns out that said designer had no authority to license twitter’s logo for “free and without any restrictions”.

    Also, on a completely unrelated note, I have a whole mess of Twitter coffee cups for sale.

  11. 14

    Josh McDonald

    October 12, 2011 5:35 pm

    @Mitch, according to Twitter’s guidelines, this is perfectly fine usage. Read more here:

  12. 15

    Doesn’t include the transparency of the sidebar. Do we know what transparency Twitter uses?

  13. 16

    Geoffrey Gordon

    October 13, 2011 12:55 am

    Brilliant Shelby White

    It would be nice if there was a fireworks version, can it be exported and converted?

  14. 17

    thanks shelby!! and thanks sm, like always :)

  15. 18

    Could somebody, please, explain how this template works? Is this a background for twitter?

  16. 19

    I was literally searching for one of these 2 days ago, how typical!

  17. 20

    Abhimanyu Rana

    October 13, 2011 8:34 pm

    thanx for sharing

  18. 21

    It’s nice..

  19. 22

    Jenna Jeng James

    October 21, 2011 6:19 am

    What a confusing post.

    “Updating your Twitter profile can give you really unnecessary headaches. ”

    Huh? And how does this helps? Please enlighten me since I’m sure the psd will come in handy to many people, but the opening line (and the whole post) is as lucid and coherent as a blogspam post in a blog catered to google adsense.

  20. 23

    Thanks! Much appreciated :)


↑ Back to top