Et voici un nouveau tutoriel pour embellir son blog, avec Photoshop ! Cette fois ci, je vous propose de réaliser des boutons pour agrémenter votre blog. J’ai choisi une forme très simple, et que l’on retrouve beaucoup en ce moment sur la bloguosphère : les fameuses petites banderoles ! Ces boutons sont à positionner dans les colonnes latérales de vos blogs, vous êtes aussi libres de choisir les couleurs qui vous plaisent etc. Et bien sûr, si vous avez des questions, je me ferai une joie d’y répondre en commentaire !

photoshop-boutons-blogger
1
Ouvrez un nouveau document sous Photoshop. Choisissez un fond blanc, avec idéalement une résolution de 72 dpi (étant donné que le fichier est à destination du web). Si vous ne voulez pas vous embêter avec la re-dimension du bouton, choisissez directement une taille de document qui correspond à la taille du bouton que vous souhaitez. Ensuite, sélectionner l’outil rectangle.
2
Vous aller très simplement tracer un rectangle, de la taille de votre choix.

 

3
Afin de former une banderole, vous allez à nouveau tracer une forme rectangulaire. Toujours avec le même outil, sans faire de manipulation particulière.

 

4
Pour donner un peu de réalisme (et puis parce que c’est plus joli aussi :-) ) vous allez maintenant changer la couleur de ce nouveau rectangle. Je vous conseille de choisir une couleur d’un ton au dessous de la première. Après, à vous de voir si vous préférez faire un autre type de rendu ! Pour changer la couleur, rien de compliqué : cliquez simplement sur la vignette de couleur juste au dessus, choisissez une nouvelle couleur, et cliquez sur OK.
5
Toujours pour former une banderole, vous aller devoir placer la deuxième forme de rectangle sous la première. Pour cela, veillez à ouvrir la fenêtre des calques (Fenêtre -> Calques). Ensuite, vous allez « attraper » la forme 2 et la faire glisser sous la forme 1. Voilà c’est fait !
6
Là, on va donner une forme de banderole au rectangle. Afin de re-travailler le tracé, il faut effacer les points d’ancrage à la gauche du rectangle. Pour se faire, sélectionner la flèche blanche, puis cliquez sur le côté de gauche. Effacer avec la touche du clavier.
 7
Comme on vient d’effacer le côté, on va maintenant créer un nouveau tracé pour donner une nouvelle forme. Sélectionner la plume, puis cliquez une fois sur le premier point d’ancrage, cliquez une nouvelle fois vers le milieu, puis une troisième fois sur le deuxième point d’ancrage.
 
8
Pour terminer cette banderole, il faut évidemment dupliquer cette forme et la positionner sur le côté droit. Rien de plus simple : cliquez sur la forme 2 -> Calque -> Dupliquer le calque. Ensuite, sur ce nouveau calque dupliqué, faîtes Édition -> Transformation -> Axe de symétrie horizontale. Ensuite, faîtes défiler ce nouveau calque vers la droite avec les flèches du clavier, afin de terminer la banderole !
 
9
Grâce à l’outil Texte, vous allez pouvoir donner un nom à votre bouton.
10
Une petite astuce facultative pour donner un côté réaliste à votre texte : l’ombre portée ! Voici la marche à suivre : Calque -> Style de Calque -> Option de Fusion -> Ombre Portée -> Faîtes vos propres réglages -> Ok !
 
11
Avant d’enregistrer votre document, pensez à enlever l’arrière plan blanc. En effet, cela facilitera l’intégration du bouton dans votre blog. Pour cela, allez dans la fenêtre des calques, et cliquez sur l’oeil. Cela permet de masquer l’arrière plan. Vous pouvez aussi l’effacer.
Ensuite, pour installer ce nouveau bouton sous Blogger, allez dans mise en page. Puis, dans une des colonnes latérales, ajoutez un gadget « Image ». Sélectionnez votre bouton. Vous pouvez ajouter un URL à ce bouton, par exemple, si vous souhaitez créer un bouton pour un de vos libellés, voici le lien qu’il faudra mettre : http://votre-blog.blogspot.com/search/label/votre-libelé
 
