Share
Ce que vous allez créerDans ce tutoriel, je vais vous guider dans le processus de conception d'un modèle de courrier électronique à thème propre et festif. Nous allons tout recommencer à zéro, en rédigeant la mise en page avec Adobe Photoshop. Nous allons utiliser certaines techniques de base et intermédiaires pour créer cette conception avec conversion à l’esprit. Commençons!
Afin de suivre, vous aurez besoin de certains actifs (disponibles gratuitement):
Commencez par créer un nouveau document Photoshop (Fichier> Nouveau… ) en utilisant les paramètres indiqués ci-dessous. La majorité des newsletters ont une largeur définie d’environ 620 pixels. J'utilise habituellement 600px, mais tout ce qui est inférieur à 620px convient. Quand cela est construit en HTML, il pourrait bien être réactif quand même.
Définissons quelques guides afin que notre zone de sécurité soit conçue dans les limites de 620 pixels de largeur. Aller à Voir> Nouveau guide… et définir des lignes directrices sur les côtés ainsi qu'une ligne directrice au milieu afin que nous puissions facilement aligner les choses plus tard.
Remarque: Instructions utilisées pour ce tutoriel: vertical à 40px, 80px, 340px, 600px et 640px.
Pointe: Vous pouvez également utiliser le plugin GuideGuide Photoshop pour rendre ce processus encore plus rapide..
En nous conformant à l'étiquette de Photoshop, nous organiserons les choses et nous pourrons ainsi naviguer et éditer facilement. Créons trois groupes de couches nommés "En-tête", "Message", "Meilleur" et "Citation". Pour créer des groupes, allez à Couche> Nouveau> Groupe… et donnez à chacun un titre comme mentionné. Pour créer rapidement un groupe, cliquez simplement sur l'icône du dossier..
Vous ne devez pas rendre votre arrière-plan trop compliqué ou distrayant, car de nombreux utilisateurs de courrier électronique ne le verront pas sur des écrans plus petits. Il convient également de mentionner que l’arrière-plan ne doit pas être une image car il sera bloqué par défaut sur de nombreux clients de messagerie..
Définissons d'abord le fond de l'email. Changer la couleur de premier plan en bleu très clair # f6f9fb et frapper Alt + Retour arrière pour remplir le calque «Background». Vous pouvez utiliser toute autre teinte claire pour votre courrier électronique, mais il est préférable d’avoir cette couleur subtile qui ne distrait pas le destinataire mais qui crée tout de même une ambiance différente..
Il est maintenant temps de définir un arrière-plan dans la zone sécurisée où tout le contenu du courrier électronique sera placé. Choisissez le Outil Rectangle (U) et dessine un blanc #FFFFFF rectangle entre la première et la dernière ligne directrice verticale distante de 600px.
L'en-tête de notre courrier électronique est très important et constitue le point crucial où le destinataire du courrier électronique décidera si la lecture en vaut la peine. Selon ce guide rédigé par Nicole Merlin, experte en e-mail extraordinaire, il est important d’être clair et transparent.
"Indiquez l'expéditeur, coupez les peluches et allez droit au but."
Pour ce tutoriel, je vais simplement mettre un nom de société et un lien permettant aux utilisateurs d'ouvrir l'e-mail dans un navigateur Web au cas où il ne se chargerait pas correctement via le client de messagerie. De plus, j'inclurai une énorme image avec une simple messagerie qui met l'ambiance et indique l'intention de cet email, qui consiste à souhaiter de joyeuses fêtes..
Ouvrez le groupe "En-tête" et sélectionnez le Outil de type horizontal (T). Vous trouverez peut-être préférable d'écrire le nom de votre entreprise plutôt que d'utiliser un logo, car, comme je l'ai déjà mentionné, les images risquent d'être désactivées à l'ouverture de votre courrier électronique, ce qui peut gâcher l'expérience, car votre logo ne sera pas visible..
Choisissez une police que vous utilisez pour votre marque et écrivez le titre de votre entreprise, placez-la en haut à gauche et donnez-lui un peu d'espace. Dans mon cas j'ai utilisé Open Sans (Bold) 18px taille gris foncé # 434343 pour la couleur.
Il est très important de fournir un lien sur lequel les gens peuvent cliquer ou appuyer et ouvrir l'email dans leur navigateur au cas où il ne serait pas très bien rendu dans le client de messagerie. Un simple lien texte fera l'affaire, placé tôt pour que les lecteurs d'écran le rencontrent immédiatement. J'ai utilisé le même Open Sans (Semibold) police et a changé la couleur en gris plus clair # 666666 et réduit la taille de la police à 13px. Enfin placez-le dans le coin en haut à droite de l'email.
Impressionnant! Nous devons maintenant placer une image pour attirer l'attention du destinataire. Nous allons utiliser une photo sur le thème de Noël, en ajoutant un effet de dégradé et une copie au-dessus de tout.
Prenez le Outil Rectangle (U) et dessine un 600x300px taille de boîte entre la première et la dernière ligne directrice. Créez ensuite un nouveau calque par dessus et maintenez le bouton enfoncé. Alt clé et souris sur la couche de photo jusqu'à ce que vous voyiez une petite flèche pointant vers le bas. Lorsque vous le voyez, cliquez dessus et vous créerez un Masque d'écrêtage. Maintenant, choisissez le Outil de dégradé (G) et choisissez le dégradé par défaut du rouge au vert.
Maintenant, créez le dégradé en faisant glisser votre souris de haut en bas à droite. Vous obtiendrez quelque chose comme l'exemple ci-dessous.
Après cela, téléchargez Bokeh of String Lights sur la photo d’un arbre dans Good Stock Photos et placez-le sur le calque en dégradé pour créer un Masque d'écrêtage pour cette couche aussi. Enfin frappé CMD + T et redimensionner la photo.
Conseil pro: maintenez Décalage touche pour dessiner / redimensionner proportionnellement.
Définissez maintenant le mode de fusion des calques sur Recouvrir.
Enfin, écrivons notre message principal. J'utilise du blanc #FFFFFF avec la police de caractères audacieuse mais élégante Présentoir Playfair (italique gras) 52px taille pour dépeindre le sentiment de fête. Lors de la conception des newsletters, veillez à ce que votre message soit clair et concis afin que les utilisateurs puissent le recevoir immédiatement..
Une autre chose à garder à l'esprit est la conception de blocs pouvant être réutilisés. Par exemple, nous allons concevoir ce bloc de messages qui peut être transformé en un modèle afin que les utilisateurs puissent modifier le bouton titre, copie principale et appel à l'action sans avoir besoin d'un concepteur, car tout sera conçu à l'avance. Ils peuvent également dupliquer un tel blocage et utiliser différents messages..
Il est judicieux de concevoir vos courriels dans une colonne et de les aligner de manière centralisée afin de pouvoir les transformer facilement en présentation réactive. Ouvrez le groupe "Message" et sélectionnez le Outil de type horizontal (T). Je vais réutiliser le calque de type utilisé pour le titre de la société et augmenter la taille de la police à 32px et changer le poids en Extrabold.
Maintenant, il est temps de dire quelque chose de plus en détail, ne soyez pas trop long et essayez d'attirer l'attention du lecteur, amenant le lecteur à cliquer sur le bouton d'appel à l'action que nous allons concevoir dans un instant. En utilisant le même Outil de type horizontal (T) écrivez votre copie, pour le mien j'ai utilisé la même couleur que pour le lien «Ouvrir dans le navigateur» # 666666 et Open Sans (Regular) 18px Taille.
Impressionnant! Vous avez l'attention du lecteur et il est maintenant temps de mettre un bouton d'appel à l'action afin que votre courrier électronique mène quelque part utile. Créez un nouveau groupe appelé "CTA" et récupérez le Outil Rectangle (U), après ce changement de couleur de premier plan à un rouge # de1816 cela représente l'ambiance de Noël et dessine une forme de rectangle. Dans mon cas c'est 240x40px Taille. Puis choisissez le Outil de type horizontal (T) et entrez le message du bouton. J'ai utilisé du blanc #FFFFFF Open Sans (Bold) 14px Taille.
Enfin, nous devons fermer le bloc en le séparant par une ligne. définir la couleur de premier plan sur gris clair #eeeeee et choisissez le Outil Ligne (U) avec Poids mis à 1px. Après cela, tracez une ligne horizontale entre la première et la dernière ligne directrice. Laissez un peu d'espace au dessus de la ligne.
Conseil pro: maintenez Décalage dessiner des lignes parfaitement droites.
Une caractéristique très courante des newsletters par courrier électronique consiste à envoyer les derniers articles que les lecteurs ont peut-être manqués ou qui pourraient l’intéresser. Lors de la conception d’un tel module, vous devez garder à l’esprit que ce sera un élément dynamique et que vous la scène quittant le créateur d'email pour remplacer l'information.
Dupliquez le calque titre du message précédemment utilisé en appuyant sur CMD + J et en le faisant glisser dans le "meilleur" groupe. Après cela, changez son titre et placez-le constamment en dessous de la ligne pour conserver le rythme vertical..
Nous allons maintenant énumérer quelques-uns des meilleurs articles de l'année. Pour ce tutoriel, j'utiliserai simplement des images d'articles, des titres et des descriptions de Tuts + Web Design.
Créez un nouveau groupe appelé «Article». Prenez le Outil Rectangle (U) et en maintenant le Décalage clé, dessine un 140x140px boîte de taille. Ensuite, choisissez une image d'article et faites-la glisser vers votre fenêtre Photoshop, puis créez un Masque d'écrêtage comme nous l'avons fait auparavant et redimensionner l'image si nécessaire.
Génial! Nous devons maintenant entrer le titre de l'article et une courte description afin que le lecteur puisse obtenir un aperçu rapide avant de cliquer ou d'appuyer. Je vais réutiliser la couche d'en-tête de section en la dupliquant, en réduisant la taille de la police et en dupliquant la couche de description du groupe "Message"..
Réduisez au minimum le groupe “Article” et dupliquez-le encore deux fois en appuyant sur CMD + J. Après cela, déplacez ces groupes dupliqués en dessous du premier et vous devrez changer les titres, les images et les descriptions de ces éléments dupliqués..
Enfin, dupliquez le groupe et la couche "CTA" en les sélectionnant et en appuyant sur CMD + J, après cela, placez ces calques dans le groupe «Meilleur» et placez-les sous les articles en laissant suffisamment d'espace.
La fin est très proche. Mettons un dernier bloc à notre bulletin d’information, une citation inspirante avec un second appel à l’action pour le tweeter. La meilleure pratique consiste à répéter le principal appel à l'action à la toute fin du bulletin d'information, mais nous allons casser cette règle ici et utiliser une citation inspirante pour donner de l'énergie au lecteur..
Ouvrez le groupe "Devis", choisissez le Outil de type horizontal (T) et toute citation que vous aimez de BrainyQuote. Copiez la citation et notez-la en utilisant le même caractère élégant que celui que nous avons utilisé pour le graphique tout en haut de notre bulletin d'information. Dans mon cas c'est Playfair Display (Italic) 24px taille et couleur grise utilisées pour la copie # 666666 plus tôt.
Rendez-vous sur le site Twitter et copiez un bouton tweet. Prendre une capture d'écran en frappant Maj + CTRL + CMD + 4 et en sélectionnant le bouton Tweet. Après cela, collez-le et placez-le ci-dessous..
Une dernière chose. Chaque bulletin électronique doit avoir une option permettant aux personnes de se désabonner. Il est également bon de dire pourquoi le destinataire reçoit le courrier électronique en premier lieu. Réutilisez le lien «Ouvrir dans le navigateur» à partir du haut, dupliquez-le et placez-le sous l'arrière-plan du contenu..
Notre design finiC'est tout! Nous en avons terminé avec la conception de la mise en page des e-mails. Passez en revue les couches, supprimez celles qui ne sont pas nécessaires et remettez-les à votre développeur, ou mieux, codez-les vous-même. J'ai abordé quelques techniques de base et démontré mon flux de travail pour la conception de la mise en page des e-mails. J'espère que vous avez appris quelque chose..
J'aimerais entendre vos commentaires et voir les résultats de ce tutoriel.!
Accentsconagua