A Smarter Twitter Page in Under 15 Minutes
Tutorial Details
- Difficulty: Basix
- Topic: Twitter background design
- Screencast duration: 18 mins
Final Product What You'll Be Creating
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..!
Additional Resources
It’s worth mentioning a couple of resources used when making this Twitter background:
- Grunge brush set: by Sonic Gal on deviantART
- Browser display statistics: on W3Schools
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Adi Purdila
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.
Sign up now!
Freelance Jobs
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Webdesigntuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
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
nice design!!!
Cool. But download doesn’t work: access denied.
@Jason, @RAFi – my fault, try again :)
Thank you Ian, now works!
Excellent, thanks Ian!
nice, download is ok…..:D
Cool, thank you for sharing this man. Good luck!
This is awesome. I been looking for something like this to design my twitter page. Mark it off my to-do list!
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?
It’s a stock feature in Photoshop called Smart Guides….just go to View > Show > and click Smart Guides
They’re called Smart Guides.
View > Show > Smart Guides ;)
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!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
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
there will be a second part yes. for this tutorial
so what about psd to facebook page ?!!
thank you very mutch
Looks bad on 13″ screen. http://twitter.com/shimapa
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.
Good tip, thanks :)
NIce tut, but way too slow, got bored in first 3 minutes.
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? :)
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.
@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?”
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!
Heeeey, we have the same name :) Glad you liked the tutorial!
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/
Nice one, thanks :)
This is what I call an awesome idea!!!
Very good job and inspiration on it!
Thanks Adi!
Thx for the file! I have downloaded it and im now playing a little with it. ITS GREAT!
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.
Great tutorial and thanks for the files! Just wondering what toolbar you’re using?
Cheers!
That’s the Web Developer Toolbar for Firefox: https://addons.mozilla.org/en-US/firefox/addon/web-developer/
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.
This is made for 1440×900.
What a nice design, I will try for my Twitter Page.
Thanks man!
Never, ever use w3schools for anything then silly jokes. http://w3fools.com/ should explain why…
Nice link :)
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 !
let it follow and create something more special. thanks for your helping techniques
Nice tutorial and template too. Nice, clean and fast. Thank your for your advices!
Thumbs up!
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
Love it…just what I was looking for.
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?
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…
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… :(
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!
great video
do you have the same thing on youtube?
Really nice tutorial.
Super cool stuff Adi :) loved it