Newsletter / E-mailing Concevoir une maquette de newsletter avec Photoshop

Maîtriser la conception graphique d'un e-mailing ou d'une newsletter avec Photoshop

Objectifs

→ Définir la place de la maquette dans le flux  de production d’un e-mailIing
→ Comprendre les principes de l’e-mail design
→ Livrer une maquette facile à transposer en code HTML
→ Réaliser une maquette de newsletter responsive avec Photoshop

Public concerné

Graphistes, webdesigners ou toute personne travaillant sur des CMS (WordPress, Drupal)…

Pré-requis

Il est nécessaire d’avoir suivi le stage “Les fondamentaux de l’e-mailing” pour accéder à cette formation. La connaissance des fonctions de base de Photoshop est indispensable.

Programme

Définir la place de la maquette dans le flux de production d’un e-mailing

  • Connaître le flux de production d’un e-mailing (brief, wireframe, design visuel, intégration HTML, mise en ligne, tests, envoi)
  • Identifier les grandes contraintes de production et leur incidence sur la délivrabilité d’un e-mailing (outils de messagerie, temps d’affichage, ratio texte / image…)
  • Identifier les différents types d’e-mailing et leurs incidences en matière de design graphique
  • Connaître les différences entre Web design et e-mail design

 

Étude de cas : analyse d’exemples d’e-mailings

Comprendre les principes de l’e-mail design

Gérer la surface d’un e-mailing à l’écran

  • Identifier les formats recommandés
  • Créer une grille et une ligne de base spécifique
  • Créer une mise en pages facilement transposable en code (structure tabulaire)
  • Comprendre le principe de la mise en pages fixe, fluide et / ou responsive

 

Gérer la typographie

  • Choisir la famille et la taille du caractère (police Web Safe, police sous forme d’image, Web Font)
  • Organiser les blocs de texte (alignement, interligne, interlettrage)
  • Gérer l’arrière-plan

 

Gérer les formats d’images (JPEG, GIF, PNG)

  • Choisir son format de compression
  • Créer un GIF animé simple

 

Exercices : analyse d’exemples d’e-mails design / Création d’un GIF animé

Livrer une maquette facile à transposer en code HTML

  • Comprendre le principe de codage HTML d’un e-mailing
  • Utiliser les repères et les grilles pour travailler au “pixel près”
  • Organiser et nommer efficacement les calques
  • Travailler avec les objets dynamiques

 

Exercice : réalisation d’une maquette d’e-mailing simple (approche Mobile First)

Réaliser une maquette de newsletter responsive avec Photoshop

Utiliser les plans de travail

  • Créer un plan de travail pour la version desktop
  • Créer un plan de travail pour la version smartphone

 

Mettre en place la grille

  • Utiliser la fonction Nouvelle disposition de repères
  • Créer une ligne de base avec la fonction Grille

 

Importer les images et les objets vectoriels

  • Utiliser la fonction Importer et incorporer
  • Créer des masques d’écrêtage
  • Importer des objets d’Illustrator
  • Optimiser les images pour les écrans Retina ou HD

 

Gérer le texte

  • Gérer des blocs de texte dans Photoshop
  • Créer des styles de texte
  • Ajouter un lien et supprimer la bordure bleue
  • Créer un “faux arrière-plan”

 

Créer des boutons faciles à transposer en code

  • Utiliser l’outil Rectangle arrondi
  • Appliquer une ombre et un contour

 

Créer la maquette pour les smartphones

  • Créer un plan de travail pour les smartphones
  • Dupliquer les calques d’un plan de travail à l’autre
  • Tester la maquette depuis un smartphone avec la fonction Device Preview

 

Exporter les images pour le Web

  • Utiliser la fonction Exporter sous
  • Utiliser l’outil Tranche
  • Exporter les images pour les écrans Retina ou HD

 

Exercice : réalisation d’une maquette complète comportant des images, du texte et plusieurs colonnes

Méthodes pédagogiques

Alternance de théorie, de démonstration par l’exemple et de mise en pratique grâce à de nombreux exercices.

Moyens techniquesMoyens spécifiques à cette formation :

→ Logiciel : Photoshop


Moyens génériques :

  • d’un poste de travail Mac ou PC de dernière génération équipé d’un écran plat 21” ou 27”
  • d’une tablette graphique
  • d’un iPad sur demande
  • d’une connexion très haut débit à Internet
  • d’une clé USB de 8 Go offerte en début de formation
  • Le poste du formateur est relié à un système de vidéo projection
  • 8 participants maximum par stage
  • 9 participants pour les formations certifiantes
  • Toutes les formations sont dispensées sur les dernières versions officielles de chaque logiciel
  • Un support de cours ou un livre est remis à l’issue des principaux stages
Suivi
  • Chaque apprenant bénéficie d’une hotline gratuite et illimitée par e-mail
  • Fiche d’évaluation, feuille d’émargement et attestation de présence
Profil du formateur

Webdesigner / E-mail designer ayant plus de 10 ans d'expérience en enseignement.

Marketing Digital
Web
Médias sociaux
Voir toutes les formations

Concevoir une maquette de newsletter avec Photoshop

1 jour 7 heures 600 € HT

Sélectionner une date dans la liste :

Vous devez sélectionner une date

Sélectionner votre profil :

Vous devez sélectionner votre profil

Concevoir une maquette de newsletter avec Photoshop

1 jour 7 heures 1 590 €HT*

* À partir de

Organisez cette formation dans votre entreprise selon vos plannings et les disponibilités de nos intervenants (dates continues ou discontinues).

Cliquez ici pour plus d'informations

Ce tarif inclut :

  • La préparation pédagogique de la formation par notre équipe (validation des pré-requis, définition des objectifs et des compétences visées
  • Un entretien téléphonique avec le formateur
  • L’animation de cette formation dans vos locaux pour 3 stagiaires maximum
  • Les supports de cours (si prévus)
  • La gestion administrative de la formation (frais de dossier, devis, conventions…)

Ce tarif n’inclut pas :

  • La mise à disposition du matériel nécessaire au bon déroulé de la formation (ordinateurs, vidéo-projecteur, logiciels…),
  • De rendez-vous de préparation avec le formateur,
  • La conception de supports spécifiques,
  • Les éventuels frais de déplacement et d’hébergement du formateur.

Important :

  • Ces formations peuvent également être organisées dans nos salles de formation exclusivement pour vos collaborateurs (dans ce cadre, nous nous chargeons de tous les aspects logistiques).
  • Dans le cadre de formations « intra / sur mesure », la durée des formations peut bien sûr être modifiée selon vos impératifs et objectifs

Fermer

Demander un devis