Share
Wat je gaat creërenIn deze tutorial zal ik u begeleiden bij het ontwerpen van een e-mailsjabloon met een schoon en feestelijk thema. We beginnen helemaal opnieuw en maken de lay-out met Adobe Photoshop. We zullen enkele basis- en tussenliggende technieken gebruiken om dit ontwerp te maken met conversie in gedachten. Laten we beginnen!
Om te kunnen volgen, heb je een aantal (gratis beschikbare) middelen nodig:
Begin met het maken van een nieuw Photoshop-document (Bestand> Nieuw ... ) met behulp van de hieronder getoonde instellingen. De meeste e-mailnieuwsbrieven hebben een gedefinieerde breedte van ongeveer 620 totale pixels. Ik gebruik meestal 600px, maar alles onder de 620px is prima. Wanneer dit is gebouwd in HTML, is het misschien toch wel responsief.
Laten we een aantal handleidingen instellen, zodat we onze veilige ruimte binnen de grenzen van 620px breed hebben. Ga naar Bekijken> Nieuwe gids ... en stel een aantal richtlijnen aan de zijkanten in en een hulplijn in het midden, zodat we dingen later gemakkelijk kunnen afstemmen.
Notitie: Richtlijnen gebruikt voor deze tutorial: verticaal op 40px, 80px, 340px, 600px en 640px.
Tip: U kunt ook de GuideGuide Photoshop-plug-in gebruiken om dit proces nog sneller te maken.
Door aan de etiquette van Photoshop te blijven, houden we de dingen overzichtelijk en kunnen we dus gemakkelijk navigeren en bewerken. Laten we drie lagengroepen maken met de naam "Header", "Message", "Best" en "Quote". Ga naar om groepen te maken Laag> Nieuw> Groep ... en geef elke een titel zoals vermeld. Om snel een groep te maken, klikt u op het mappictogram.
Je moet je achtergrond niet te chique of afleidend maken, omdat veel e-mailgebruikers het niet op kleinere schermen zullen zien. Ook vermeldenswaard is dat de achtergrond geen afbeelding moet zijn, omdat deze standaard op veel e-mailclients wordt geblokkeerd.
Laten we eerst de achtergrond van de e-mail instellen. Verander de voorgrondkleur in heel lichtblauw # f6f9fb en druk op Alt + Backspace om de laag "Achtergrond" te vullen. U kunt elke andere lichte schaduw gebruiken voor uw e-mail, maar het is beter om deze subtiele kleur te hebben die de ontvanger niet afleidt, maar toch een andere sfeer creëert.
Nu is het tijd om een achtergrond in te stellen in het veilige gebied waar alle e-mailinhoud wordt geplaatst. Kies het Rechthoekgereedschap (U) en teken een wit #FFFFFF rechthoek tussen de eerste en laatste verticale richtlijnen die 600px uit elkaar liggen.
De kop van onze e-mail is erg belangrijk en het is het cruciale punt waar de e-mailontvanger zal beslissen of het verder lezen de moeite waard is. Volgens deze gids van Nicole Merlin, e-mailexpert extraordinaire, is het belangrijk om dat te zijn duidelijk en transparant.
"Vermeld de afzender, snijd de pluisjes en kom meteen ter zake."
Voor deze tutorial zal ik eenvoudig een bedrijfsnaam en een link plaatsen voor mensen om de e-mail te openen in een webbrowser voor het geval deze niet correct wordt geladen via de e-mailclient. Daarnaast zal ik een enorme afbeelding opnemen met eenvoudige berichten die de sfeer bepalen en de bedoelingen van deze e-mail laten zien, die gaat over het wensen van een fijne vakantie.
Open de "Header" -groep en kies de Horizontaal tekstgereedschap (T). Misschien vindt u het beter om uw bedrijfsnaam te schrijven in plaats van een logo te gebruiken, omdat, zoals ik eerder heb gezegd, afbeeldingen kunnen worden uitgeschakeld wanneer uw e-mail wordt geopend, zodat het de ervaring kan verpesten omdat uw logo niet zichtbaar is.
Kies een lettertype dat u gebruikt voor uw merk en schrijf uw bedrijfsnaam, plaats het aan de linkerbovenkant en geef het wat ruimte rond. In mijn geval gebruikte ik Open Sans (Bold) 18px maat donkergrijs # 434343 voor de kleur.
Het is erg belangrijk om een link te bieden waar mensen op kunnen klikken of op kunnen tikken en de e-mail in hun browser kunnen openen in het geval deze niet erg goed in de e-mailclient wordt weergegeven. Gewoon een eenvoudige tekstlink zal het werk doen, vroeg geplaatst zodat scherm-lezers het meteen tegenkomen. Ik heb hetzelfde gebruikt Open Sans (Semibold) lettertype en veranderde de kleur naar helderder grijs # 666666 en verkleinde lettergrootte naar 13px. Plaats het uiteindelijk in de rechterbovenhoek van de e-mail.
Geweldig! Nu moeten we een afbeelding plaatsen om de aandacht van de ontvanger te trekken. We zullen een foto met kerstthema gebruiken, een gradiënteffect toevoegen en alles kopiëren.
Grijp de Rechthoekgereedschap (U) en teken een 600x300px middelgrote doos tussen de eerste en laatste richtlijnen. Maak vervolgens een nieuwe laag er bovenop en houd de alt toets en muis over de fotolaag totdat u een kleine pijl naar beneden ziet wijzen. Als je het ziet, klik je erop en je maakt een Knipmasker. Kies nu het Gradient Tool (G) en kies het standaardverloop van rood naar groen.
Maak nu het verloop door de muis van linksboven naar rechtsonder te slepen. Je krijgt zoiets als het onderstaande voorbeeld.
Download daarna Bokeh van String Lights op Tree-foto van Good Stock Photos en plaats het over de verlooplaag en maak er een Knipmasker ook voor deze laag. Eindelijk geraakt CMD + T en formaat van de foto wijzigen.
Pro tip: houd ingedrukt Verschuiving sleutel om proportioneel te tekenen / vergroten / verkleinen.
Zet nu de laagovervloeimodus op bedekking.
Laten we tenslotte onze belangrijkste boodschap schrijven. Ik gebruik wit #FFFFFF met het gedurfde, maar toch elegante lettertype Playfair Display (vet cursief) 52 px formaat om het feestelijke gevoel uit te beelden. Zorg er bij het ontwerpen van e-mailnieuwsbrieven voor dat je bericht kort en duidelijk blijft, zodat gebruikers het meteen begrijpen.
Een ander ding dat u in gedachten moet houden, is het ontwerpen van blokken die opnieuw kunnen worden gebruikt. We ontwerpen dit berichtblok bijvoorbeeld dat in een sjabloon kan worden omgezet, zodat gebruikers de kop, het hoofdkopie en de call-to-action-knop kunnen wijzigen zonder een ontwerper nodig te hebben, omdat alles vooraf is ontworpen. Ze kunnen ook zo'n blok dupliceren en verschillende berichten gebruiken.
Het is slim om uw e-mails in één kolom te ontwerpen en centraal uit te lijnen, zodat het gemakkelijk in een responsieve lay-out kan worden omgezet. Open de groep "Bericht" en kies de Horizontaal tekstgereedschap (T). Ik gebruik de typelaag die voor de bedrijfstitel wordt gebruikt opnieuw en vergroot de lettergrootte naar 32px en verander van gewicht naar ExtraBold.
Nu is het tijd om iets meer in detail te zeggen, wees niet te lang en probeer de aandacht van de lezer te trekken, zodat de lezer op de call-to-action-knop klikt die we in een oogwenk zullen ontwerpen. Gebruik hetzelfde Horizontaal tekstgereedschap (T) schrijf je kopie op, voor de mijne heb ik dezelfde kleur gebruikt als voor de link "Openen in browser" # 666666 en Open Sans (Regular) 18px grootte.
Geweldig! Je hebt de aandacht van de lezer en nu is het tijd om een call-to-action-knop in te voeren, zodat je e-mail ergens nuttigs naartoe leidt. Maak een nieuwe groep met de naam "CTA" en pak de Rechthoekgereedschap (U), verander daarna de voorgrondkleur naar een rood # de1816 dat staat voor de kerststemming en tekent een rechthoekige vorm. In mijn geval is dat zo 240x40px grootte. Kies dan de Horizontaal tekstgereedschap (T) en voer het bericht van de knop in. Ik heb wit gebruikt #FFFFFF Open Sans (Bold) 14px grootte.
Ten slotte moeten we het blok sluiten door het te scheiden met een lijn; zet de voorgrondkleur op lichtgrijs #eeeeee en kies de Lijngereedschap (U) met Gewicht ingesteld op 1px. Teken daarna een horizontale lijn tussen de eerste en laatste richtlijnen. Laat wat ruimte boven de streep.
Pro tip: houd ingedrukt Verschuiving om perfect rechte lijnen te tekenen.
Een van de meest voorkomende functies in e-mailsamenvattingsnieuwsbrieven is het verzenden van de nieuwste artikelen die lezers mogelijk hebben gemist of die daarin geïnteresseerd zijn. Wanneer u zo'n module ontwerpt, moet u er rekening mee houden dat het een dynamisch element is, dus u moet dit instellen de scène die de maker van de e-mail verlaat om de informatie te vervangen.
Dupliceer de eerder gebruikte kop van de berichtkop door op te raken CMD + J en sleep het naar de groep "Best". Verander daarna de titel en plaats deze consequent onder de regel, zodat je het verticale ritme behoudt.
Nu zullen we enkele beste artikelen van het jaar noemen. Voor deze tutorial gebruik ik eenvoudig artikelafbeeldingen, titels en beschrijvingen van Tuts + Web Design.
Maak een nieuwe groep met de naam "Artikel". Grijp de Rechthoekgereedschap (U) en, ingedrukt houden van de Verschuiving toets, teken a 140x140px grote doos. Kies vervolgens een artikelafbeelding en sleep deze naar uw Photoshop-venster, maak daarna een Knipmasker zoals we eerder deden en het formaat van de afbeelding indien nodig.
Super goed! Nu moeten we de titel van het artikel en de korte beschrijving invoeren, zodat de lezer snel een overzicht kan krijgen voordat hij klikt of tikt. Ik gebruik de kop van de kop van de sectie opnieuw door deze te dupliceren en de tekengrootte te verkleinen en ook de beschrijvingslaag uit de groep "Bericht" te dupliceren.
Minimaliseer de groep "Artikel" en dupliceer nog twee keer door op te slaan CMD + J. Verplaats daarna deze gedupliceerde groepen onder de eerste en je zult de titels, afbeeldingen en beschrijvingen van deze gedupliceerde elementen moeten veranderen.
Kopieer tenslotte de 'CTA'-groep en de regellaag door ze te selecteren en te raken CMD + J, plaats daarna deze lagen in de groep "Best" en plaats ze onder de artikelen met voldoende ruimte over.
Het einde is heel nabij. Laten we een laatste blok in onze nieuwsbrief plaatsen, een inspirerende quote met een secundaire oproep tot actie om het te tweeten. Best practice is om de belangrijkste call-to-action aan het einde van de nieuwsbrief te herhalen, maar we zullen deze regel hier overtreden en een inspirerend citaat gebruiken om de lezer te stimuleren.
Open de groep "Offerte", kies de Horizontaal tekstgereedschap (T) en elke quote die je leuk vindt van BrainyQuote. Kopieer het citaat en noteer het met hetzelfde elegante lettertype dat we hebben gebruikt voor de afbeelding helemaal bovenaan onze nieuwsbrief. In mijn geval is dat zo Playfair-display (cursief) 24 px grootte en grijze kleur zoals gebruikt voor de kopie # 666666 vroeger.
Ga naar de Twitter-website en kopieer een tweet-knop. Maak een screenshot door op te raken Shift + Ctrl + CMD + 4 en de knop Tweet selecteren. Plak hem daarna en plaats onder het citaat.
Nog een ding. Elke e-mailnieuwsbrief moet een optie hebben waarop mensen zich kunnen afmelden. Het is ook goed om aan te geven waarom de ontvanger de e-mail in de eerste plaats ontvangt. Hergebruik de "Open in browser" -link vanaf de top, dupliceer het en plaats het onder de achtergrond van de inhoud.
Ons afgewerkte ontwerpDat is het! We zijn klaar met het ontwerp van de e-maillay-out, bekijken nu de lagen, verwijderen de onnodige en brengen deze over aan uw ontwikkelaar, of nog beter zelf coderen. Ik heb enkele basistechnieken aangeroerd en mijn workflow voor het ontwerpen van de lay-out van e-mail getoond, ik hoop dat je iets hebt geleerd.
Ik zou graag uw feedback horen en de resultaten van deze tutorial zien!
Accentsconagua