Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Créer des images pour vos articles avec Canva

Une partie importante de votre blog et de vos articles est le visuel. De belles images, de belles polices et couleurs vont attirer vos lecteurs. Je vous en parlais ici, et aujourd'hui je vais vous expliquer comment utiliser un super outil gratuit pour créer des images pour vos articles : Canva. Parce que oui, vous n’avez pas tous les moyens de vous payer Photoshop ou Illustrator ;)

C’est parti pour les explications !


Sommaire

  1. S’inscrire
  2. Créer une nouvelle image
  3. Modifier un modèle
  4. Télécharger l’image finale
  5. Réutiliser le modèle

S’inscrire

Tout d’abord allez sur le site web de Canva pour vous inscrire. L’outil est gratuit mais requiert une inscription. Vous pourrez ainsi retrouver vos créations dans votre espace personnel.

Créer des images pour vos articles avec Canva

Créer une nouvelle image

Une fois inscrit, connectez-vous. Vous serez dirigé vers votre tableau de bord Canva. Sur votre tableau de bord vous trouverez les images que vous avez déjà créé (cette zone sera vide car vous venez de vous inscrire).

Cliquez sur le bouton vert Créer un design en haut à gauche de la page pour commencer la création d’une nouvelle image :

Créer des images pour vos articles avec Canva

On vous propose alors, de nombreux choix de tailles d’images pour le web (articles de blog, bannières, etc.), les réseaux sociaux, l’impression (posters, etc.), et pleins d’autres documents.

Pour une image d’article, choisissez Image de blog sous Blogs et e-books :

Créer des images pour vos articles avec Canva

Par défaut la taille de ce modèle est de 800 pixels de large par 1200 pixels de haut. Pour utiliser une taille personnalisée, tout en utilisant les modèles proposés pour Image de blog, il faut utiliser une version payante de Canva.

En cliquant sur Image de blog vous serez dirigé vers la page de création/modification d’images.

Dans le menu à gauche vous trouverez une liste de modèles prêts à l’emploi. Certains modèles comportent des images payantes. Mais ce n’est pas grave car on peut les remplacer par des images gratuites ! ;)

Il y a des modèles pour tous les goûts, alors n’hésitez surtout pas à descendre la liste pour voir tous les modèles disponibles !

Pour cet exemple je vais sélectionner le modèle ci-dessous. Il suffit de cliquer sur le modèle pour l’utiliser. L’image apparaît dans la partie droite de l’écran.


Créer des images pour vos articles avec Canva

Modifier un modèle

Dans ce tutoriel je vais vous expliquer dans les grandes lignes comment modifier un modèle pré-existant. Si vous voulez apporter des modifications plus poussées, ou apprendre à mieux utiliser Canva, je vous conseil de voir leurs nombreux tutoriels ! ;)

Modifier le texte

Pour modifier un texte, il suffit de cliquer sur le texte à modifier.

Créer des images pour vos articles avec Canva

En cliquant dessus, une barre de paramètres pour le texte en question apparaîtra. Vous pouvez modifier la police, la taille de la police, la couleur du texte, ou supprimer le texte (icône poubelle). En cliquant sur le flèche à droite de la barre, vous pourrez voir d’autres options comme l’alignement du texte, l’espacement, ou la transparence.

Pour modifier le texte affiché, sélectionnez-le et remplacez-le par ce que vous souhaitez.

Pour déplacer un texte, cliquez d’abord dessus, ensuite placez votre souris sur les pointillés qui définissent le cadre de la zone de texte. Quand vous voyez le pointeur en forme de flèches croisées, gardez le clique-gauche enfoncé et glissez la boîte vers sa nouvelle position.

Modifier l’image de fond

Pour modifier l’image de fond, cliquez sur l’outil Images dans le menu à gauche de l’écran. Cliquez sur le bouton vert Téléchargez vos propres images pour ajouter une image de votre ordinateur.

