32
La totale pour créer un background pour son compte Twitter en utilisant Photoshop
Retrouvez dans ce tutoriel Photoshop et Illustrator toutes les informations relatives à la création de wallpapers pour Twitter. Ce tutoriel se compose de trois parties, une sélection de tutoriaux Photoshop, puis un tutoriel pour créer son propre wallpaper pour twitter et enfin une sélection de backgrounds vraiment incroyables diffusés sur Twitter.
Aujourd’hui nous allons nous intéresser à la création d’un background pour son compte Twitter. En quelques mois Twitter est devenu l’un des services de micro blogging les plus populaires et les plus utilisés sur internet. Il permet de publier de courts messages qui seront distribués à la totalité des personnes abonnées à son compte. Ces personnes appelées Followers reçoivent les messages ainsi publiés et suivent ainsi l’actualité de certains sites et aussi de certaines personnalités.
Un point très intéressant sur Twitter, c’est la possibilité de personnaliser l’affichage de son compte pour le public donnant ainsi un impact plus important à ses tweets. Il est ainsi possible de modifier les styles généraux de la page : Liens, textes, couleurs de fond etc. Il est également possible de modifier le fond de la page en affichant une image, et c’est à cette option que nous allons nous intéresser aujourd’hui !
Ces images affichées en fond sont créées de deux manières, soit il s’agit d’un motif qui se répète sur la page, soit il s’agit d’une très grande image affichée une seule fois. Dans ce tutoriel nous utiliserons la seconde méthode, à savoir la création d’une très grande image.
Sur cette image, maintenant il y a possibilité évidemment d’appliquer un tas d’effets graphiques mais également d’ajouter des informations comme l’adresse de son site Internet, son email, ses infos sociales etc.
Ce tutoriel se compose de quatre parties, la première pour découvrir quelques sites vous permettant de télécharger des backgrounds, la seconde pour vous permettre de télécharger des ressources pour vous aider à créer votre background, la troisième sera un tutoriel en 10 étapes pour créer un background à la sauce WonkaStudio et enfin la dernière partie sera consacrée à l’inspiration, je vous proposerai une sélection de 10 très beaux backgrounds pour votre compte Twitter.
Les Meilleurs Sites Pour Télécharger Des Background Pour Twitter
Voici une petite sélection de sites Internet pour télécharger des backgrounds Twitter déjà tout faits et prêt à l’emploi. Téléchargez votre image puis appliquez-la sur votre compte Twitter en vous rendant dans la page de modification des styles.
Ressources Pour Créer Votre Background Twitter
Pour vous aider à créer votre background Twitter vous avez la possibilité de télécharger des ressources comme des templates ou encore des tutoriaux pour apprendre à créer des effets graphiques.
Création d’un background Twitter (tutoriel en anglais) http://www.blog.spoongraphics.co.uk/tutorials/twitter-background-design-how-to-and-best-practices
Les autres articles publiés sur wks.fr concernant Twitter : http://www.wks.fr/Saga-Twitter-3-Creer-une-icone.html / http://www.wks.fr/Saga-Twitter-2-Creer-une-affiche.html / http://www.wks.fr/Saga-twitter-1-100-icones-d.html
Comment générer du trafic grâce à son compte Twitter http://www.paperblog.fr/2260368/creer-du-trafic-sur-son-site-grace-a-twitter-et-un-jeu-concours/
Un template .PSD pour vous aider à créer votre background http://www.fuelyourcreativity.com/free-psd-twitter-background-template/ autre lien pour télécharger un template : http://www.supersatellite.com/2008/12/07/twitter-background-templates/
Un article très intéressant sur l’inspiration et la création de backgrounds Twitter (en anglais) http://mashable.com/2009/05/23/twitter-backgrounds/
Un site qui calcul en permanence le nombre de tweets lancés sur le réseau depuis sa création, ce compte à passé récemment le cap des 10 milliards ! http://popacular.com/gigatweet/
Application pour créer son background directement en ligne http://freetwitterdesigner.com/
Fichier .PSD pour créer facilement votre background en partant d’un template : http://pelfusion.com/freebies/free-twitter-background-templates-with-psd-files/
Créer Son Background Twitter A La Sauce WonkaStudio
Etape 1 Ouvrir le fichier dans Photoshop
Pour commencer le background, vous n’allez pas travailler sur un fichier vierge, mais à partir d’un fichier template présent dans le fichier zip attaché à ce tutoriel (lien de téléchargement en bas de la page). Lorsque vous ouvrez le fichier tuto_574_psd.psd dans Photoshop vous pouvez remarquer qu’il y a trois calques, ceux-ci reproduisent fidèlement l’interface de Twitter. Tout ce qui est caché par ce bloc blanc ne sera pas visible sur votre compte Twitter.
Etape 2 Créer le background
Vous avez déjà un calque « Background » présent dans la fenêtre des calques, double cliquez dessus pour afficher les styles de calques (ou allez dans le menu Calque> Style de calque> Incrustation de dégradé). Puis configurez un dégradé linéaire de bleu foncé #0064b1 position 20% vers bleu clair #49a9dc position 80%.Etape 3 Ajouter des taches 1/2
Vous allez utiliser dans ce tutoriel un fichier vectoriel que j’ai téléchargé gratuitement sur ce site : http://coolvectors.com/free-vector/vector-abstract-design.html Téléchargez-le puis ouvrez-le dans Illustrator (si vous ne possédez par Illustrator une version Photoshop est disponible dans le fichier zip de ce tutoriel).Ensuite sélectionnez la tache bleue présente derrière les éléments, puis faites Ctrl/Cmd + C pour la copier. Revenez sur votre image dans Photoshop puis faites Ctrl/Cmd + V pour coller la tache bleue sur votre image (un nouveau calque est automatiquement créé, renommez-le « Tache 1 »).
Avant de terminer cette étape créez un dossier, nommez-le « Formes » et placez-y le calque « Tache 1 ». Puis vous allez changer la couleur de la tache en lui appliquant un style de calque. Allez dans le menu Calque> Style de calque> Incrustation de couleur et appliquez le bleu #0064b1.
Etape 4 Ajouter des taches 2/2
Cliquez avec le bouton droit de la souris sur le calque « Tache 1 » puis sélectionnez dupliquer le calque. Allez ensuite dans le menu Edition> Transformation> Symétrie axe vertical. Puis appuyez sur la touche V pour activer l’outil déplacement et placez la seconde tache sur la droite de votre image. Utilisez la même manipulation pour créer une troisième tache et placez-la en haut pour combler la partie haute de votre image.Etape 5 Ajouter des vagues
Retournez sur Illustrator puis déplacez quelques éléments pour découvrir les vagues bleues (se trouvant en arrière plan). Sélectionnez-en quelques unes puis copiez et collez-les sur votre image (dans Photoshop). Placez-les en haut à gauche.Utilisez la même technique pour en disposer sur toute la partie haute de votre image.
Etape 6 Ajouter des papillons
Allez à nouveau dans Illustrator puis copier / coller cette fois quelques papillons, disposez-les de façon aléatoire sur les côtés haut droit et haut gauche. Vous placerez tous les calques relatifs aux papillons dans un nouveau groupe que vous nommerez « Papillons ».Etape 7 Derniers éléments graphiques
Pour terminer avec les éléments graphiques créez un nouveau groupe et nommez-le « Ronds » puis dans Illustrator identifiez en bas à gauche les petits ronds bleus. Copiez-les puis collez-les dans votre image (Ctrl/Cmd + C pour copier et Ctrl/Cmd + V pour coller). Faites la même chose avec les ronds blancs. Disposez-les de façon aléatoire sur votre image. Enfin déplacez le groupe « Ronds » en dessous du groupe « Vagues ».Etape 8 Créer le bloc d’information
Créez encore un dossier (menu Calque> Nouveau> Groupe) nommez-le « Board » puis placez-le juste au dessus du groupe « Ronds ». Sélectionnez l’outil rectangle arrondi puis la barre d’option en haut de l’écran, modifiez le radius à 15px. Modifiez votre couleur d’avant plan par du bleu #0064b1 puis créez sur le côté gauche un rectangle arrondi bleu.Ajouter quelques styles : Allez dans le menu Calque> Style de calque> Contour, puis configurez comme suit : 4 pixels intérieurs et de couleur bleue #0064b1, puis cliquez sur incrustation de dégradé et appliquez un dégradé linéaire de Bleu clair #ade1fa position 100% vers bleu plus clair #d6effd position 0%.
Ajouter votre texte : Appuyez sur la touche T pour activer l’outil Texte puis tapez vos informations : Nom prénom, email, site internet etc. utilisez à nouveau le même bleu foncé #0064b1 (dans mon exemple j’ai utilisé la police Gill Sans MT).
Et pour terminer les informations vous pouvez également ajouter votre photo. J’ai détouré la photo avec un rectangle arrondi puis j’ai appliqué un contour de 4 pixels bleu #0064b1.
Enfin ultime étape avant de terminer ce tutoriel. Appuyez sur les touches Ctrl/Cmd + C pour redimensionner la taille de votre document. Puis modifiez la largeur par 2048 pixels. Ensuite cliquez sur le calque Background et allez dans le menu Edition> Remplir, pour étirer le background jusqu’au côté droit.
Etape 9 Enregistrez sous
Enregistrer le fichier Maintenant que le background est terminé, vous allez enregistrer votre fichier. Commencez par cacher les deux calques correspondant aux éléments Twitter (les deux calques du haut dans la fenêtre des calques) puis allez dans le menu Fichier> Enregistrez sous. Changez le nom puis sélectionnez l’extension .jpg. Enfin cliquez sur le bouton Enregistrer.
Appliquer le nouveau fond d’écran Connectez-vous à votre compte Twitter.
En haut à droite, cliquez sur Settings puis sur Design et enfin en bas sur Change background Image. Cliquez alors sur le bouton parcourir pour choisir votre image. Cliquez ensuite sur Change design color et cliquez sur background et modifiez le code couleur par #0064b1.
Voila c’est terminé, cliquez sur le bouton Valider pour appliquer les changements à votre compte Twitter.
Voir le compte twitter WonkaStudio
Background Twitter Inspiration
Et enfin pour terminer, voici une sélection de comptes Twitter dont le background est particulièrement bien travaillé. Peut être que cette sélection de backgrounds Twitter pourra vous donner de l’inspiration pour créer le votre
http://twitter.com/lisaworsham
http://twitter.com/pipitakitty
http://twitter.com/binojxavier
http://twitter.com/cameronolivier
http://twitter.com/geoffreydorne
http://twitter.com/Ramesstudios
Merci à tous d’avoir lu ce nouveau tutoriel sur wks.fr, si vous avez des questions, merci d’utiliser les commentaires ci-dessous. Et enfin si vous aimez ce site n’oubliez pas de vous inscrire à notre compte RSS et de nous suivre sur twitter 
Téléchargement des fichiers sources liés à ce tutorial
Veuillez vous connecter pour télécharger les fichiers sources
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 13 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
16 mars 2010 14:33, par Ben
Super, exactement ce dont j’avais besoin. Vraiment complet. Excellent travail, merci pour le partage. Et ce qui est super cool ? Je viens de réaliser que tout cet article est en français en arrivant en bas de la page ! La totale !!!
Répondre -
24 mars 2010 17:15, par lecairn
je crois que j’ai déjà télécharger votre tuto mais je ne le retrouve pas !!!Merci Vincent
Répondre -
2 avril 2010 03:24, par Alex
Bonjour,
Merci pour ce tuto. J’aimerais pouvoir rajouter des liens au sein de l’image pour que les informations renvoient directement vers leurs sites respectifs (Facebook/Flickr/YouTube).
J’ai créé des tranches pour chaque icône, mais lors de l’exportation, j’obtiens un fichier PNG pour chaque tranche...Existe-t-il un moyen de générer un seul et unique PNG/GIF incluant les liens de toutes les tranches ?
Merci
Répondre-
8 décembre 2010 17:17, par tyvaldo
Je pense que c’est impossible ... Il faudrait pouvoir modifier le background de twitter avec du HTML.
Répondre
-
-
5 avril 2010 12:01, par Adrien
Super tutorial et super ressources. Merci pour les petits conseils et le cours express
Je m’en vais de ce pas créer le mien ! Je reviendrais vous mettre le lien .RépondreL’offre de ce casino en ligne est la meilleure pour jouer au casino en ligne Blackjack et j’aime particulièrement tous les bruits pendant que le jeu se déroule. -
5 avril 2010 14:30, par maison ou bureau
Vraiment , tres bon , comme d’hab !
Pleins de ressources et de références pour ton article , de quoi approfondir de notre coté maintenant
Merci !
Répondre -
13 juillet 2010 15:23, par TwitterBackgrounds
Great roundup
Répondre Unfortunately we aren’t in it. But our website wasn’t online at that time, otherwise we might would have made it into your article
Really interesting article by the way. (I understand French better than I write, so I went for English). -
9 août 2010 21:42, par Slabre
Très beau tuto, mais tu centres le tout comment ?
Vu qu’on ne peut pas... ton fond n’est adapté qu’à ta résolution.
Répondre -
15 août 2010 15:03, par Alex
Super tuto mais existe il pour Facebook ?? Petite question mon gabarit lui n’est centré sur le titre Twitter une aide ??? Merki !
Répondre -
25 octobre 2010 14:38, par peche
Très bon cours, depuis le temps que je cherchais quelque chose d’original pour mon twitter. Je suis très contente d’être tombée sur votre page.
Répondre -
19 août 2011 23:46, par Franck
Là vraiment, bravo ! Ce tuto c’est de la crème ! Et les exemples de backgrounds donnent beaucoup d’inspiration pour créer le sien. Merci
Répondre
