A Smarter Twitter Page in Under 15 Minutes
basixvideos

A Smarter Twitter Page in Under 15 Minutes

on Oct 18th 2011 with 51 comments
Tutorial Details
  • Difficulty: Basix
  • Topic: Twitter background design
  • Screencast duration: 18 mins

Final Product What You'll Be Creating

Download Source Files

Today we’ll design a smart, vintage modern background to welcome visitors to your Twitter page. We’ll go over some layout considerations, then dive into Photoshop. Have fifteen minutes spare? Let’s go then!

The Screencast

Yes, the video’s eighteen minutes long, but the time spent designing in Photoshop is much less..!

Alternatively Download the video, or subscribe to the Webdesigntuts+ YouTube channel!

Additional Resources

It’s worth mentioning a couple of resources used when making this Twitter background:

Adi Purdila is AdiPurdila on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.jasonandreoni.com Jason Andreoni

    Can’t get to the resource files. Access Denied. Looking forward to checking this out, though. I’ve been doing custom Twitter backgrounds for a while, and am interested in seeing your process!

    –Jason

  • http://rommelcastro.me Rommel Castro A.

    nice design!!!

  • http://rafi.pl RAFi

    Cool. But download doesn’t work: access denied.

  • http://www.snaptin.com Ian Yates

    @Jason, @RAFi – my fault, try again :)

    • http://rafi.pl RAFi

      Thank you Ian, now works!

    • http://www.jasonandreoni.com Jason Andreoni

      Excellent, thanks Ian!

  • http://visionblast.blogspot.com/ Ivan VisionBlast

    nice, download is ok…..:D

  • Pingback: A Smarter Twitter Page in Under 15 Minutes | Shadowtek | Hosting and Design Solutions

  • http://www.gorna.bg MeKeTa

    Cool, thank you for sharing this man. Good luck!

  • http://www.picasevengroup.com Jose D.

    This is awesome. I been looking for something like this to design my twitter page. Mark it off my to-do list!

  • Mark

    Great video. I was wondering how do I turn that autoguide which appear whenever you move any layer or element, is that some PS plugin or some option I never knew about?

    • http://twitter.com/SethGooch Seth Gooch

      It’s a stock feature in Photoshop called Smart Guides….just go to View > Show > and click Smart Guides

    • http://www.adipurdila.com AdiPurdila
      Author

      They’re called Smart Guides.

      View > Show > Smart Guides ;)

  • supprof1

    none can do better than you adi Paurdila.
    great job. thank you very mutch
    hopefully we will se you in an other tutorial
    a specially transforming one of your html/css theme to a wordpress theme
    thank you very mutch adi paurdila
    keep going and doing this!! amazing!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • supprof1

    adi paurdila there is something suspicious with your voice. your voice sounds like somone that i know. of cause jeffry way.
    thank you adi paurdilla

  • supprof1

    there will be a second part yes. for this tutorial

    so what about psd to facebook page ?!!

    thank you very mutch

  • http://pacha.shimansky.ru/ Pavel

    Looks bad on 13″ screen. http://twitter.com/shimapa

  • http://www.youtube.com/user/izvarzone Some Guy

    You could create one pattern, convert jigsaw stripe to smart object, and then copy and rotate 180 degrees, instead of making two patterns.

    This is of course not very noticeable with small amount of copies, but it’s generally good practice to use Smart Objects for repeatable elements.

    • http://www.adipurdila.com AdiPurdila
      Author

      Good tip, thanks :)

  • panda

    NIce tut, but way too slow, got bored in first 3 minutes.

    • http://www.adipurdila.com AdiPurdila
      Author

      Would you prefer written tutorials in the future for quick tips? Or videos, but just more concise?

      I’ve used the first 5 minutes of the video for a bit of theory on the subject. Maybe that’s why you found it boring? Or was it my narration? :)

      • Ren

        In all seriousness, don’t write tutorials to appeal to the lowest common denominator. The tutorial was FINE. Panda just wasn’t interested in learning.

      • DJ

        @adi… since you showed the interest to ask you deserve a better answer than Ren’s platitude. The tutorial did move needlessly slow – I’m sure you can see it yourself when you do what is known as an “air check.” (See what actually goes over the air.) That can be dramatically improved by doing a “run-through” or two before hitting record (the pro’s do it religiously, why shouldn’t you?)

        No, a written tut would NOT have been better for this type of tut. It would not only be overly burdensome to even write for you; but, can never, ever be as understandable to a pupil as seeing it done. Again, I’m sure this also makes sense to you.

        And, lastly, no it wasn’t merely due to having theory (if that was what you were calling the first several minutes). To understand concepts one must have a “knowledge base” to hang the new concepts on. Design with the end in mind is crucial; so, seeing the product, understanding why and what and being given a “road map” is critical. Listen to your “air check,” what did you actually say? Do you agree that it rambled… a lot?

        In the entertainment industry we rely on “air checks” almost like food. They are critical. And to prevent the problems you are seeing, it is important to at least work from notes (ie think and plan it out before-hand) and to practice before-hand. It’s pretty much only those poor videocasters who forget this step and think they can “wing it” (or are too lazy to do otherwise) who ramble and spend too much time saying little. [Either that or spend a much more critical eye editing during post.]

        Personally, I agree with Panda (although my interest in the subject prevented me from sleeping). However, do an “air check” and see what YOU think – that’s just as important, and will do a heck of a lot more to motivate change (improvement). [Do you ever get any feedback help from Envato "editors"?]

        And, ps, not sure how you can call this length of tutorial a “quick tip” – it’s not quick or merely a “tip.” It may be shorter, to you, than others you do; but, it’s a full fledged tutorial – “youse godda problem wi dat?”

  • http://designmodo.com Adrian

    WOW! Just look at the video! Wonderful stuff! It really taught me how to prepare the twitter page in such a short time. It is so helpful that I will tell everyone who tweets to have a look at it. Fantastic effort! Simply the best in business! Thanks!

    • http://www.adipurdila.com AdiPurdila
      Author

      Heeeey, we have the same name :) Glad you liked the tutorial!

  • Mark

    Hi Adi
    Wonderful stuff as always
    try this
    Make your Twitter profile sidebar transparent
    you can make your design better by concentrating more on the right side.
    just a thourght

    http://www.justinparks.com/twitter-profile-sidebar-transparent/

    • http://www.adipurdila.com AdiPurdila
      Author

      Nice one, thanks :)

  • http://www.albertospotting.org Alberto Restifo

    This is what I call an awesome idea!!!

    Very good job and inspiration on it!

    Thanks Adi!

  • Pingback: Land-of-web » Weekly Fresh Web Design Freebies – Vol. 13 (10-19-2011)

  • Pingback: Бесплатные веб компоненты — выпуск 9 | webkladez - Полезные уроки для photoshop, wordpress, joomla

  • http://www.drivvedwebbyra.se Webbyrå

    Thx for the file! I have downloaded it and im now playing a little with it. ITS GREAT!

  • http://nuvomedia.dk Nicolai Busekist Ohlsen

    Are people actually still caring about their Twitter-background. I’ve experienced that most Twitter-users are using third party applications where they wont see your Twitter-background.

    But anyways, great tutorial Adi.

  • http://www.pixelbrands.com Thien

    Great tutorial and thanks for the files! Just wondering what toolbar you’re using?

    Cheers!

  • http://twitter.com/danielwinnard Daniel Winnard

    What size screen is this layout for? As the sizes are wrong on my screen similar to @Pavel.

    I have a resource PSD file that is a better template to work from than this. The design is nice but I just don’t think the sizes are correct.

    • http://www.adipurdila.com AdiPurdila
      Author

      This is made for 1440×900.

  • http://incisivepoint.com Jack

    What a nice design, I will try for my Twitter Page.

    Thanks man!

  • Anders Åberg

    Never, ever use w3schools for anything then silly jokes. http://w3fools.com/ should explain why…

    • http://www.snaptin.com Ian Yates

      Nice link :)

    • Adrian Oprea

      Yes, you are absolutely right about w3fools.com ! W3Schools have many, oooohhh so many contradictions in their content, their so-called “exercises” and “examples” simply suck, if you’ll pardon my french ! There are a lot of great resources on the web regarding development, starting with Nettuts+ itself !

  • http://www.dzinepress.com Dzinepress

    let it follow and create something more special. thanks for your helping techniques

  • http://www.squidoo.com/shranjevanje-popkovnicne-krvi Matične celice

    Nice tutorial and template too. Nice, clean and fast. Thank your for your advices!

    Thumbs up!

  • Pingback: Best of Tuts+ in October | Wptuts+

  • Pingback: Best of Tuts+ in October

  • Pingback: Best of Tuts+ in October | linuxin.ro

  • Pingback: Best of Tuts+ in October | clickshots

  • Pingback: Best of Tuts+ in October « Fast Ninja Blog by Freelanceful – Web Design | Coding | Freelancing

  • Pingback: Best of Tuts+ in October | Inspirations, dreams, humaniora

  • Pingback: Best of Tuts+ in October | Shadowtek | Hosting and Design Solutions

  • Pingback: Pinoy Templates » A Smarter Twitter Page in Under 15 Minutes

  • Ivan Škoro

    Hi,

    Could you please tell me how do you get everything lined up perfectly?
    I’m referring to those purple lines you get when you move layers around.
    How to get them? I’m using PS CS5 on Win7.

    Great tutorial by the way!

    Thanks,

    Ivan

  • http://www.iamronan.com Iamronan

    Love it…just what I was looking for.

  • Chris Raymond

    So once one has modified colors, etc to fit one’s preferences, do we then export the entire screen as our Twitter background? Or just the left sidebar, and then in Twitter dashboard, change the background color of the right side to match our color scheme?

  • Chris M.

    Adi does it once again! Great content, and very insightful usage of tools and techniques. Looking forward to more!

    I love how the keyboard shortcuts appear on screen. What are you using for that? Nice touch…

  • Pingback: A Smarter Twitter Page in Under 15 Minutes, Video

  • Pingback: A Smarter Twitter Page in Under 15 Minutes, Video « Fast Ninja Blog by Freelanceful – Web Design | Coding | Freelancing

  • stefan

    nice style… very clean und simple.
    really like it.

    but that way to style my twitter page doesn’t make sense for me, because the background image will be repeated on larger screen… :(

  • Pingback: A Smarter Twitter Page in Under 15 Minutes, Video | Ricky Noel Diancin Jr. Webmaster | Web Designer | Wordpress Expert

  • Pingback: A Smarter Twitter Page in Under 15 Minutes, Video | Freelancing Help

  • Adrian Oprea

    Bravo, Adi!

    Mi se pare grozav ca in sfarsit si romanii fac tutoriale si mai ales, faptul ca fac tutoriale bune ! Ti-as recomanda sa faci niste tutoriale si in limba romana pentru ca multa lume cauta astfel de tutoriale si gaseste numai junk-uri ! Per-ansamblu, reteaua tuts+ mi se pare de departe cel mai viabil mod de a-ti dezvolta si imbunatati aptitudinile de web designer! Ai nota 10 de la mine, pentru tutorial!

    Succes!

    For the English-speaking public, I want to say that I haven’t cursed in any way and that I just wanted to congratulate Adi for his good work, in our own native language. I also added that I think tuts+ network is, by far, the most reliable resource when it comes to developing and improving your web design skills. A+ for the tut!

    Good luck!

  • http://nornstein.com nuchem

    great video
    do you have the same thing on youtube?

  • http://virtualreallity.blogspot.com/ Khan

    Really nice tutorial.

  • http://www.creativegang.net Dipender Singh

    Super cool stuff Adi :) loved it

  • http://chadritchie.net Chad Ritchie

    When you measured the Twitter content area and sidebar to determine the widths, what tool were you using? Nice tutorial, thanks!

  • SHAHJEHAN

    GOOD,
    It is better if you tell that which type of fonts you to make a ,logom,
    thanks for sharing

  • http://www.nabex.fr rom

    thanks very nice tuts!
    now with the new twitter header other possibilities can be imagined