Share
Vad du ska skapaI denna handledning kommer vi att lära oss hur du skapar en enkel och djärv nyhetsbrevsmall med Sketch.
Om du deltar i att skicka ut nyhetsbrev från e-post, bör de betraktas som en viktig punkt i dina marknadsföringsstrategier. De ger oss direkt kontakt med potentiella kunder, men vi måste uppmärksamma hur vi utformar dem för att kommunicera ordentligt, fånga uppmärksamhet och (viktigast) uppfylla våra mål.
Här är kortfattningen bakom denna designövning: låt oss föreställa oss att vi är ett företag som erbjuder online-lärande resurser. Vi vill komma i kontakt med våra potentiella kunder och avslöja fördelarna med att använda vår plattform. I den här situationen kan vi börja med att skapa ett rent men effektivt e-nyhetsbrev med Sketch för att uppfylla våra behov.
Vi ska börja helt från början och använda de vanligaste verktygen som vi har i Sketh för att skapa vår mall. Du kommer bli förvånad över hur lätt det blir!
För att kunna slutföra denna handledning måste du hämta de tillgängliga bilagorna. I zip-filen hittar du lite text och bilderna vi ska använda i följande steg.
Jag ska använda Helvetica Neue som standard teckensnitt men om du inte har det tillgängligt, försök med Helvetica eller Arial.
Notera: kom ihåg att vara en ansvarsfull designer! Därmed menar jag: kom ihåg att byta namn på dina lager med beskrivande namn, gruppera lagren och organisera innehållet. Dina medarbetare kommer tacka för det, lita på mig.
Är du redo? Låt oss börja!
Låt oss börja med att skapa en ny tavla. Gå till Infoga> Konstbräda (A) från huvudmenyn eller verktygsfältet. Klicka nu och dra in i Sketch's canvas för att skapa en 620 x 3000px ritytan. Om du har svårt, kom ihåg att du kan ändra dessa värden genom Inspektör till höger om skärmen. Du kan också ändra typsnittets namn från Laglista på vänster sida av skärmen.
Tips: Ett gemensamt tillvägagångssätt när du utformar e-mallar är att börja med en dokumentbredd på 550-650px. Läs mer om e-postmarknadsföring i den här stora artikeln av Nicole Merlin.
Låt oss nu skapa några guider som vi ska använda som en hänvisning till att korrekt placera våra element, vilket resulterar i en sund och balanserad design. Var ska vi placera guiderna? Låt oss tänka lite:
En e-postmall kan utformas på många sätt. En av de vanligaste är att helt enkelt skapa en 1-kolonnlayout. Den här layouten låter oss styra användaren på ett enklare sätt, med hjälp av ett vertikalt flöde av innehållsblock, en efter en. Dessutom ger designen med en enkelkolonnstruktur i åtanke möjlighet att enkelt anpassa den till olika enheter.
I denna övning är vi dock här för att träna lite mer så vi ska skapa en 3-kolonnlayout. Förlåt!
Aktivera reglerna och börja skapa guider. Gå till Visa> Visa linjaler (^ R). Klicka nu på den horisontella linjalen vid 30px, 200px, 225px, 395px, 420px och slutligen på 590px. Du kan flytta linjalerna genom att dra och flytta dem runt. Du kan också flytta dina egna guider på ett liknande sätt. För att ta bort guider, dra dem bortom linjalerna.
Rubriken i vår e-post är mycket viktig. Det är den första kontakten vi har med användaren och därför måste vi kommunicera med vårt huvudförslag. Det är också ett bra beslut att visa företagets namn och en bra slogan följt av en CTA-knapp som uppmuntrar att registrera eller få mer information om oss.
För det första bör vi lägga till en preheader, en enkel textlänk som tillåter användaren att komma åt webbversionen av vårt nyhetsbrev om deras e-postklient inte tillåter dem att se det korrekt.
Välj Textverktyg (T) och klicka var som helst på duken för att infoga ett textlager. Lägg märke till hur Inspektör har ändrats för att visa dig alla textlageregenskaper. Börja skriva "Problem med att visa det här e-postmeddelandet? Visa det online ".
Ändra dess färg till # 8FA6B3 och ställa in Storlek till 11px. Välj nu bara "Visa den online" delen och ändra dess färg till # FF736D. Håll det valda. Klicka på alternativ ikonen bredvid Färg och klicka på den andra Dekoration möjlighet att understryka texten.
Flytta objektet från toppen av tavlan och lämna a 30px marginal.
Skapa en 620x500px rektangel med hjälp av Rektangel (R) verktyg och placera det precis under textlänken och lämna 30px mellan dem. Välj rektangeln och ändra dess färg till # F5F7F8 använda Inspektör panel. Avmarkera kryssrutan gränser alternativet att ta bort det.
Öppna "svg-ikonen" ikoner som bifogas denna handledning. Markera alla ikoner, kopiera och klistra in dem i det dokument vi designar vår mall. Vi ska använda dem för att dekorera bakgrunden till vår rubrik.
Jag har satt ikonernas grupp på X = -50 och Y = 0 (leta efter Placera egenskaper på inspektionspanelen), men gör det enkelt att anpassa sig själv.
Tips: Du ser att vissa delar av våra ikoner ligger utanför skylten och Sketch automatiskt döljer dem. Inget är fel. Programmet förstår att du använder en tavla för att begränsa ditt designområde så det döljer de delar av element som är placerade mellan tavelområdet och resten av duken. Försök flytta hela gruppen utanför tavlan för att se den helt. Du ser? Glöm inte att flytta tillbaka till sin ursprungliga position!
På laglistan välj mappen "ikoner" och den rektangel du tidigare skapat. Gruppera dem med ett av de tillgängliga alternativen i Sketch. Använd till exempel Grupp ikon i Toolbar eller använd (⌘-G) tangentbordsgenväg för att göra det. Flytta gruppen ner till botten på Laglista, byt namn på det till något som "Bakgrund" och använd den lilla pilen till vänster för att avslöja innehållet.
Välj rektangeln och gå till Layer> Använd som mask.Vänta på magiken. Skissen kommer att använda rektangeln för att maskera varje lager ovanför det på Laglista. Om vi tidigare grupperade innehållet vi vill maskeras och masken tillsammans, påverkar vi inte elementen utanför gruppen. Ganska bra tips!
Nu ska du ha ikonerna redan maskerade som följande bild:
Öppna "logotypen" svg-filen och kopiera logotypen till vårt dokument. Jag vet att det är för stort, så gå till Inspektionspanel att ändra dess dimensioner till 90 x 31px. Flytta den till X = 265, Y = 100.
Skapa ett nytt textlager och ställ in dess bredd till 560px. Flytta den till X = 30 och Y = 220. Redigera nu texten och ändra den till "Din plats för att upptäcka verkliga världskunskaper". Ange dess egenskaper till Vikt = fet, Färg = # 424242, Storlek = 48, Linje = 45 och Alignment = Center. Välj bara det "riktiga" ordet och ändra det till kursiv.
Nu ska vi utforma vår primära åtgärdsknapp. Rita en 220x45px rektangel. Gå till inspektionspanelen och ställ in Radie till 30. Byta Fylla till # D92B2B. Flytta den under slogan texten, lämnar runt x 50 bildpunkter mellan de två objekten.
Vår knapp har ingen mening om vi lämnar den tom! Vi behöver en uppmaning till handling text, några ord som fokuserar på huvudförslaget och tar tag i användarens uppmärksamhet. Jag skulle gärna vilja prata mer om den här typen av marknadsföring, men för att påskynda lite ska vi helt enkelt skapa ett textlager, skriv sedan "Bli med oss från 10 $ / månad".
Ändra egenskaperna till Vikt = fet, Färg = #FFFFFF och Storlek = 15. Flytta den till X = 225, Y = 375, precis inne i vår runda rektangel.
Vi ska använda den här knappen igen senare, så det är en bra idé att spara det som en symbol. Gruppera text- och rektangelskikten och klicka på Skapa symbol alternativet från huvudverktygsfältet. Lägg märke till hur mappens färg på Laglista har ändrats från blått till lila.
Jag tror att vi behöver lite mer kontrast mellan förgrundsinnehållet och bakgrundsbilden, så låt oss göra en mindre förändring. Gå till Laglista, expandera mappen Bakgrund och duplicera rektangeln du använder för att maskera bakgrundsikonen. Flytta den till toppen av gruppen, gå till Inspektör panel och förändring blandning till Lätta och Opacitet till 50%. I slutet borde du få något så här:
Vår rubrik är klar!
Nu när vi har användarens uppmärksamhet behöver vi prata lite om oss själva och våra tjänster. Vilka vi är? Vad gör vi? Vi måste svara på dessa frågor på ett direkt, kortfattat sätt och försöka visa några ytterligare fördelar med att använda vår plattform.
Skapa två nya textlager. Ställ in deras bredd till 480 x. Du kan skriva vad du vill, men jag har använt texten som du hittar i den bifogade textfilen.
Gjort? Använd nu följande positioner och egenskaper:
Rita en 100px bred linje (Infoga> Form> Linje) och set Tjocklek till 2px och gräns färg till #E24A4A. Placera det mellan de två textskikten och lämna ett avstånd på 25px mellan varje element. Kom ihåg: om du trycker på Alt tangenten medan du flyttar markören kan du se avstånden i pixlar mellan de valda elementen.
Vi ska replikera den tidigare strukturen ett par gånger i hela denna handledning. Men för nu väljer du linjen och textlagren och grupperar dem. Kom ihåg att vara organiserad och ge den ett namn. Jag har använt "första block".
Välj textskiktet "Sök efter online ...", gå till Inspektionspanel och skapa en ny textstil genom att klicka på "Inga textstilar", då Skapa ny textstil. Gör detsamma med det andra textlagret. Nu ska varje lager som är kopplat till dessa stilar uppdateras omedelbart när du redigerar sina egenskaper.
Notera: Tänk på att Sketch inte kan spara textstilar med flera teckensnittvikter applicerade i samma lager. Jag säger att jag inte kommer att använda stilar för denna handledning. Om du vill lära dig lite mer om stilar, kolla in vår A till Z guide för skiss.
Öppna svg-filen "Highlights-icons". Kopiera de tre ikonerna du hittar i dokumentet och klistra in dem i din design. Använd guiderna som du redan har att justera dem som om du använde en 3-kolumnlayout, precis under föregående block. Placera dem inte för nära det blocket, lämna utrymme runt omkring 40 bildpunkter. Om du behöver hjälp, kolla bara följande bild:
Skapa tre 170 bildpunkter breda textskikt med Helvetica Neue Bold, Storlek = 15, Linje = 18, Färg = # 424242 och Alignment = Center. Lägg dessa element runt 30px under ikonerna med hjälp av guiderna och börja skriva - eller kopiera texten från den bifogade filen!
Ett annat block slutade!
En vanlig funktion i nyhetsbrev är att skicka ut de senaste artiklarna eller innehåll som läsarna skulle vara intresserade av. Så efter vår primära CTA och den del där vi pratar lite om oss, låt oss skapa ett block där vi visar de senaste lektionerna som finns tillgängliga på vår inlärningsplattform.
Börja med att duplicera det "första blocket" du redan gjorde. Lägg det under de föregående blocken, 40 bildpunkter marginal och använd innehållet inuti .Text fil för att ändra textlagren. Det borde vara något så här:
Gå till mappen "lektioner" i källfilerna och importera alla bilder till ditt dokument genom Infoga> Bild. Nu har du sju bilder, 620px breda. Vi ska använda en av dem i full storlek och ändra storlek på resten för att passa in i vår 3-kolumnlayout.
Låt oss lägga till lite text för vår stora bild. Sätt in tre textlager, använd textfilen en gång till och ställ in egenskaperna och positionerna enligt följande:
Vi behöver några fler textlager för de andra lektionerna vi visar. Vi gör det igen; sätt in tre textlager, skriv vad du vill eller kopiera texter från den angivna filen. Ange deras egenskaper och positioner med hjälp av följande bild som referens och upprepa processen fem gånger för att slutföra resten av lektionerna du visar.
Ett annat block slutade. Ta en stund att organisera dina lager och gå vidare till nästa del!
Jag vet att vår e-postmall är ... lång. Men det är inte ett problem om vi vet hur vi ska hantera det! Användarna måste bläddra hela vägen ner genom innehållet, så det är en bra idé att erbjuda en enkel åtkomst till ett annat tilltalande utan att behöva rulla hela vägen tillbaka till toppen av e-postmeddelandet.
Kommer du ihåg det första blocket du duplicerade tidigare? Gör det igen, flytta det under "lektionsblocket" och lämna en marginal runt om 40 bildpunkter och ändra dess innehåll enligt följande:
Sätt in a 620x243px rektangel och fyll den med # F5F7F8. Lägg nu till ett textlag och ändra dess innehåll och egenskaper med hjälp av följande bild som referens:
Gå till Infoga> Symboler och välj den CTA-knappen du skapade tidigare. Lägg det under föregående stycke.
Vi är nästan färdiga!
Okej, vi har vårt huvudblock och ett samtal till handling. Sedan lade vi till några sekundära meddelanden och lite mer innehåll. Senare pratade vi igen om vårt huvudförslag och upprepade uppmaningen till handling. Nu är det dags att utforma sidfoten och avsluta vår mall!
Skapa en 620x130px rektangel. Fyll den med # 555E68 och sätt det under CTA-blocket. Skapa sedan en annan 620x45px rektangel och fyll den med # 383E44. Du borde sluta med något så här:
Importera "logotyp-vita" filen i ditt dokument och flytta den till X = 265 och Y = 2787.
Låt oss lägga till den sista texten. Sätt in tre textlager och ställ in deras egenskaper och positioner enligt följande:
Det är inte nödvändigt, men du kan justera tavlanens höjd så att den bara matchar det utrymme du verkligen behöver. Du kan göra det genom att välja det på Laglista och ändra sin höjd på Inspektör panel. Jag har ändrat den till Höjd = 2937px.
Så här ser slutprodukten ut.
Jag hoppas att du haft denna handledning. Låt mig veta om du fastnar eller behöver fråga om något. Har du en idé för min nästa handledning? Lämna en kommentar! Jag ser fram emot att se hur du går vidare!
Accentsconagua