Créer des images pour vos articles avec Canva

Une fois le téléchargement terminé, glissez la photo sur le fond de votre image. L’image de fond sera automatiquement centré. Des options apparaîtront au-dessus et sous l’image de fond.

Créer des images pour vos articles avec Canva

Vous pouvez modifier la transparence du fond en cliquant sur la flèche dans les options contenant Copier et Avant/Arrière :

Créer des images pour vos articles avec Canva

Vous pouvez même appliquer un filtre à votre image en cliquant sur l’option filtre !

Créer des images pour vos articles avec Canva

Trouver des images gratuites

Si vous n’avez pas d’image à utiliser, vous pouvez chercher une image dans la sélection proposée par Canva. Cliquez sur Eléments dans le menu à gauche de l’écran, puis sur Photos gratuites :

Créer des images pour vos articles avec Canva

Glissez la photo de votre choix sur le fond de l’image.

Créer des images pour vos articles avec Canva

Si vous ne trouvez pas votre bonheur sur Canva, alors il existe de nombreux sites en ligne pour trouver des photos gratuites de bonne qualité.

Télécharger l’image finale

Une fois que vous êtes satisfait de votre image, cliquez sur le bouton télécharger en haut à droite de l’écran :

On vous propose 2 formats de fichier. Pour un article il faut utiliser un format web pour améliorer le temps de chargement de la page. Sélectionnez donc Image : pour le Web (JPG).


Une fois le téléchargement terminé, vous pouvez fermer la fenêtre qui s’affiche à l’écran, et ajouter votre image à votre article !

Réutiliser le modèle

Pour réutiliser un modèle, allez sur votre tableau de bord Canva. Depuis la page de création/modification cliquez sur Canva en haut à gauche de l’écran.

Cliquez sur Tous vos designs dans le menu à gauche de l’écran (il est normalement déjà cliqué par défaut). Dans la partie droite de l’écran vous trouverez vos anciennes créations.

Créer des images pour vos articles avec Canva

Cliquez sur un modèle pour le modifier directement. Si vous voulez dupliquer votre modèle, survolez-le. Cliquez sur la flèche qui s’affiche en haut à droite et sélectionnez Copier.

Créer des images pour vos articles avec Canva

Et voilà !

N’oubliez pas de jeter un oeil aux tutoriels Canva pour voir comment créer de superbes images qui en jettent pour votre blog ! ;)

Créer des images pour vos articles avec Canva

Autres articles

