La totale pour créer un background pour son compte Twitter en utilisant Photoshop

mardi 16 mars 2010
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.
Article écrit par : Wonka
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 !
WonkaStudio

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.

JPG - 55.4 ko
JPG - 52.4 ko
JPG - 54.9 ko
JPG - 53.6 ko
JPG - 57.5 ko
JPG - 58.4 ko
JPG - 63.8 ko

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.

JPG - 79.9 ko

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%.
JPG - 83.5 ko

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).
JPG - 97 ko

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.

JPG - 96.5 ko

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.
JPG - 98.6 ko

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.
JPG - 117.2 ko

Utilisez la même technique pour en disposer sur toute la partie haute de votre image.

JPG - 114.9 ko

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 ».
JPG - 122.7 ko

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 ».
JPG - 130.1 ko

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.
JPG - 115 ko

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.

JPG - 112.1 ko

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.

JPG - 98.4 ko

Appliquer le nouveau fond d’écran Connectez-vous à votre compte Twitter.

JPG - 86.3 ko

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.

JPG - 104.6 ko
JPG - 99.8 ko
JPG - 108.1 ko

Voila c’est terminé, cliquez sur le bouton Valider pour appliquer les changements à votre compte Twitter.

JPG - 128.6 ko

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 ;)
JPG - 139.9 ko

http://twitter.com/lisaworsham

JPG - 163.2 ko

http://twitter.com/Go_Media

JPG - 106.8 ko

http://twitter.com/napwarden

JPG - 140.9 ko

http://twitter.com/pipitakitty

JPG - 178.6 ko

http://twitter.com/sharebrain

JPG - 149.8 ko

http://twitter.com/weheart

JPG - 128 ko

http://twitter.com/binojxavier

JPG - 139.6 ko

http://twitter.com/cameronolivier

JPG - 141.9 ko

http://twitter.com/geoffreydorne

JPG - 109.4 ko

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
La galerie des membres

Ajouter votre image dans la galerie
Si vous avez réussis ce tutorial vous avez la possibilité de poster votre dessin dans la galerie, vous pourrez ensuite le publier dans les commentaires (que vous trouverez en bas de page).
Attention votre fichier devra être en format JPG, et son poid inférieur a 200ko !

Vos commentaires ( 7 messages dans le forum)
Ajouter un commentaire à cet page

modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Ajouter un commentaire

Continuer la lecture sur wks.fr

Copyright

Les articles et images d'illustrations sont propriété de l'auteur et du réseau Grafik Network & Wks.fr.

Toute copie, reproduction ou diffusion sans autorisation sont interdites. Les images ainsi que les textes sont protégés par le droit français d'auteur ainsi que par un Copyright.