Comment créer des visuels pour son site internet avec Canva ?

Webdesign

Je pense que vous n’avez pas envie que votre site ressemble à celui de votre principal concurrent?
Au contraire, vous voulez une vraie présence, un site internet qui marque chaque visiteur qui y passera.
Pour que le contenu de chaque page représente à 100% qui vous êtes. Et pour ça, pas besoin d’être un mix d’artiste et de geek. Il existe une solution plus facile que tout ce que vous pouvez imaginer.
Créer des visuels pour son site internet avec Canva.
Des éléments graphiques sur mesure pour illustrer vos contenus écrits.

Si vous travaillez avec un.e graphiste pour créer des visuels pour votre site internet,

il ou elle s’occupera de vous créer des visuels pour les intégrer au site.

Vous pourriez avoir des icônes aux couleurs de votre marque, des illustrations, des patterns pour habiller les fonds blancs, des bannières, etc.
Mais si vous créez votre site internet vous-même, vous trouvez peut être que tout ça manque de personnalisation.
Des fonds blancs, des colonnes, des images… Vous êtes plus fun que ça non?

Sauf que, je comprends bien :

  • Vous êtes bridée par la technique, les supers effets en CSS c’est un peu trop extrême pour vous
  • Vous n’avez pas Photoshop
  • De toute façon, vous n’avez pas envie de passer la moitié de votre budget dans Photoshop et ses amis
  • Et en toute honnêteté, vous ne comprenez absolument rien au fonctionnement de Photoshop et je vous comprends 🤦‍♀️ (mais comment sectionner le bon calque au secours!!!)

Heureusement, même les plus novices ont un outil miracle pour leur permettre de créer de jolis visuels pour leur site internet : Canva.

Et le mieux dans cette affaire : c’est gratuit!
La version payante vous permettra de faire encore plus de miracles, mais pour un début, ce sera déjà pas mal. Trop beau pour être vrai? Même pas.

Pour commencer, regardons comment créer 4 visuels pour votre site internet avec Canva.

créer son site web soi même - ebook offert

Créer des icônes personnalisées pour votre site web avec Canva

Canva vous permettra d’abord de créer des icônes pour votre site web et d’autres petites illustrations comme des pictogrammes.

Par exemple, vous pourrez les utiliser quand vous laissez le choix entre 3 options à vos clients, comme vos 3 types d’offres.

Illustrer ça par 3 pictogrammes assortis sera beaucoup plus harmonieux et plus simple à comprendre.

Les pictogrammes permettent de comprendre instantanément de quoi on parle, du moins si les illustrations sont claires. (N’oubliez pas de quand même mettre le titre en dessous, au cas où quelqu’un ne comprenne pas ou ne voie pas les images.)

