La totale pour créer un background pour son compte Twitter en utilisant Photoshop
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 
INSCRIVEZ VOUS AU FLUX RSS WONKASTUDIO
|
