lundi 26 octobre 2009

Aménager son nid (arrière plan Twitter) / Tune your nest (Twitter background)

Après avoir lu l'article de Smashing Magazine "effective twitter background" relayé par Cédric Kray.
J'ai voulu vérifier les espacements qui étaient donnés et surtout me faire un pochoir pour voir à l'avance l'effet donné.



 (le modèle)

Comme ça a marché plutôt bien je me suis dit que j'allais le partager, si ça peut en aider d'autres à personnaliser leur page.
Il suffit de cliquer sur l'image ci-dessus pour avoir un modèle (.png), copiez le et vous n'aurez plus qu'à travailler en fonction de celui-ci :)



 (exemple avec 1440 de large)


Pour le choix du format png : c'est simplement car tout le monde n'a pas Photoshop, mais aussi que c'est plus simple à mettre ici pour moi, et pour vous à enregistrer.
Il intègre la transparence, et différentes nuances de gris afin de pouvoir modifier certaines zones en deux clics.

Je vous conseil de lire l'article de Smashing Magazine si ce n'est pas déjà fait. Vous verrez que la marge disponible à prendre en compte pour l'affichage de votre fond varie selon la résolution d'écran de chacun (et donc anticiper cela). En plus de voir de chouettes exemples.

Pourquoi est-ce que j’aurai pu ne pas faire ce post :
  • Avec les programmes basés sur l’API on ne va pas souvent voir les profils des gens
  • Il existe des bases de donné de « background » pour twitter
  • J’imaginais que d’autres sortes de tutoriaux dans la même idée existaient.
Pourquoi je le fais :
  • C’est quand même mieux quand on fait les choses soi-même
  • Pour ceux qui voudraient créer un fond optimisé jusque dans les petits détails d’espacements entre les blocs de l’interface…sans trop de difficultés.
  • Avoir une prévisualisation de ce que donnera l’image (pensez à régler la largeur)
  • Et finalement parce que j’ai trouvé ça pratique, et que ça pourrait en aider d’autres.
  • De plus, dans les tutoriaux trouvés par la suite, le logo, la barre du haut, et celle du bas n'étaient pas prises en compte.



"Tune your nest" (Twitter background)


A .png (with transparency) to help making simply a background that fit exactly with the interface.


Why I may not did this post:

  • With different programs based on the twitter API we rarely look at profile pages
  • Some background database already exist
  • Perhaps there is other tutorial on the net about this.

Why I do that:

  • It’s always grateful to do something by our own hands
  • For those who want to deeply personalize the background (details of spacing in the interface, precise alignment with the frame)
  • To have a preview, faster than by the site's setting, without any upload. (Just don't forget to set the screen wide)
  • Because I don’t found theses information when I was looking for.
  • Finally because this little thing was useful for me and maybe that could help others people.
  • Moreover, in existing tutorials I found after, the upper and lower bars weren't included.


Liens externes à voir sur le sujet :
Smashing Magazine : effective twitter backgrounds examples and best practices
Spoongraphics : tutorials_twitter background design how to
Fuel your creativity : twitter-background-template


Du coup je pense qu'il faudrait que je revoie encore un peu mon fond Twitter (à l'origine je voulais faire un fond qui fusionne vraiment avec l'interface et les barres), puis restera encore ensuite à mettre les mains dans le camboui pour mieux personnaliser ce blog ^^'

Si vous avez trouvé cela utile, ou bien une remarque, une question ou un truc qui vous passe par la tête...hésitez pas à me dire ce que vous en pensez !
(même si j'ai pas encore trouvé comment refaire la zone des commentaires)

Aucun commentaire:

Enregistrer un commentaire