Comment créer des icônes pour son site internet avec Canva?

  • Commencez par créer un nouveau design carré sur Canva, de petite taille (200px par exemple).
  • Dans la bibliothèque d’éléments proposés par Canva, choisissez les icônes dont vous avez besoin.
    Vous pouvez taper des mots clés dans la petite barre de recherche pour trouver l’icône idéale : « enveloppe », « téléphone », « docteur », etc.
    D’ailleurs vous aurez de meilleures chances en tapant les recherches en anglais.
  • Ensuite, vérifiez que vous avez bien un petit nuancier de couleurs qui s’affiche en haut à gauche.

  • Celui ci vous permettra de modifier chaque couleur de l’icône pour y mettre votre propre palette.
  • Si vous n’avez pas de compte Canva Pro, vous n’aurez pas la possibilité de télécharger le visuel en .PNG avec un fond transparent.
    Dans ce cas, choisissez la couleur de fond de la même couleurs hexadécimale (avec le signe #) que le fond de votre page.

Note : Pensez bien à la taille des images. Inutile de faire des icônes très grandes, elles risqueraient d’alourdir inutilement la page et de ralentir le site. Pour un pictogramme (qui occuperait pas exemple une colonne sur 3), 200 à 300px sont largement suffisant (moins de 100px pour de petites icônes type « réseaux sociaux »).

Créer un entête d’e-mail pour sa boutique en ligne avec Canva

À l’aide de Canva, vous pouvez personnaliser les e-mails que vous envoyez à vos abonnés, mais aussi aux clients de votre boutique en ligne.

Cet article pourrait vous intéresser : « Comment garder les clients plus longtemps sur votre boutique en ligne? »

Lorsque quelqu’un passe une commande, il reçoit un e-mail automatique de confirmation, mais aussi d’autres messages selon les réglages que vous aurez choisi (« Paiement accepté », « Commande en cours », etc.).

Mais les e-mail par défaut sont souvent un peu moches…

Ceux de Woocommerce ont par exemple une vilaine bannière d’entête violette (qui est la couleur officielle de WooCommerce (et la couleur officielle des tramways dijonnais 😏✌️)).

Vos clients seraient bien plus rassurés s’ils recevaient un vrai e-mail aux couleurs de la marque. Ils auraient beaucoup moins l’impression que la boutique a été crée il y a 5 minutes !

Pensez donc à créer des entêtes aux couleurs de votre entreprise avec Canva, surtout si vous avez un univers singulier. Vos clients apprécieront que votre univers se prolonge jusque dans les mails transactionnels habituellement ennuyeux.

En plus, ça ne pourrait pas être plus facile : Canva vous propose directement de faire ça.
Rendez vous sur la page d’accueil de Canva, et parcourez la liste des designs.

Vous allez y trouver « entête de mail ». (vous pouvez aussi le chercher avec la petite barre de recherche).

Comment créer une entête d’e-mail avec Canva?

  • Ouvrez ce design, choisissez un modèle si vous voulez, ou faites un design personnalisé.
    C’est assez simple, il vous suffit de choisir une image dans la bibliothèque d’éléments ou de télécharger l’une des vôtres. Ensuite, glissez là jusqu’aux bords du cadre pour qu’elle s’applique automatiquement à tout votre design.
    Vous pouvez baisser son opacité si vous voulez la rendre plus discrète, ou simplement choisir une simple couleur de fond.
  • Choisissez ensuite une police proche de celles de votre site, et inscrivez au milieu le nom de la boutique, en blanc si la photo de fond est sombre, et inversement. Et c’est tout!
  • Ajouter éventuellement votre logo, mais pas plus, au risque de surcharger la bannière.

N’ajoutez pas non plus de texte (par exemple « votre commande chez… »).
Il faut que cette bannière reste neutre pour pouvoir être affichée sur TOUS les modèles d’e-mails de la boutique.

Créer des visuels et des mockups avec Canva

Si vous vendez des produits virtuels (comme des formations en ligne) ou des prestations en rapport avec le numérique (social media management, coachings en ligne, etc.), vous pourriez les montrer à vos clients dans des mockups.

Ces maquettes représentent un écran (d’ordinateur, de smartphone, etc.) avec vos produit affiché à l’écran. Sans que vous n’ayez à prendre vote propre téléphone en photo ✌️

Réaliser un mockup sur Photoshop demande un peu de compétences, mais avec Canva, c’est automatique.

Canva vous propose des cadres dynamiques.
Écoutez bien, c’est presque magique… Vous n’avez qu’à y glisser-déposer l’image à afficher à l’intérieur de l’écran, et elle s’ajuste automatiquement !
Vous n’avez rien à faire… C’est d’une honteuse simplicité!

Comment faire une maquette d’écran d’ordinateur avec Canva? (ou de smartphone, ou de tablette)

  • Rendez vous dans la bibliothèque d’éléments de Canva

  • Dans la rubrique « cadres », et cherche le modèle qui vous plait : un ordinateur, un iPhone, une tablette, etc.
    Vous pouvez aussi faire une recherche.
    Attention à bien choisir un modèle d’écran qui a un fond « paysage », vert et bleu!
    Ça signifie qu’il est dynamique, et qu’il ajustera automatiquement l’image à l’intérieur.

  • Mettez tout ça dans votre document, ajoutez des éléments autour si vous le souhaitez, ou des textes pour décrire votre produit.
  • Réglez la couleur de fond pour qu’elle soit la même que celle de votre site.
  • Choisissez ensuite l’image à mettre à l’intérieur de l’écran. Faites simplement une capture d’écran de la page que vous souhaitez montrer, soit de votre ordinateur, soit de votre téléphone.
    Gardez à peu près la même largeur pour que tout soit visible  sur la maquette.
    Par exemple, si vous avez un grand écran d’ordinateur de bureau, et que vous faites une maquette de MacBook, réduisez votre fenêtre avant de faire la capture d’écran car les petits ordinateurs portables sont beaucoup moins larges.
  • Importez cette capture d’écran dans Canva, et faites la glisser dans le document.

  • Double cliquez sur l’image si vous souhaitez affiner son alignement grâce aux 4 points qui s’affchent dans els angles, et c’est bon!
  • Ajoutez des textes ou des éléments graphiques, et votre mockup est prêt.

Vous n’avez plus qu’à télécharger cette image et à la compresser avant de l’ajouter sur votre site. Et vos futurs clients peuvent maintenant visualiser à quoi ressemble votre produit, même virtuel.
C’est très rassurant pour eux lors du processus d’achat!

créer son site web soi même - ebook offert

Customiser les images de son site internet avec Canva

Créez des effets de superposition pour habiller les images

Si vous trouvez que certaines images de votre site sont un peu « nues » et ont l’air perdues au milieu des pages, vous pouvez les customiser et les habiller aux couleurs de votre marque.

  • Importez votre image dans votre espace Canva, dans un document qui fait à peu près la même taille.
    Voyez quel espace vous voulez laisser à gauche et à droite pour les décors.
  • Rendez vous ensuite dans la bibliothèque Canva et choisissez les éléments qui vous plaisent et qui correspondent à votre univers.
    Conseil : pour des formes abstraites qui peuvent aller avec tous les styles, tapez « abstract » dans le moteur de recherche des éléments.
    Conseil n°2 : ne choisissez pas d’éléments animés, sinon votre document sera une vidéo qui risquerait de ralentir le chargement des pages.
  • Ajoutez les éléments au document, et jouez avec les différents plans : vous pouvez les mettre sur l’image ou en dessous, en cliquant sur « Position », en haut à droite.

  • La plupart des éléments peuvent être modifiés : ajoutez donc les couleurs de votre propre palette.

Vous pouvez également mettre l’image dans un cadre

pour donner du relief ou changer sa forme.
Toujours dans éléments, choisissez la section « cadres » et parcourez les modèles.
Grâce à ça, votre image banale pourra devenir ronde, en forme d’arche, ou avec des effets.

La seule chose que vous ne pouvez pas customiser est la couleur de fond, sinon vous aurez un grand rectangle de couleur autour de la photo sur le site…

Donc choisissez bien une couleur de fond similaire au fond de votre page.

Facile à utiliser et gratuit, Canva est vraiment une aubaine pour tous ceux qui créent leur site eux même et qui aimeraient le personnaliser plus en profondeur.

Créer des visuels pour votre site internet avec Canva va vous permettre d’avoir une image beaucoup plus professionnelle.
D’ailleurs, tous mes templates de sites internet sont  fournis avec des modèles de visuels Canva, à personnaliser avec un compte gratuit. Ce qui permet aux personnes qui créent leur site elles-même et ne possèdent pas d’outils comme Photoshop de créer de jolis visuels assortis à leur marque sur toutes les pages du site.
Toutes les illustrations de cet article sont incluses dans le template Johanna.

Épinglez cet article sur Pinterest pour le retrouver plus tard.

Personnalisez entièrement votre site web : apprenez comment créer des visuels originaux pour votre site internet avec Canva? Icones, bannières, décors, créez gratuitement une identité visuelle sur-mesure pour votre boutique en ligne.  . Par Andrea Studio, création de sites internet pour photographes et entrepreneuses créatives, templates et thèmes WordPress.
Comment créer des visuels originaux pour son site internet avec Canva?
Comment créer des visuels originaux pour son site internet avec Canva?
crééer site internet soi même coach

créer son site internet

soi-même

a propos - creation de site internet à dijon
Hello !

Je suis Morgane,

Je vous aide à créer votre site web.

crééer son site internet soi meme ebook gratuit

E-book offert,

« Créer son site : la checklist »

Avez-vous pensé à lire aussi ces articles ?

Les erreurs à éviter pour créer un site web professionnel soi-même

Les erreurs à éviter pour créer un site web professionnel soi-même

Il n’y avait pas assez d’un article pour faire le tour des erreurs qui empêchent de créer un site web professionnel. Voici donc le tome 2 ! Créer un site internet soi-même est ambitieux, surtout lorsque l’on débute. Mais c’est une belle aventure, et vous serez sans...

créer son site soi-même : les erreurs à éviter

créer son site soi-même : les erreurs à éviter

Créer son site soi-même est tout à fait possible techniquement. Avec un peu de patience et les bons outils, tout est réalisable. Mais le manque d'expérience et de connaissances techniques peuvent vous faire commettre quelques impairs, c'est inévitable. Certains...

Pourquoi vous devriez utiliser vos propres images sur votre site

Pourquoi vous devriez utiliser vos propres images sur votre site

Vous le savez, les images sont un des piliers de votre identité visuelle. Elles sont choisies non pas pour montrer quelque chose (sauf si ce sont les photos qui illustrent une fiche produit) mais plutôt pour raconter une histoire, pour porter un message. Vous pouvez...

crééer son site internet soi meme ebook gratuit

ebook offert

Créer son propre site : les étapes

La liste des étapes pour créer son propre site internet sans rien oublier.

découvrez

Les templates

Un site internet pré-conçu à personnaliser soi-même.

crééer site internet soi même coach