29 commentaires:

  1. Coucou !
    Je ne connaissais pas du tout ce site mais j'adore ce qu'on peut faire avec !
    Merci pour la superbe découverte =)
    Bisous

    RépondreSupprimer
  2. J'utilise très souvent Canva pour mon blog, c'est un outil fantastique ! Le top quand on a pas Photoshop. Ca donne souvent des idées aussi !

    RépondreSupprimer
  3. Merci beaucoup pour le partage du site, je ne connaissais pas et je dois avouer que j'adore !
    PS: Je trouve le nouveau design de ton site sublime, félicitation :)

    RépondreSupprimer
    Réponses
    1. Bonsoir, je reviens vers toi car après plusieurs dizaines de tentatives, je ne parviens pas à mettre les images d'aperçu d'article de ma version mobile en gros (de la largeur de l'écran à peut près). Elles restent toute petites..
      Aurais-tu une solution à me proposer stp ? :)

      Merci d'avance !
      Voici le lien de mon blog : https://mycosyway.blogspot.com

      Supprimer
    2. Bonjour,
      C'est normal la version mobile affiche par défaut des miniatures des photos au format carré qui font 72 pixels de large.
      Néanmoins il est possible de modifier la taille de ces images avec un peu de code javascript.
      Trouve la ligne suivante dans ton code :

      </body>

      Colle le code suivant juste avant cette ligne :

      <script type='text/javascript'>$(document).ready(function(){var dimension=400;$('.mobile-index-thumbnail').find('img').each(function(n,image){var image=$(image);image.attr({src:image.attr('src').replace(/s\B\d{2,4}/,'s'+dimension)});image.attr('width',dimension);image.attr('height',dimension);});});</script>

      Et voilà ;)

      Supprimer
    3. Merci beaucoup !

      J'aurais encore une fois besoin de tes précieux conseils.. Toujours pour la même raison d'ailleurs ^^
      La taille des images a bien changé en hauteur mais pas en largueur, saurais-tu comment faire stp ?

      Encore une fois merci d'avance ;)

      Supprimer
    4. Dans ce cas ajoute les codes CSS suivants :

      .mobile-index-thumbnail img {
      width: 100% !important;
      height: auto !important;
      padding: 0 !important;
      }
      .mobile-index-contents {
      margin-right: 0!important;
      }

      Avant la ligne suivante de ton thème :

      ]]></b:skin>

      Petite remarque pour une meilleur résolution d'image, remplace la dimension 200 du code JavaScript pour augmenter la taille des images, par au moins 400 ;)

      Supprimer
    5. Bonjour,
      Cela ne fonctionne pas non plus... Encore merci pour ton aide :)

      Supprimer
    6. Bonjour,
      Il y a une petite erreur dans le code CSS juste avant ceux que tu as collé. Un commentaire n'est pas fermé, du coup tous les codes qui suivent ne sont pas pris en compte.

      Tu as ceci :

      /* Apparence de la boîte de la liste de libellés */
      #Label1 select {
      padding: 10px 10px 10px 10px; /* Marge à l'intérieur de la boîte : haut droite bas gauche */
      border: none; /* Bordure de la boîte : none = aucune */
      background: #ffffff; /* Couleur de fond */
      color: #524656; /* Couleur du texte */
      font-family: 'Open sans', sans-serif; /* Police */
      font-size: 11px; /* Taille de la police */
      font-weight: 400; /* Graisse de la police */
      letter-spacing: 1px; /* Espace entre les caractères */
      text-transform: uppercase; /* Texte en majuscules : normal = normal | uppercase = majuscules | lowercase = minuscules */
      text-align: center;
      outline: none; /* Supprime la bordure quand on clique sur la liste déroulante *
      }
      .mobile-index-thumbnail img {
      width: 100% !important;
      height: auto !important;
      padding: 0 !important;
      }
      .mobile-index-contents {
      margin-right: 0!important;
      }

      Le commentaire à la ligne :

      outline: none; /* Supprime la bordure quand on clique sur la liste déroulante *

      N'est pas fermé : il manque le / à la fin. Rajoute ce signe comme ceci :

      outline: none; /* Supprime la bordure quand on clique sur la liste déroulante */

      Et voilà ;)

      Supprimer
    7. Génial ça y est !
      Merci énormément je commençais à perdre espoir. ;)

      Supprimer
  4. J'adore le nouveau design de ton blog, bravo !
    J'ai une petite question, je suis en pleine refonte de mon blog, et dans mon menu, il y a un trait vertical qui sépare chaque catégorie et je souhaiterai l'enlever sais-tu qu'elle partie de code faut-il que je supprime ?
    Bonne journée à toi ;)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Est-ce que tu travailles sur in blog test ? Si oui, peux-tu me donner le lien ?
      Par défaut les liens du menu sur Blogger, ont une bordure sur le côté. On peut le supprimer en modifiant le code CSS.

      Supprimer
    2. Voici le lien http://missfashionista-test.blogspot.com/ :)

      Supprimer
    3. Bonjour,
      Ce trait vient de ton thème, et plus précisément de ce code :

      #navigation .widget ul li:after {
      content: "|";
      padding-left: 10px;
      color: #565656;
      }

      Supprime ce code de ton thème et le trait disparaîtra ;)

      Supprimer
  5. Génial ! Merci pour ce partage, ça me donne très envie de peaufiner graphiquement mon blog.
    bonne soirée

    RépondreSupprimer
  6. Je connais ce site, c'est une vraie mine !! Merci pour ce nouveau tuto ☺

    RépondreSupprimer
  7. C'est génial ce que tu fais. Je viens d'ouvrir mon blog et ce tuto ma beaucoup aidé pour l'image de présentation. Si vous pouviez me dire ce que vous en pensez voici l'adresse: https://levasionaporteedelivres.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Lola,
      Je sus contente de pourvoir aider :)
      C'est très sympa ce que tu as fait ;)

      Supprimer
  8. Coucou !

    Je souhaiterai retirer l'encadré qui englobe mes articles et ma partie droite (présentation, archives, barre de recherche) on voit une délimitation avec le fond blanc et j'aimerai la supprimer. Est ce possible ?
    http://minie-moi.blogspot.fr/
    Ton blog est super ! :D

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui c'est tout à fait possible, retrouve ton code CSS qui commence par :

      .content-outer {

      Remplace les lignes :

      -moz-box-shadow: $(codeici);
      -webkit-box-shadow: $(codeici);
      -goog-ms-box-shadow: $(codeici);
      box-shadow: $(codeici);

      Dans ton code tu auras autre chose à la place de $(codeici); c'est tout à fait normal !
      Remplace donc ces 4 lignes par :

      -moz-box-shadow: none !important;
      -webkit-box-shadow: none !important;
      -goog-ms-box-shadow: none !important;
      box-shadow: none !important;

      Comme ceci :

      .content-outer {
      -moz-box-shadow: none !important;
      -webkit-box-shadow: none !important;
      -goog-ms-box-shadow: none !important;
      box-shadow: none !important;

      Supprimer
  9. bonjour catherine
    Merci pour ce site , j'ai essayé et il y a de quoi passer son temps à travaillé avec

    RépondreSupprimer
  10. Bonjour ! Pourriez-vous faire un tutoriel pour réaliser un menu 100% pérsonnalisé avec des images ect... ? Merci !

    RépondreSupprimer
    Réponses
    1. Bonjour Anaïs,
      Je dé-conseil de remplacer un menu par des images seulement. Cela réduit la lisibilité de ton blog par les navigateurs. Si pour n'importe quelle raison une de tes images ne fonctionne plus, alors le lien de ton menu disparaîtra.
      A la place je te conseil de personnaliser ton menu en modifiant le fond par une image, les bords par des images, et en utilisant des polices web, comme les police Google Fonts par exemple, pour les liens.
      Il est toujours possible de traduire une image en HTML et CSS ;)

      Supprimer
  11. Coucou !

    Je voulais savoir comment faire pour que les images et le texte de mon article soient bien alignés ?
    Bonne soirée :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux trouver des indications sur cet article ;)

      Supprimer
  12. Bonsoir Catherine, j'espère que tu vas bien .

    J'aimerais savoir s'il était possible de poster des images dans un article et que du texte apparaisse dessus en passant la souris, tout en faisant que cette photo soit "cliquable".
    Pour résumer j'aimerais me faire une rubrique du style "reward style" mais je n'ai pas la chance d'être populaire pour accéder à leur widget lol, une page comme celle-ci http://ellesenparlent.com/soldes/

    Pour rappel, mon blog : www.mamasycabeaute.com

    Merci d'avance ;)
    Bizzzz
    Jessica

    RépondreSupprimer
    Réponses
    1. Bonjour Jessica,
      Oui c'est tout à fait possible. Je note l'idée d'en faire un tutoriel ;)

      Supprimer
    2. Bonjour Catherine,

      Super, j'ai hâte alors, merci ;)
      Bizzz

      Supprimer

Vérifiez d'abord que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Je modère les commentaires 1 fois par semaine, mais je ne vous oublie pas ! :)

Newsletter

Tu veux recevoirinfos exclusives, news et ressourcesdans ta boîte mail ?
Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger