Tous les articles seront prochainement mis à jour.

Comment faire des jolis boutons ?

article28

Salut à toutes ! Aujourd’hui, je vais vous apprendre comment faire des jolies boutons ou des mini-bannières, comme ceci :

résultat4

En fait, c’est simple, il suffit d’un peu de logique ! Pour ce tuto, j’ai utilisé 2 logiciels : Paint et Gimp. Alors Paint, tout le monde connaît, on l’a tous dans son ordi, en revanche Gimp n’est pas aussi connu, mais n’est pas vraiment inconnu non plus, c’est un logiciel assez compliqué quand on n’y connaît pas grand chose ! Mais bon, je suis là pour ça ! 😀 Mais ce logiciel est, avant tout, gratuit et accessible (contrairement à Photoshop) ! Voilà, maintenant je vous montre les étapes pour parvenir à faire ce joli bouton !

1 – Ouvrir Paint, dessiner un petit rectangle, j’ai choisi la couleur grise, mais après c’est vous qui choisissez !

002

2 – Ensuite, on prend une couleur un chouia plus foncée que notre couleur grise précédente, et on fait 2 petits rectangles de la même taille environ.

003

004 005

3 – Une fois qu’on a fait ça, on va prendre le grand rectangle et le mettre par-dessus les 2 petits rectangles, pour cela, on clique sur Sélectionner, attention de bien vérifier que Sélection transparente soit bien cochée quand vous cliquez sur Sélectionner, et que la Couleur 2 soit blanche. Ensuite, on sélectionne le grand rectangle et on le déplace. Voilà ce qu’on obtient :

006

4 – Ensuite, on va essayer de créer une illusion d’optique, pour cela, on va créer deux petits triangles d’un gris encore plus foncé ! Pour le premier triangle, on va dessiner un petit triangle, qu’on va faire Pivoter à gauche de 90° deux fois. Et après, on le met sur le premier petit triangle, et on le redimensionne. Cela va créer une espèce d’ombre.

007 008 009 Pour le deuxième triangle, on va dessiner à nouveau un petit triangle de la même couleur que le premier triangle, sauf que cette fois, on cliquera sur Retourner verticalement. 010 011 012

 5 – Maintenant, on va ajouter les petits détails qu’on trouve aux extrémités de notre bouton. Pour cela, on va, tout d’abord, dessiner un triangle noir, faîtes attention ce n’est pas le même triangle. Ensuite, pour le premier triangle, on va le faire Pivoter à gauche de 90°, et pour le deuxième triangle, on va le faire Pivoter à droite de 90°. Et on les met sur les petits rectangles correspondants, on redimensionne et on clique droit en appuyant sur Inverser les couleurs.

013 014 015 016 017

6 – Voilà, maintenant, on a notre petit dessin, il reste plus qu’à ajouter le texte.

018 019

7 – Maintenant, on passe à la dernière étape, la plus cruciale ! Rendre le fond transparent ! Et pour cela, on va utiliser Gimp. Donc, on ouvre Gimp. Et on va ouvrir notre joli dessin.

020 021

8 – Et maintenant, pour ajouter un fond transparent, on va, premièrement, cliquer sur Calque > Transparence > Ajoute un canal alpha. Après, on clique sur le Sélecteur de Couleur, et on clique le fond blanc, ensuite, on appuie sur Supprimer sur le clavier.

022 - Copie 023

9 – Voilà, maintenant, il reste plus qu’à l’enregistrer sous le format PNG, et pour cela, on clique Fichier > Exporter, on nomme le fichier et on clique sur Exporter une nouvelle fois.

Et voilà, notre tuto est fini, j’espère vous avoir aidé. Si jamais, vous rencontrez un problème, n’hésitez pas à me le dire en commentaire ! 😀 Pour demain, j’ai prévu un nouveau tuto, Comment réaliser moi-même ma barre de catégorie ?. A bientôt !

 

signature

 

23 Comments on Comment faire des jolis boutons ?

  1. creationslolita
    5 mars 2014 at 21:25 (4 années ago)

    merci pour ce chouette tuto. c’est bien il est accessible contrairement aux tutos des super blogueuses (^^) qui pense qu’on est super riche et qu’il nous pondent des tutos avec Photoshop … !

    Continue comme ça c’est agréable à te lire 😉

    http://www.lescreasdelolita.com

    Répondre
    • Mina
      5 mars 2014 at 22:21 (4 années ago)

      Merci, ça me fait plaisir !! 😀

      Répondre
    • Mina
      5 mars 2014 at 22:27 (4 années ago)

      Pas de quoi ! 😀

      Répondre
  2. Sophie
    21 mars 2014 at 13:55 (4 années ago)

    Super toutes ces astuces !!!! Je vais m’y mettre dès ce week-end 😉

    Répondre
  3. love deco design
    24 mars 2014 at 15:30 (4 années ago)

    Merci pour ces tutos avec des logiciels simples et gratuit, je vais essayer de faire ça cette semaine.

    Répondre
  4. G-Cosmetik
    28 mars 2014 at 10:11 (4 années ago)

    J’ai longtemps cherché un blog comme le tien aussi bien expliqué ! Vu que mon blog est tout nouveau et c’est pas évident d’en avoir un « jolie » en tout cas MERCI 😀

    Répondre
    • Mina
      28 mars 2014 at 23:59 (3 années ago)

      ça me fait plaisir ! 😀

      Répondre
  5. BeautyReveries
    7 avril 2014 at 19:46 (3 années ago)

    Merci beaucoup, c’est vraiment joli et facile à réalise 🙂

    Répondre
    • Mina
      9 avril 2014 at 09:38 (3 années ago)

      Merci, ça me fait plaisir ! Je viens de jeter un coup d’oeil sur ton blog, et je vois que tu as vraiment bien réussi tes boutons ! 😀

      Répondre
  6. Mondomisiladoré
    8 avril 2014 at 17:47 (3 années ago)

    c’est super mina !! j’ai bcp apprecié tes astuces et je vais essayer les boutons ^^

    Répondre
    • Mina
      9 avril 2014 at 09:34 (3 années ago)

      Merci ! ça me fait plaisir ! 😀

      Répondre
  7. Poppy
    16 avril 2014 at 20:41 (3 années ago)

    J’en reviens pas ! Et moi qui galère sur photoshop alors que c’est si facile… Ton tuto est super, bravo ! T’es super maline !

    Répondre
    • Mina
      16 avril 2014 at 21:09 (3 années ago)

      Merci !!! Pourquoi se compliquer la vie, alors qu’elle est si simple… 😀

      Répondre
  8. frenchgirlsstuff
    20 mai 2014 at 20:58 (3 années ago)

    Merci beaucoup pour ton tuto il est super ! Ca rend hyper bien et c’est simple 🙂

    Répondre
  9. Ninon
    21 mai 2014 at 21:46 (3 années ago)

    Super tuto !! Mais juste une question…Quel version de Paint tu utilise ? Tu as un liens ou le telecharger s’il te plaît ? 🙂

    Répondre
    • Mina
      21 mai 2014 at 21:53 (3 années ago)

      Merci ! Euh je ne sais pas quelle est la version. On ne peut pas télécharger ce logiciel, car on le trouve seulement sur les PC. Je dois avoir la version qui correspond à Windows 8, je pense. 🙂

      Répondre
  10. Flavour Beans
    29 mai 2014 at 21:15 (3 années ago)

    Merci pour ce super tuto! C’est vraiment super bien expliqué et super super! (je sais, ça fait beaucoup de super pour une seule phrase 😉 )

    Répondre
  11. marine
    12 septembre 2014 at 02:24 (3 années ago)

    Le format du fichier une fois enregistré est-il accepté sur tous les sites ? En tout cas merci, je suis ravie de ce tuto !

    Répondre
  12. laetigior
    24 octobre 2014 at 17:26 (3 années ago)

    Waouh enfin j’arrête de me battre avec PS!!!
    Là au moins niquel. Par contre une question stp, comment fait on ensuite pour les mettre stp? Comme toi par exemple, moi j’ai une bannière recette et j’aimerais que l’on retrouve mes articles recettes en cliquant dessus directement mais qu’ils apparaissent également dans l’ordre chronologique de mes articles.
    Saurais-tu me dire comme je peux faire stp?
    Merci 🙂

    Répondre
  13. Leblog2clemy
    11 novembre 2014 at 16:33 (3 années ago)

    Coucou ! Je suis sur Mac et j’ai utilisé open office et quand tu dis inverser les couleurs je vois pas ou ça se trouve… J’aimerai bien ton aide 🙂 Merci

    Répondre
  14. Rania
    13 novembre 2014 at 11:34 (3 années ago)

    Wahouuu Mina ton blog est un vrai trésor pour les apprentis bloggeuse. Je savais même pas qu’on pouvais faire tous ça avec paint en plus merci bcp dès je travaille ça je te montre le résultat

    Répondre
  15. TCLIN
    26 avril 2016 at 20:04 (1 année ago)

    Franchement, c’est vraiment bien fait ! Bravo ! Je me suis juste demandée où est-ce que cela ce met sur le blog ? Merci 🙂

    Répondre

Laisser un commentaire

© Copyright GirlyBlog 2017 - Tous droits réservés.