As Twitter enters the mainstream and gets more popular by the day its important as web designers to have a solid identity that reflects our business. There are many tools that can easy this for non-techie users. We can’t afford not to have a creative and detail oriented twitter background.
While I work on any client’s project I always try to keep it simple in their behalf, and after some repetition I’ve summarized the development on 5 basic steps that I always keep in consideration when I’m creating twitter backgrounds.
- Canvas
- Margins
- Theme
- Resources
- Colors
Lets get into more detail and break each item and give it a little more sense.
- Canvas, the potential real state of the image is really limited and on a screen display of 1024 by 768 pixels there is only a 32% optimization. Be smart when sizing and placing your elements.
- Margins, the easiest way to know exactly how to position your elements is to create exact margins. The simplest way to do it is to create 5 virtual margins. 3 of them are vertical and need to be placed at 127px, 892px and 1017px. The last 2 remaining are horizontal and need to go at 65px and 555px.
- Theme, every time I work on a client’s project I make sure I get them to fill up the same questionnaire that I use for designing and developing websites, its never to much to try to understand your client’s vision as much as you can to deliver great results.
- Resources, after understanding what you or your client needs are, an important part of the task is to gather all the resources and have them ready for the art-work process, this will help you organize better and avoid trying to figure what to use next, either way for the limited amount of potential real state, don’t get frustrated if there is a good amount of elements that were not used in the process.
- Colors, twitter provide with a design customization tool where you have 5 elements to create harmony in the theme altogether: you can find it by selecting the following path Settings » Design » Change design colors. This is also a deal breaker, you can fuse image and twitter colors as one, make sure you mention this to you client if the amount of resources is large and merit to call it ahead.
I use neutral design colors my self that allows me to use any custom background without breaking the harmony in the design as a whole. (background: D1D1D1, text: 333333, links: 336699, sidebar: D9D9D9, sidebar border: D1D1D1).
With this design map as blueprint I’ll be creating a series of Twitter Backgrounds giveaway. This is the first of this series. the season claim to do something cozy and special, so I gave a twist to the Holiday Gallery Ribbon from apple.
Install
- Download JPG
- Save Image: Right click » Save image as (save it anywhere convinient)
- Upload to Twitter: Settings » Design » Change background image » Browse (select saved image) » save changes.
Resources
- Inspiration apple ribbon Holiday List with a twist.
- BB_watercolor_CS1 (background strokes).
- Fonts: Honey Script and Imagine Font (I really like Imagine Font),
- Handycon icons.
- Coaster & cappuccino: (a personal touch to the equation).
I hope you give some use to this Twitter background on the remaining days of this holiday season. You should follow me on Twitter here. If you would like to experiment with art direction here in Popupon please go and check the About page here I’m loving it, I’m sure you’ll like it too.
Get Hector
28 Comments
https://twitter.com/sailtheworld
@sailtheworld Really nice background
This comment was originally posted on Pop Upon Magazine
No love for me @dalecruse
This comment was originally posted on Pop Upon Magazine
Insert "popularity contest" where it says "branding" and you have the message. Branding is corporate speak for b.s. image engineering – trying to appear as one thing, while actually being something far less. Why individuals would care about branding – playing stupid corporate PR games with their own identities – is beyond me. Check out all the corporate rape of the people, the land, and the nation, speeding us along to another Depression of class warfare, but hey, lets play their games anyway and see life through corporate-tinted glasses.
Destroy branding. Live life like human beings, not like corporate drones, playing their games 24/7 even when they see you as trash to be used and discarded.
This comment was originally posted on Pop Upon Magazine
http://twitter.com/pinkpetrol
I specialise in SharePoint which is what the picture if in the left hand corner!!!! :D
This comment was originally posted on Pop Upon Magazine
You forgot mine! http://twitter.com/youmadeaway/ :-D
This comment was originally posted on Pop Upon Magazine
http://twitter.com/frenden One of my favorites!
This comment was originally posted on Pop Upon Magazine
Thanks for adding me on the list
This comment was originally posted on Pop Upon Magazine
I branded 2 of mine as well
@DigitalSkraps and
@CoolTweets
This comment was originally posted on Pop Upon Magazine
Great post!
"Inspiration are for everyone" :-)
Don’t forget to check out my own twitter design: http://www.twitter.com/presetsheaven
Cheers!
Pierre
This comment was originally posted on Pop Upon Magazine
Interesting collection
This comment was originally posted on Pop Upon Magazine
I recently came across a great one at http://twitter.com/paulsenmrktng. These are all great!
This comment was originally posted on Pop Upon Magazine
I think lots of people didn’t make the list ;-)
lots of people have a very nice background that blends with their persona online or offline.
Well if you miss someone, why not make a overview yourself? :-)
@MikevHoenselaar
This comment was originally posted on Pop Upon Magazine
How is it that @vpieters didn’t make the list?
This comment was originally posted on Pop Upon Magazine
Hi,
nice post, but you’ve missed our twitter :D
http://twitter.com/koikoikoi_com
;)
Bye!
This comment was originally posted on Pop Upon Magazine
It’s cool, keep it up Hector.
This comment was originally posted on Pop Upon Magazine
This is an interesting post–thanks, and I love your blog background. digging it.
This comment was originally posted on Pop Upon Magazine
@Wayne, that is the whole idea, making the most of a single feature like customizing profile backgrounds
@faruksal, you are welcome!
@pierre, you were in my original list, however your site’s design did change and the Twitter’s didn’t, but very good job, cool and original background!
@Navdeep, you guys have shared inspiration, Great Job! and you are welcome.
@Not Buying It, I feel good about evangelizing web design in viral environments and I feel even greater each time I brand my says, Cheers!
This comment was originally posted on Pop Upon Magazine
these are awesome… thanks for the great find!
This comment was originally posted on Pop Upon Magazine
http://www.tortedecorate.com/home.php
This footer is simpler but may look interesting too… ;)
This comment was originally posted on Pop Upon Magazine
@lam, 2008 has been one good year for Footers when comes to styling interfaces, I’ll be on the watch to see what 2009 brings.
This comment was originally posted on Pop Upon Magazine
All well.Thanks:))
This comment was originally posted on Pop Upon Magazine
There’s a lot to be said about linking your various social profiles to your website or blog. You’re making more than a visual connection, you’re also extending and reinforcing your brand. Thanks to Hector, I get a showing, too!
This comment was originally posted on Pop Upon Magazine
I think i actually invented the idea. i had a twitter background for like, years. :)
This comment was originally posted on Pop Upon Magazine
Great post about twitter background design. Take a look at download page, Hector, there's no file here :D
Lam, thanks for pointing that out, just updated the link.
[twitter] 5 Steps to Create Better Twitter Backgrounds | popupon http://bit.ly/54v2Zp
This comment was originally posted on Twitter
RT @mossiwo 5 Steps to Create Better Twitter Backgrounds http://bit.ly/70Fu0L
This comment was originally posted on Twitter
A test comment also from http://popupon.com via facebook connect