Créer des visuels pour le web

Comment créer des visuels pour le web efficacement ?

La recherche et l’adaptation de ses visuels pour le web est l’une des tâches les plus chronophage et casse tête qui soit sur le web. Nous allons dans cet article essayer de vous donner quelques astuces que nous pratiquons au quotidien afin d’optimiser ces différentes étapes :

  • Optimiser la recherche de visuels sur les banques d’images. Libres de droit ? Avec Droits ? Gratuits ?
  • La production de vos propres visuels pour le web
  • La publication optimisée de vos visuels en fonction de vos supports

Vous êtes prêt ? Commençons par un peu de théorie.

 

C’est quoi de bons visuels pour le web ou une bonne photo pour le web ?

1 – De bonnes dimensions

Un bon visuel pour le web c’est déjà un visuel aux bonnes dimensions, sous peine de voir son visuel pixellisé, coupé, déformé, ou tout simplement trop lours à chargé. Faisons le point :

  • Sur les réseaux sociaux
    Chaque réseau social a ses propres dimensions. Nous avons par ailleurs un article vous permettant de tout savoir sur les dimensions de vos visuels pour les réseaux sociaux

    Si vous ne savez pas quelle est la bonne dimension, généralement un format carré s’adaptera très bien qu’importe le réseau social !
    Enfin, et ceci est un appel du coeur : ne publiez pas un visuel tronqué. Nous voyons encore tellement de visuels mal calibrés sur les réseaux sociaux qui ne donnent par envie alors pensez-y ! Cela donne une image brouillon de votre entreprise. 
  • Sur un blog ou un site
    Les dimensions varient en fonction de la largeur de vos sites et de vos besoins.
    Notre conseil est d’utiliser “l’outil capture” de Windows ou cmd + shfit + 4 sur mac ou encore un outil dédié du type de Skitch (excellent outil pour ajouter des notes sur vos captures) afin de mesurer les dimensions qu’il vous faut.

    Le plus important est d’éviter de publier des photos et visuel en format original de 5000 pixels par 3500 pixels et pesant 5mo ! Cela alourdira considérablement votre page web et ralentira son chargement risquant de faire partir vos internautes. Pensez enfin au mobile ou le temps de chargement est capital !
    Cela prend du temps mais est impératif !
  • Sur une newsletter
    La largeur classique est comprise en 600/650 pixels jusqu’à 800 pixels de large. Vous avez la taille de vos visuels. Pour une photo qui fait la moitié de la largeur vous divisez par 2, et c’est fait !

 

2 – Une bonne qualité

Ici nous allons éviter les visuels pixellisés ! Et cela n’a rien d’insurmontable. Constituez-vous un dossier avec des visuels de très bonne qualité sur votre entreprise plutôt que de passer par Google images pour récupérer le logo en 100px par 50px. Nous l’avons tous fait ne le niez pas !

De la même manière vous souhaitez récupérer des visuels de bonne qualité, et logos de grands réseaux sociaux ils possèdent tous des sites ou des pages web dédiées à cela ! Vu que nous sommes très gentils chez La Boite à Donuts, voilà un exemple de lien vers Facebook : http://www.facebookbrand.com. Vous y trouverez leur logo, des captures d’écran ou encore le thumbup / pouce en l’air original et de bonne qualité !!ThumbFinal_4.9.15

Autre astuce concernant le repérage de visuels de bonne qualité sur google images pour ceux qui utilisent cette plateforme (90% encore une fois ne le niez pas 😉 ). Il vous suffit d’aller dans Outils de recherche puis taille et vous faites votre sélection. Le choix est moins important mais répondra aux 2 besoins de dimension et qualité.

dimensions images sur Google images

(capture réalisée avec skitch. Vous remarquerez les magnifiques flèches insérées avec l’outil !)

 

3 – Libre de droits et/ou gratuit

Un visuel libre de droits cela veut dire quoi ? Cela veut dire que vous pouvez librement l’utiliser. Est-il pour autant gratuit ? Que neni ! Par exemple la plupart des visuels et photos disponibles sur fotolia, shutterstock et autres bibliothèques similaires sont libres de droits mais payants. Même chose sur Google images.

La plupart des contenus libres de droits, et notamment les photos, le  sont sous licence Creative Commons : http://creativecommons.fr . Leurs licences sont extrêmement répandues car gratuites !

Nos astuces :

Jetez un coups d’oeil sur ces différents sites, ils vous proposeront de détailler le type de licence de votre choix en fonction de vos usages. Exemples sur Google images et Flickr qui proposent des filtrages de photos via les licences creative commons :

Google Images

google images, licences creative commons

Flickr

e

 

Au delà de ces grandes banques d’images, nous avons pour vous l’arme fatale (1) :

visuels pour le web. l'arme fatale gif

 

La bibliothèque de bibliothèques d’images : allthefreestock !

Vous y trouverez une liste de bibliothèques d’images gratuites et libres de droits mise à jour régulièrement. Il y a aussi des bibliothèques de mockups, de sons, de vidéos, de fonts, d’icônes etc. le répertoire qui ne vous quittera plus.

Passons maintenant à l’étape 2.

 

Créer ses propres visuels

Nous n’aborderons pas ici la création de photos professionnelle. Nous ne sommes pas les plus qualifiés pour vous conseiller finement. En revanche quelques points spécifiques :

  • Une photo pour les réseaux sociaux doit créer de l’émotion et ne pas présenter trop d’éléments sur la scène : pensez aux écrans de smartphone, qui même s’ils ont bien grandi depuis 4 ans sont loin d’être de la taille d’un écran d’ordinateur de bureau !
  • Nos smartphones ont justement aujourd’hui des capteurs photo tout à fait correct. Faut-il encore savoir prendre une photo sans ses gros doigts pleins de glaçage de donuts sur l’objectif.
    Notre astuce : prendre des angles différents, et focalisez-vous sur 1 élément, une originalité et non un panorama gigantesque.
  • Utilisez des filtres comme le propose Instagram mais avec modération !

 

Canva – Créer ses visuels et agrémenter ses photos

Voici votre arme fatale 2

 

(tout rapport avec un film américain est entièrement fortuit).


fPour les moins doués d’entre nous Canva va vous faire gagner un temps précieux et vous permettra surtout de composer des visuels de bonne qualité en quelques clics. Il dispose d’une grande base de données d’images gratuites ou payantes

En allant dans leur moteur de recherche, dans l’onglet éléments ou encore dans layouts (des calques tout fait prêts à être modifiés) Canva vous apportera des milliers d’idées ! A vous de faire de tri et vous concentrer sur votre besoin.

N’espérez pour autant pas réaliser des montages hyper précis et complexes. Canva obtient un Donut d’or sans la liste des outils indispensables de tout community manager / webmarketeur !

 

Autres applications photo

WordSwag disponible sur iPhone qui est d’une simplicité enfantine. L’application permet de réaliser des citation et montages photo avec un texte brut.

Layout from Instagram qui permet de mettre de faire des montages photos pour Instagram.

VSCO, une application équivalente à Instagram mais utilisée principalement par des photographes. Une application et des photos de très haute qualité.

Behance, est un réseau social de créatifs. L’endroit parfait pour s’inspirer.

Pinterest, autre réseau social d’inspiration et banque de donnée d’images (pas forcement libres de droit !).

 

Cet article n’a pas vocation à être exhaustif, mais à vous donner des éléments concrets pour la production de vos visuels pour le web et les réseaux sociaux, ainsi que des éléments sur lesquels être vigilant.

Partagez avec nous

Comments

Postez un commentaire: