Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Adobe Photoshop
Webdesign

Креирање на новогодишна електронска честитка во Photoshop

by
Difficulty:BeginnerLength:MediumLanguages:

Macedonian (Македонски јазик) translation by Makedonka Micajkova (you can also view the original English article)

Final product image
What You'll Be Creating

Во овој туторијал ќе ве упатам во процесот на дизајнирање тематски јасен и празничен шаблон за е-пошта. Ќе започнеме буквално од нула, скицирајќи го изгледот со Adobe Photoshop. Ќе користиме неколку основни и средни техники за да го креираме овој дизајн со конверзија на ум. Да започнеме!

Потребни средства за туторијалот

За да можете да следите ќе ви бидат потребни неколку (слободно достапни) средства:

  • Open Sans фонт од Font Squirrel
  • Playfair Dislay фонт од Font Squirrel 
  • Замаглена слика од сијалички на дрво од Good Stock Photos.
  • Новогодишен цитат од BrainyQuote

Подгответе го документот

Чекор 1

Започнете со креирање нов Photoshop документ (File > New…) користејќи ги поставувањата прикажани подолу. Поголемиот дел електронски честитки имаат одредена широчина околу 620 пиксели. Јас вообичаено користам 600px, но било што помало од 620px е исто така во ред. Кога ова би се направило со HTML ќе биде исто така достапно.

Чекор 2

Ајде да поставиме неколку насочувачи за да ја имаме нашата безбедна област дизајнирана во границите од 620 пиксели. Изберете View > New Guide… и поставете неколку насочувачи од страните, како и насочувач во средината, така што подоцна ќе можеме лесно да ги усогласиме работите.

Белешка: Насочувачи искористени за овој туторијал: вертикално на 40px, 80px, 340px, 600px и 640px.

Совет: Можете и да го користетe Photoshop додатокот GuideGuide со цел да го забрзате процесот.

Чекор 3

Придржувајќи се кон Photoshop etiquette, ќе ги одржуваме работите организирани и притоа да може лесно да се навигираат и уредуваат. Ајде да креираме три групи на слоеви наречени ,,Заглавие'', ,,Порака'', ,,Најдобро'' и ,,Цитат''. За да креирате групи одете во Layer > New > Group…  и на секоја дадете и наслов како што веќе споменавме. За брзо креирање група само кликнете на папката.

Подесување на позадината

Немојте да си ја правете позадината премногу фенси или натрупана поради тоа што многу корисници на е-пошта нема да бидат во можност да ја видат од помалите екрани. Вреди да се спомене и дека позадината не треба да биде слика поради тоа што по правило ќе биде блокирана кај повеќето клиенти за е-пошта.

Чекор 1

Најпрво да ја поставиме позадината на е-пораката. Сменете ја бојата на предницата во небесно плава  #f6f9fb и притиснете Alt+Backspace за да го пополните позадинскиот слој. Може да ја користите било која друга светла нијанса за вашата е-пошта, но подобро е да ја задржите оваа суптилна боја која не го оттргнува примачот, а сепак доловува поинакво чувство.

Чекор 2

Време е да поставиме позадина во безбедната област кадешто ќе биде внесена целосната содржина на е-поштата. Земете ја алатката Rectangle (U) и нацртајте бел #FFFFF правоаголник помеѓу првите и последните вертикални насочувачи што се оддалечени 600px.

Дизајнирање на заглавието

Заглавието на нашата е-пошта е доста важно и претставува клучна точка за примачот да може да одлучи дали вреди понатамошното читање. Според овој водич од Никол Мерлин, специјалист за е-пошта, важно е да се биде јасен и провиден.

,,Наведете го испраќачот, отстранете го непотребното и преминете директно на поентата.''

За овој туторијал едноставно ќе внесам име на компанија и врска за луѓето да ја отворат е-поштата во веб-прелистувач во случај да не може правилно да се вчита преку клиентот за е-пошта. Дополнително ќе вметнам и огромна слика со едноставен текст што расположува и ги покажува намерите на оваа порака за честитање на празниците.

Чекор 3

Отворете ја групата ,,Заглавие'' и земете ја алатката Horizontal Type (T). Би било подобро да си го напишете името на компанијата, отколку да користете лого бидејќи, како што споменав погоре, сликите можат да бидат оневозможени по отворањето на е-поштата, така што може да се уништи искуството поради тоа што вашето лого нема да биде видливо.

