Créer des boutons pour son Blog avec Photoshop

bouton-photoshop

Créer des boutons pour son Blog avec Photoshop

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 ! 
28 Comments
  • Happy Us

    29 mars 2013 at 10:38 Répondre

    Merci pour ces conseils!

  • Aline

    29 mars 2013 at 10:47 Répondre

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

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

  • Aline

    29 mars 2013 at 10:47 Répondre

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

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

  • Nathalie, lheuredete

    29 mars 2013 at 10:58 Répondre

    Génial, comme d’hab !

  • Mymy Girly

    29 mars 2013 at 11:05 Répondre

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

  • SKTV

    29 mars 2013 at 1:36 Répondre

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

  • Farfadette

    29 mars 2013 at 2:51 Répondre

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

  • anynews

    29 mars 2013 at 3:09 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

    29 mars 2013 at 4:13 Répondre

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

  • Merci Elsa ! Encore un tuto super sympa ! Bises

  • justine

    31 mars 2013 at 5:26 Répondre

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

  • Nicoline Defy

    1 avril 2013 at 7:09 Répondre

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

    Bises !

  • Anonymous

    8 avril 2013 at 12:02 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

    17 avril 2013 at 9:44 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

    30 avril 2013 at 4:40 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

    14 mai 2013 at 12:23 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

    29 mai 2013 at 6:57 Répondre

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

  • Les Idées de Samia

    7 novembre 2013 at 5:59 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 ❤

      8 novembre 2013 at 11:13 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

      8 novembre 2013 at 11:35 Répondre

      Ah oui ! Merci ! :-)

  • Melle Craquotte

    6 décembre 2013 at 4:40 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 ❤

      6 décembre 2013 at 4:52 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

      6 décembre 2013 at 5:38 Répondre

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

  • Les récréations sophie

    2 avril 2014 at 3:19 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

    5 avril 2014 at 3:12 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

    6 août 2014 at 10:45 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

    15 août 2014 at 8:19 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

    15 août 2014 at 8:55 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

Post a Comment