À VOUS DE JOUER ! 
Dans le même style
28 commentaires
  • Happy Us
    Répondre

    Merci pour ces conseils!

  • Aline
    Répondre

    Super astuce, merci à toi !
    Je vais tester ça de suite ;)

    xxx
    Aline de http://the-little-dressing.overblog.com

  • Aline
    Répondre

    Super astuce, merci à toi !
    Je vais tester ça de suite ;)

    xxx
    Aline de http://the-little-dressing.overblog.com

  • Nathalie, lheuredete
    Répondre

    Génial, comme d’hab !

  • Mymy Girly
    Répondre

    Merci je m’en vais tester tout de suite pour mon blog!

  • SKTV
    Répondre

    Merci de me rendre moins bête avec Photoshop, tuto après tuto :-)

  • Farfadette
    Répondre

    Marrant je ne pensais pas que cela se faisait tout aussi simplement ! Merci !

  • anynews
    Répondre

    Super ! merci !
    Je suis sous wordpress, et je me demande si blogger n’est pas plus pratique pour la personnalisation….
    Si jamais tu sais aussi comment intégrer ces petits boutons sous wordpress je suis preneuse !

  • Curiosités à NY
    Répondre

    TOP! Merci bcp pour ces précieux conseils!!!

  • Répondre

    Merci Elsa ! Encore un tuto super sympa ! Bises

  • justine
    Répondre

    Merci ! J’ai mis un lien vers ton blog sur le mien.
    Bis
    Ju’

  • Nicoline Defy
    Répondre

    Super méga génial ! Merci la superbe Elsa ! Ça va me servir <3

    Bises !

  • Anonymous
    Répondre

    super mais je bloque sur l’étape 6! Quelqu’un a réussi ? comment enlève t- on les points d’encrage ?
    en tout cas j’adore tes tutos ça m’invite à bidouiller et me donnes des pistes !

  • Mes Petits Tableaux
    Répondre

    Merci pour tes tutos! J’adhère carrément et me motive vraiment à découvrir ce logiciel! J’attends les nouveaux avec impatience :)

  • Aurélie
    Répondre

    j’adore tes tutos car ça me fait découvrir des outils moi qui suis pas très doué ac photoshop. Mais grâce à tes divers tutos j’ai pu faire évoluer l’aspect graphique de mes illustrations ou présentation de blog.

    Pour ma version d’étiquette « boutons » , c’est par ici : http://globecroqueuse.canalblog.com/archives/2013/04/19/26963662.html

    (j’ai mixé ça avec ton tuto sur les tampons ;) ) J’aimerai bien voir si d’autres ont mis en pratique aussi :-)

    vivement le prochain tuto !

  • Oh lovely place
    Répondre

    Superbe découverte bloguesque ! J’ai moi même un blog déco/mode/lifestyle : http://www.ohlovelyplace.com que je bricole au fur et à mesure. Ce tuto va m’être utile, merci :)

    Puis l’année prochaine j’emménage a Montréal alors… Contente de suivre tes aventures :)

    Au plaisir de te lire !

  • Sam Vous Dit
    Répondre

    Super, merci pour ce tuto qui va m’être très utile pour mon blog ;)

  • Les Idées de Samia
    Répondre

    Bonsoir, j’ai fait des boutons personnalisés que j’ai inséré dans l’outil « image » seulement, à chaque fois il faut mettre obligatoirement un titre à l’image et cela ne m’arrange pas. Comment as-tu fait pour remédier à ça ? :-) Bonne soirée.

    • Elsa ❤
      Répondre

      Hello :-) Alors, pour arranger ce problème (qui n’existait pas il y a encore quelques temps… On dit merci Blogger !!), il suffit de mettre ceci < h2 > < /h2 > dans le champ du titre, et miracle, ça fonctionne ;-)

    • Les Idées de Samia
      Répondre

      Ah oui ! Merci ! :-)

  • Melle Craquotte
    Répondre

    Coucou !!! Super ce tuto ! Moi je n’ai pas photoshop donc je l’ai testé sur photofiltre, et le résultat est top, encore merci ! Petite question : j’ai vu que dans un commentaire tu disais comment enlever le titre des images pour les boutons du menu à droite du blog, j’ai donc essayé ce que tu as dit, mais ça ne marche pas …

    • Elsa ❤
      Répondre

      Je ne peux pas écrire correctement le code en commentaire, car Blogger émet une restriction. Je te conseille de copier/coller précisément le code suivant < h2 > < /h2 > mais en prenant soin d’enlever tous les espaces entre chaque caractère. Aucune raison pour que ça ne fonctionne pas !

    • Melle Craquotte
      Répondre

      Je viens de le faire, merci (je n’avais pas enlevé les espaces entre les caractères). :)

  • Répondre

    Bonjour j’aurais une petite question. Je voudrais créer ma propre template blogger sur Photoshop. Comment passer du modèle photoshop à une template ? Est-ce abordable pour quelqu’un qui ne connait rien au code ? Merci d’avance :)

  • Flo
    Répondre

    J’aime beaucoup la police que tu as utilisé pour les boutons qui se trouvent sur ton blog, pourrais-tu me communiquer son nom ?
    Merci :)

  • Anonymous
    Répondre

    Coucou! Merci pour ce tuto. Est-il possible de faire des boutons comme ceux-ci avec un autre programme accessible gratuitement?

  • adeline L
    Répondre

    coucou tout d’abord merci pour ce chouette tuto, j’ai le nouveau photoshop, celui que l’on voit sur ton dernier article photoshop le CC 2014, et le truc c’est que lorsque j’enlève un point d’encrage (plume planche je clique sur un coin puis effacer) ça modifie mon tracé et le rectangle se transforme en triangle, puis quand je supprime le deuxième point d’ancrage benh je n’ai plus de rectangle, je me retoruve avec une ligne et du coup avec la plume après je ne sais plus ou cliquer :( t’as une idée de comment faire, ou quelle étape j’ai sauté?

  • adeline L
    Répondre

    ahhhh et même quand je veux ajouter du texte, je vois mon texte calque, le vois ce que je veux écrire au niveau des calques mais rien ne s’affiche sur ma photo, grrr je suis nulle

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Contact

Besoin d’un design de blog personnalisé et à votre image ?

Tapez votre recherche puis appuyez sur la touche Entrée