Одберете фонт кој го користете за вашиот бренд и впишете го името на компанијата, поставете го лево од горната страна и оставете празен простор околу. Во мојот случај користев Open Sans (Bold) 18px големина и темно сива боја.

Чекор 4

Многу е важно да вметнете врска на која луѓето ќе можат да кликнат или притиснат и да ја отворат е-пораката на нивниот прелистувач во случај да не може да се процесира добро во клиентот за е-поштата. Само едноставна текст врска ќе ја заврши работата, поставена на почетокот за да можат софтверите за читање текст моментално да ја препознаат. Јас го користев истиот Open Sans (Semibold) фонт, ја променив бојата во посветла сива #666666 и ја намалив големината на фонтот на 13px. На крај вметнете го во горниот лев ќош од е-пораката.

Чекор 5

Одлично! Сега треба да поставиме слика за да го привлечеме вниманието на примачот. Ќе користиме божиќна тема, додавајќи градиентен ефект и копија пред се.

Земете ја алатката Rectangle (U) и нацртајте кутија со димензии од 600x300px помеѓу првите и последните насочувачи. Потоа креирајте нов слој над неа и држете ги копчето Alt и глувчето притиснати на слојот на сликата се додека не видите мала стрелка свртена надолу. Кога ќе ја видите, кликнете на неа и ќе креирате Clipping Mask. Сега земете ја алатката Gradient (G) и за стандардниот градиент одберете црвена кон зелена.

Сега направете го градиентот со влечење на глувчето од горе лево до долу десно. Ќе добиете нешто слично како примерот подолу.

Чекор 6

Потоа преземете ја замаглената слика од сијалички на дрво од Good Stock Photos и наместете ја над градиентскиот слој креирајќи Clipping Mask и за овој слој. На крај кликнете CMD+T и променете ја големината на сликата.

Важен совет: држете го копчето Shift притиснато за да можете пропорционално да цртате и менувате големини.

Чекор 7

Сега поставете го режимот за мешање слоеви на Overlay.

Чекор 8

Конечно да си ја напишеме главната порака. Јас користам бел #FFFFFF и задебелен, но сепак елегантен фонт Playfair Display (Bold Italic) со големина од 52px за да го доловам празничното расположение. При дизајнирање електронски честитки осигурајте се дека пораката е кратка и јасна за корисниците да ја примат веднаш.

Дизајнирање на областа за пораки

Друго на коешто треба да обрнете внимание е дизајнирање на блокови коишто можат да бидат повторно употребени. На пример, ние ќе го дизајнираме овој блок за пораки којшто може да се претвори во шаблон за да можат корисниците да го променат насловот, главната копија и копчето „повик на акција“, без потреба од дизајнер, бидејќи се ќе биде претходно дизајнирано. Исто така, може да го дуплираат таквиот блок и да користат различни пораки.

Чекор 9

Паметно е да ги дизајнирате вашите е-пораки во една колона и централно подредени за да може лесно да се преобрази во достапен шаблон. Отворете ја групата „Порака“ и земете ја алатката Horizontal Type (T). Повторно ќе го искористам текстуалниот слој што го употребивме за името на компанијата и ќе го зголемам фонтот на 32px, а дебелината на фонтот ќе ја ставам Extrabold.

Чекор 10

Сега е време да кажеме нешто подетално, немојте премногу да се задржувате и обидете се да го зграпчите вниманието на читателите, наведувајќи ги да кликнат на копчињата за „повик на акција“ на социјалните мрежи. Со користење на истата алатка Horizontal Type (T) напишете ја вашата копија, за мојата ја користев истата боја како и кај линкот ,,Open in browser'' #666666 и големина Open Sans (Regular) 18px.

Чекор 11

Одлично! Сега го имате вниманието на читателот и време е да поставите копче „повик на акција“ за вашата порака да има смисла. Креирајте нова група наречена ,,CTA'' и земете ја алатката Rectangle (U), а потоа променете ја бојата на предницата во црвена #de1816 која доловува божиќно чувство и нацртајте правоаголна форма. Во мојот случај е со големина од 240x40px. Потоа земете ја алатката Horizontal Type (T) и внесете ја пораката на копчето. Јас користев бел #FFFFFF Open Sans (Bold) со големина од 14px.

Конечно, да го затвориме блокот одделувајќи го со линија; да ја поставиме бојата на предницата во светло сива #eeeeee, а сега земете ја алатката Line (U) со дебелина поставена на 1px. Потоа нацртајте хоризонтална линија помеѓу првите и последните насочувачи. Оставете малку простор над линијата.

Про совет: за да цртате совршено прави линии притиснете Shift.

Дизајнирање на областа „Најдоброто“

Една многу честа работа која се практикува кај автоматско генерирање на пораки е праќањето на најновите статии кои читателите можеби ги испуштиле или би сакале да ги видат.  Кога дизајнирате таков модул, треба да имате на ум дека тоа ќе биде динамичен елемент, така што треба да ја поставите сцената оставајќи го создавачот на е-пошта да ги замени информациите.

Чекор 12

Дуплирајте го претходно користениот слој за насловот на пораката со притискање CMD+J и влечејќи го кон групата „Најдобро“. Потоа, променете му го насловот и како и обично поставете го под линијата , за да го одржувате вертикалниот ритам.

Чекор 13

Сега ќе наброиме неколку од најдобрите статии на годината. За овој туторијал едноставно ќе користам слики од статии, наслови и описи од Tuts+ Web Design.

Креирајте нова група наречена „Статија“. Земете ја алатката Rectangle (U) и држејќи го копчето Shift нацртајте кутија со големина од 140x140px. Сега одберете слика од статија и повлечете ја на вашиот Photoshop прозорец, а потоа креирајте Clipping Mask како што направивме претходно и ако е потребно променете ја големината на сликата.

Чекор 14

Супер! Сега треба да го внесеме насловот на статијата и краток опис за да може читателот да добие брз преглед уште пред да кликне или притисне. Повторно ќе го искористам слојот со насловот на секцијата дуплирајќи го и намалувајќи ја големината на фонтот, а притоа дуплирајќи го и описниот слој од групата „Порака“.

Чекор 15

Минимизирајте ја групата „Статија“ и дуплирајте уште два пати притискајќи CMD+J. После тоа, поместете ги дуплираните групи под првата и ќе треба да ги смените насловите, сликите и описите на овие дуплирани елементи.

Чекор 16

Конечно дуплирајте ја групата ,,CTA'' и слојот на линијата селектирајќи ги и притискајќи CMD+J, а потоа преместете ги овие слоеви во групата ,,Најдобро'' и поставете ги под статиите оставајќи доволно простор.

Дизајнирање на Цитат и Подножје

Се приближуваме кон крајот. Ајде да ставиме последен блок во нашата честитка, инспиративен цитат со дополнителен „повик на акција“ за твитање. Најдобра практика е да се повтори главниот „повик на акција“ на самиот крај, но ние ќе го прекршиме ова правило и ќе искористиме мотивирачки цитат за да го стимулираме читателот.

Чекор 17

Отворете ја групата ,,Цитат'', одберете ја алатката Horizontal Type (T) и било кој цитат што ви се допаѓа од BrainyQuotes. Копирајте го цитатот и напишете го користејќи го истиот елегантен фонт што го користевме за графиката на самиот почеток од честитката. Во мојот случај тоа е Playfair Display (Italic) со големина од 24px и сива боја како што искористивме за копијата #666666 претходно.

Чекор 18

Преминете кон веб-страницата на Twitter и копирајте копче за твитање. Направете моментална слика од екранот со притискање Shift+CTRL+CMD+4 и селектирајќи го копчето за твитање.  После ова залепете го и внесете го под цитатот.

Чекор 19

Уште нешто за крај. Секоја електронска честитка мора да има опција за луѓето да можат да престанат да ја следат. Препорачливо е да се напомене и зошто всушност примачот ја прима пораката. Повторно искористете го линкот ,,Open in browser'' од самиот почеток, дуплирајте го и поставете го под содржинската позадина.

Честитки!

Final product
Нашиот готов дизајн

Тоа е тоа! Готови сме со дизајнирање на изгледот на е-пораката, сега прегледајте ги слоевите, избришете ги непотребните и предадете го на вашиот програмер, или уште подобро кодирајте го сами. Прикажав некои основни техники и го демонстрирав мојот начин на работа при дизајнирање изглед на електронска порака. Се надевам дека научивте нешто.

Би сакал да ги слушнам вашите повратни информации и да ги видам резултатите од овој туторијал!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.