Share
Ce veți creaÎn acest tutorial vă voi îndruma prin procesul de proiectare a unui șablon de e-mail curat și festiv. Vom începe în întregime de la zero, redactând aspectul cu Adobe Photoshop. Vom folosi câteva tehnici de bază și intermediare pentru a crea acest design cu o conversie în minte. Hai sa incepem!
Pentru a urmări de-a lungul timpului, veți avea nevoie de anumite active (disponibile în mod liber)
Începeți prin crearea unui nou document Photoshop (Fișier> Nou ... ) folosind setările de mai jos. Majoritatea buletinelor de știri de e-mail au o lățime definită de aproximativ 620 de pixeli totali. Eu folosesc de obicei 600 pixeli, dar nimic sub 620 de pixeli este bine. Când acest lucru este construit în HTML, ar putea fi bine recepționat oricum.
Să stabilim niște ghidaje astfel încât zona noastră sigură să fie proiectată în limitele de lățime de 620 pixeli. Mergi la Vizualizare> Ghid nou ... și stabiliți niște linii directoare pe laturi, precum și o orientare în mijloc, astfel încât să putem ușor alinia lucrurile mai târziu.
Notă: Linii directoare utilizate pentru acest tutorial: vertical la 40px, 80px, 340px, 600px și 640px.
Bacsis: De asemenea, puteți utiliza pluginul GuideGuide Photoshop pentru a face acest proces și mai rapid.
Prin lipirea etichetei Photoshop vom păstra lucrurile organizate și, prin urmare, ușor de navigat și editat. Să creăm grupuri cu trei straturi numite "Header", "Message", "Best" și "Quote". Pentru a crea grupuri, mergeți la Layer> Nou> Grup ... și dați fiecăruia un titlu așa cum este menționat. Pentru crearea rapidă a unui grup, faceți clic pe pictograma dosarului.
Nu trebuie să vă faceți fundalul prea fantezie sau distragere deoarece mulți utilizatori de e-mail nu vor vedea pe ecranele mai mici. De asemenea, merită menționat faptul că fundalul nu trebuie să fie o imagine, deoarece va fi blocat implicit pe mai mulți clienți de e-mail.
Să setăm mai întâi fundalul e-mailului. Modificați culoarea primului rând pe albastru # f6f9fb și lovit Alt + Backspace pentru a umple stratul "Fundal". Puteți folosi orice altă nuanță de lumină pentru e-mailul dvs., dar este mai bine să aveți această culoare subtilă care nu distrage atenția destinatarului, dar creează încă o stare de spirit diferită.
Acum este timpul să setați un fundal în zona de siguranță în cazul în care conținutul de e-mail va fi pus. Alegeți Instrumentul dreptunghiular (U) și trageți un alb #FFFFFF dreptunghi între prima și ultima orientări verticale care sunt la distanță de 600 de pixeli.
Antetul e-mailului nostru este foarte important și este punctul crucial în care destinatarul de e-mail va decide dacă lectură mai mult merită timpul lor. În conformitate cu acest ghid de Nicole Merlin, e-mail expert extraordinaire, este important să fie clar și transparent.
"Explicați-l pe expeditor, tăiați puful și ajungeți direct la punct."
Pentru acest tutorial voi pune pur și simplu un nume de companie și un link pentru oameni pentru a deschide e-mailul într-un browser web, în cazul în care nu se încarcă corect prin intermediul clientului de e-mail. În plus, voi include o imagine uriașă cu mesaje simple care stabilesc starea de spirit și arătând intențiile acestui e-mail, ceea ce înseamnă că doriți să vă bucurați de sărbători fericite.
Deschideți grupul "Antet" și alegeți Instrument tip orizontal (T). S-ar putea să fiți mai bine să scrieți numele firmei dvs. decât să utilizați un logo deoarece, așa cum am menționat anterior, este posibil ca imaginile să fie dezactivate atunci când e-mailul dvs. este deschis, astfel încât să poată ruina experiența deoarece logo-ul dvs. nu va fi vizibil.
Alegeți un font pe care îl utilizați pentru marca dvs. și scrieți titlul companiei dvs., plasați-o pe partea stângă sus și dați-i puțin spațiu. În cazul meu, am folosit Deschidere Sans (Bold) 18px dimensiune gri închis # 434343 pentru culoare.
Este foarte important să oferiți o legătură pe care oamenii pot să o facă sau să apese și să deschidă e-mailul în browser-ul lor, în cazul în care nu se face foarte bine în clientul de e-mail. Doar un simplu link text va face loc de muncă, plasat pe timpuriu, astfel încât cititorii de ecran se întâlnesc imediat. Am folosit același lucru Open Sans (Semibold) font și a schimbat culoarea la gri mai strălucitor # 666666 și dimensiunea fontului redus la 13px. În final, plasați-l în colțul din dreapta sus al e-mailului.
Minunat! Acum trebuie să plasăm o imagine pentru a atrage atenția destinatarului. Vom folosi o fotografie tematică de Crăciun, adăugând un efect de gradient și copiați deasupra tuturor.
Prindeți Instrumentul dreptunghiular (U) și trageți a 600x300px cutie între prima și ultima orientare. Apoi creați un strat nou deasupra acestuia și țineți apăsat Alt cheia și mouse-ul peste stratul de fotografie până când vedeți o mică săgeată îndreptată în jos. Când îl vedeți, faceți clic pe el și veți crea un Mască de tăiere. Acum alegeți Instrument de gradient (G) și alegeți gradientul implicit de la roșu la verde.
Acum faceți gradient glisând mouse-ul din stânga sus în dreapta jos. Vei primi ceva de genul exemplului de mai jos.
După aceea, descărcați Bokeh of String Lights pe o copie a copacului de la Photos Stock și plasați-o peste stratul de gradient creând o Mască de tăiere pentru acest strat. În sfârșit, a lovit T Cmd + și redimensionați fotografia.
Pro tip: țineți apăsat Schimb cheie pentru a desena / redimensiona proporțional.
Acum setați modul de amestecare a stratului la Acoperire.
În final, să scriem mesajul nostru principal. Folosesc alb #FFFFFF cu caractere aldine, dar elegante Afișajul Playfair (Bold Italic) 52 px dimensiune pentru a descrie sentimentul festiv. Atunci când elaborează buletine informative de e-mail, asigurați-vă că vă păstrați mesajul scurt și clar, astfel încât utilizatorii să-l obțină imediat.
Un alt lucru pe care ar trebui să-l țineți cont este proiectarea blocurilor care pot fi reutilizate. De exemplu, vom proiecta acest bloc de mesaje care poate fi transformat într-un șablon, astfel încât utilizatorii să poată schimba butonul principal, copia principală și apelul la acțiune fără a avea nevoie de un designer, deoarece totul va fi pre-proiectat. De asemenea, pot duplica un astfel de bloc și pot folosi mesaje diferite.
Este inteligent să vă proiectați e-mailurile într-o singură coloană și aliniată central, astfel încât aceasta să poată fi făcută cu ușurință în aspectul receptiv. Deschideți grupul "Mesaj" și alegeți Instrument tip orizontal (T). Voi re-utiliza tipul de strat utilizat pentru titlul companiei și va mări dimensiunea fontului la 32px și schimbați greutatea la Extrabold.
Acum este timpul să spun ceva în detaliu, să nu fiți prea lungi și să încercați să atrageți atenția cititorului, determinând cititorul să facă clic pe butonul de chemare la acțiune pe care îl vom proiecta într-un moment. Folosind același lucru Instrument tip orizontal (T) notați copia dvs., pentru a mea am folosit aceeași culoare ca și pentru link-ul "Deschide în browser" # 666666 și Deschidere Sans (Regular) 18px mărimea.
Minunat! Aveți atenția cititorului și acum este timpul să puneți un buton de apel pentru acțiune, astfel încât e-mailul dvs. să conducă undeva util. Creați un nou grup numit "CTA" și apucați-l Instrumentul dreptunghiular (U), după ce schimba culoarea primului la un roșu # de1816 care reprezintă atmosfera de Crăciun și desenează o formă dreptunghiulară. În cazul meu este 240x40px mărimea. Apoi alegeți Instrument tip orizontal (T) și introduceți mesajul butonului. Am folosit alb #FFFFFF Deschidere Sans (Bold) 14px mărimea.
În cele din urmă, trebuie să închidem blocul separându-l cu o linie; setați culoarea primului la gri deschis #eeeeee și alegeți Instrumentul de linie (U) cu Greutate setat la 1px. După aceea trageți o linie orizontală între prima și ultima orientare. Lăsați un spațiu deasupra liniei.
Pro tip: țineți apăsat Schimb pentru a desena linii drepte.
O caracteristică foarte comună în buletinele de știri Digest e-mail este trimiterea de articole mai recente care cititorii s-ar putea au pierdut sau ar fi interesat în. Atunci când proiectarea unui astfel de modul trebuie să rețineți că acesta va fi un element dinamic, astfel încât aveți nevoie pentru a configura scena lăsând creatorul de e-mail să înlocuiască informațiile.
Duplicați stratul principal al mesajului folosit prin atingere CMD + J și glisând-o în grupul "Cel mai bun". După aceea, schimbați titlul și plasați-l sub linie consistent, astfel încât să mențineți ritmul vertical.
Acum vom enumera câteva dintre cele mai bune articole ale anului. Pentru acest tutorial voi folosi pur și simplu articole de articole, titluri și descrieri de la Tuts + Web Design.
Creați un grup nou numit "Articol". Prindeți Instrumentul dreptunghiular (U) și, ținând apăsată tasta Schimb cheie, trageți a 140x140px cutie. Apoi, alegeți o imagine de articol și trageți-o în fereastra Photoshop, după care creați un Mască de tăiere așa cum am făcut înainte și redimensionarea imaginii dacă este necesar.
Grozav! Acum trebuie să introduceți titlul articolului și scurta descriere, astfel încât cititorul să poată obține o imagine de ansamblu rapidă înainte de a da clic sau atinge. Voi reutiliza stratul de titlu al secțiunii duplicând-o și reducând dimensiunea fontului și duplicând stratul de descriere din grupul "Mesaj".
Minimizați grupul "Articol" și duplicați-l de două ori prin lovire CMD + J. După aceasta, mutați aceste grupuri duplicate sub prima și va trebui să schimbați titlurile, imaginile și descrierile acestor elemente duplicate.
În cele din urmă duplicați grupul "CTA" și stratul de linie selectându-le și lovind CMD + J, apoi mutați aceste straturi în grupul "Cel mai bun" și plasați-le sub articolele care lasă suficient spațiu.
Sfârșitul este foarte aproape. Să punem un ultim bloc în buletinul nostru de știri, un citat inspirat, cu un apel secundar la acțiune pentru a-l tweet. Cea mai bună practică este repetarea apelului principal la acțiune chiar la sfârșitul buletinului informativ, însă vom rupe această regulă aici și vom folosi un citat inspirator pentru a energiza cititorul.
Deschideți grupul "Citat", alegeți Instrument tip orizontal (T) și orice citat vă place de la BrainyQuote. Copiați cotația și scrieți-o folosind aceeași tipă elegantă pe care am folosit-o pentru grafică chiar în partea de sus a buletinului nostru de știri. În cazul meu este Afișajul Playfair (Italic) 24px dimensiunea și culoarea gri, așa cum este folosit pentru copie # 666666 mai devreme.
Mergeți pe site-ul Twitter și copiați un buton tweet. Faceți o captură de ecran lovind Shift + Ctrl + Cmd + 4 și selectând butonul Tweet. După aceea, lipiți-o și plasați-o sub citat.
Inca un lucru. Fiecare buletin informativ de e-mail trebuie să aibă o opțiune pentru ca persoanele să se dezaboneze. De asemenea, este bine să precizați de ce primitorul primește e-mailul în primul rând. Reuzați linkul "Deschideți în browser" de la vârf, duplicați-l și plasați-l sub fundalul conținutului.
Proiectul nostru finitAsta e! Am terminat proiectul de aspect al e-mailului, examinați acum straturile, ștergeți cele inutile și transmiteți-le dezvoltatorului sau codificați-le chiar mai bine. Am atins câteva tehnici de bază și mi-am demonstrat fluxul de lucru pentru proiectarea layout-ului de e-mail, sper că ați învățat ceva.
Mi-ar plăcea să vă aud feedback-ul și să vedeți rezultatele acestui tutorial!
Accentsconagua