Tuto E-commerce – Création de bannières pour PrestaShop

La question que je pose souvent à mes clients c’est avez-vous un graphiste ? Pourtant, aujourd’hui, il est possible de réaliser des visuels sans de gros moyens et avec quelques connaissances basiques.

Tutoriel 1

La création de visuels c’est toujours une grande question… qui va le faire ? Aujourd’hui j’essaie en principe de faire un exemple pour mes clients et je leur donne ensuite le fichier « .PSD » pour qu’ils essaient ensuite de retoucher le contenu, afin de devenir autonome (c’est ça mon but).

Si on regarde du côté des gros sites, on constate que la tendance c’est la simplicité avec une belle image et un texte. Ce n’est pas parce que c’est simple que c’est « mauvais », au contraire… par contre, il faut s’assurer de choisir une image de qualité pour la base de votre bannière (on ne peut pas économiser sur tous les fronts). Vous pouvez malgré tout trouver de belles photos sur des banques d’images libres de droits.

Un autre point très important c’est d’essayer de garder une unité dans le site, que ce soit au niveau des polices utilisées, leurs tailles et le type d’images. Parfois cela peut prendre plus de temps de choisir une image que de faire la mise en forme. Pourtant, cela est ensuite déterminant pour le rendu visuel, car les clients se font une opinion très rapide d’une boutique en ligne déjà au premier coup d’oeil.

Ressources

Pour ce tutoriel vous avez à disposition :

• 1 x fichier banner.psd
• 1 x fichier de police thinking of betty

Télécharger les sources

Au programme

• La création de bannière, une demande récurrente.
• Utilisez idéalement un template à prédominance blanc.
• Prendre les mesures d’une image existante :
  – via Firebug
  – ou via le navigateur
• Utilisez Photoshop :
  – un logiciel indispensable
  – achetez la version Cloud
  – facile d’accès si on fait simple
• Banques d’images :
  – Les banques d’images payantes assurent une qualité supérieure, mais le coût est aussi important, prenez-le en compte dans votre budget.
  – Les banques d’images gratuites comme Pixabay peuvent aussi servir de base, mais le choix des photos est plus restreint.
• Création d’images :
  – Inspirez-vous des gros sites et regardez leurs visuels.
  – Utilisez une méthode universelle (un fond, un texte, un bouton).
  – Intégrez une police pour vous différencier.
• Rendez votre texte plus visible grâce à un fond opaque.
• Testez votre bannière et ajustez-la plusieurs fois.