Tutoriel : les dimensions pour personnaliser le nouveau profil Twitter

Twitter a mis à jour hier ses profils, permettant désormais d’afficher une bannière dans le header, à l’image de Facebook. Ce header est visible sur chaque profil, sur web et mobile. Pour un affichage optimal, il est nécessaire de bien dimensionner son image. Nous avons préparé un petit schéma avec les principales données à connaitre :

  • Dimensions header : 1252×626 pixels (ratio à respecter si taille différente)
  • Dimensions avatar : 128×128 pixels
  • Espace droite et gauche avatar : 562 pixels
  • Espace supérieur avatar : 20 pixels
  • Espèce inférieur avatar : 478 pixels

A noter qu’il est possible d’intégrer son avatar au sein de son header, comme l’avaient fait de nombreux utilisateurs pour la cover photo Facebook. Pour se faire, vous pouvez bien sur vous fier aux dimensions ci-dessus ou utiliser un template Photoshop. Un tutoriel vidéo a été posté par le site Mashable pour connaitre la marche à suivre :

Commentaires

  1. Hasty Neephern
    4 octobre 2012 - 1h31

    Bonsoir et merci pour ce tutoriel mais en fin de compte il n’est pas nécéssaire de se prendre la tête avec Photoshop.

    Il suffit de mettre une image de 520px par 260px en image d’entête et « Bien que j’ai changé mon avatar » celui d’avant sans modification rentrait parfaitement.

    Après oui si on veux le millimètre près entre le header et l’avatar c’est sûr que le psd fournit est plutôt utile.

    Enfin bon, merci quand même j’aurais enfin pu mettre l’affichage de mon profil comme je le souhaitais.

    Cordialement
    Hasty Neephern (@hastynee)

  2. Fred
    28 décembre 2012 - 18h29

    En tout cas, l’espace au-dessus de l’avatar est bien supérieur à 20 px. Ça m’a fait perdre pas mal de temps.
    Un bon template Photoshop qui a l’air exact : https://www.dropbox.com/s/i66tlc3n117460v/twitter-header-photo-template-v1.psd

Laisser un commentaire

Il est possible d’utiliser ces balises HTML :
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Ce blog supporte le système Gravatar, pour obtenir le vôtre, inscrivez-vous sur Gravatar