Concevoir une maquette de newsletter avec Photoshop

15 rue de Turbigo, 75002 Paris
Tél. : 01 40 26 00 99
[email protected]
15 rue de Turbigo, 75002 Paris
www.pyramyd-formation.com
Tél. : 01 40 26 00 99
15 rue de Turbigo, 75002 Paris
Tél.
:au
01 capital
40 26 00
99 000 €
SAS
de 110
[email protected]
RCS
Paris
n°
351
996
509
www.pyramyd-formation.com
[email protected]
NAF : 8559A
www.pyramyd-formation.com
TVA
Intracom
FR110
09000
351 996
SAS au
capital: de
€ 509
SIRET
:
351
996
509
00029
RCS Paris n° 351 996 509
SAS au capital de 110 000 €
NAF : 8559A
RCS
Paris n°
996 509
Organisme
de351
TVA Intracom
:formation
FR 09 351 996 509
NAF 75
: 8559A
n°11
15095
75
SIRET : 351 996 509 00029
TVA Intracom : FR 09 351 996 509
SIRET : 351 996 509 00029
Organisme de formation
n°11 75 15095 75
Organisme de formation
n°11 75 15095 75
Concevoir une maquette de
newsletter avec Photoshop
Maîtriser la conception graphique d’un e-mailing ou d’une newsletter avec Photoshop
1 jour / 7 HEURES
600 € HT
OBJECTIFS
MÉTHODES PÉDAGOGIQUES
¬¬ 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
¬¬
CODE : WM083
HTML
Réaliser une maquette de newsletter responsive
avec Photoshop
Alternance de théorie, de démonstration par l’exemple
et de mise en pratique grâce à de nombreux exercices.
MOYENS TECHNIQUES / SUIVI
¬¬ Logiciel : Photoshop
Conditions générales : voir page 9.
PROFIL DU FORMATEUR
PUBLIC CONCERNÉ
Graphistes, webdesigners ou toute personne travaillant
sur des CMS (WordPress, Drupal)…
Webdesigner / E-mail designer ayant plus de 10 ans
d’expérience en enseignement.
PRÉ-REQUIS
Il est nécessaire d’avoir suivi le stage “Les
fondamentaux de l’e-mailing” (page 110) 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
• 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
• • • • • • • • • • • • • • • • • • • • “pixel près”
PLANNING 2016 / 2017
PYRAMYD NTCV est une marque
du groupe
www.abilways.com
PYRAMYD NTCV est une marque
du groupe
PYRAMYD NTCV est une marque
www.abilways.com
du groupe
>
7
>
>
octobre
2016
>
2
>
>
>
27
février
juin
2017
2017
>
>
>
20
>
>
octobre
2017