Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UI Design
Webdesign

Креирање елегантен дизајн на блог во Photoshop

by
Difficulty:IntermediateLength:MediumLanguages:

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

Final product image
What You'll Be Creating

Во овој туторијал ќе ви покажам како да креирате едноставен, елегантен дизајн на блог во Photoshop. Ќе искористиме силна слика над превивката (каде и да е тоа) со неколку директни пораки, проследени со јасна и елегантна типографија.

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

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

  • Слика од кафуле од Refe
  • PT Serif фонт од Font Squirrel
  • Bentham фонт од Font Squirrel 

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

Чекор 1

Започнете со креирање нов документ (File > New…)  користејќи ги подесувањата прикажани подолу. Слободно може да користите платно или било кои димензии што вие ги преферирате - сепак веб страницата нема фиксирана ширина.

Осигурајте се дека резолуцијата е наместена на 72 pixels/inch.

Чекор 2

Ајде да поставиме насочувачи за да дизајнот биде просторен и балансиран. Не секогаш користам мрежа, но поставувањето на неколку насочувачи ќе овозможи уредност и ќе ни помогне со дефинирање на ширината на нашата веб-страница. Одете во View > New Guide... и поставете неколку насочувачи. Јас обично избирам 1000px за ширина на веб-страница и додавам неколку насочувачи кај аглите за да има простор за дишење.

Белешка: Насочувачи искористени за овој туторијал: вертикално на 100px, 285px, 445px, 600px, 605px, 765px, 925px и 1100px.

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

Чекор 3

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

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

Областа на заглавието игра важна улога во привлекување на корисници и нивното задржување на страницата. За овој блог ќе искористам слика што ја прикажува гостопримливоста во кафуле во Лондон. При избирање на слика за вашиот проект, осигурајте се дека ја испраќа вистинската порака до посетителите и ги задоволува потребите на клиентот.

Чекор 1

Најпрво да креираме позадина за блогот. Во групата Заглавие нацртајте правоаголник во било која боја користејќи ја алатката Rectangle Tool (U). Јас нацртав правоаголник со димензии 1200x600px и го наместив на почетокот од документот.

Сега преземете ја сликата од кафулето, привлечете ја на Photoshop документот и поставете ја над правоаголниот слој. Преименувајте го слојот со сликата во нешто што ќе можете да го препознаете подоцна, во мојот случај јас го искористив IMG. Потоа држете ги копчето Alt и глувчето притиснати на слојот со сликата,се додека не видите мала стрелка свртена надолу, а потоа пуштете ги. Само што креиравте Clipping Mask.

Притиснете CMD+T и менувајте ја големината на сликата за да вам ви одговара.

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

Чекор 2

Сега треба да ја направиме позадина на блогот потемна и понеутрална, за кога ќе ставиме копија на врвот да биде читлива. Ајде малку да ја замаглиме нашата слика со одење во Filter > Blur > Gaussian Blur... и поставување на радиусот на 3 пиксели. Малото користење на ефектот за замаглување помага во елиминирање на изострените детали на сликата и им овозможува на посетителите да се фокусираат на поистакнатите елементи, во овој случај тоа е пораката на блогот.

Да креираме нов слој над поставената слика и да го направиме Clipping Mask како што покажавме во претходниот чекор. Потоа пополнете го со црна нијанса и намалете ја непроѕироста за сликата да потемне, но сепак да биде видлива.

Чекор 3

Време е да додадеме лого за нашиот блог. Креирајте нова група во групата Заглавие и наречете ја Лого. За овој туторијал ќе искористам едноставно лого засновано на типографија. Изберете ја алатката Horizontal type (T), Bentham, фонтот на пишување 30px и напишете го насловот на вашиот блог. Забележете дека растојанието помеѓу буквите е поголемо од вообичаеното, создавајќи поелегантен изглед и правејќи ги големите букви почитливи.

Со цел да го истакнеме, да создадиме граница околу него. Изберете ја алатката Rectangle (U) и нацртајте правоаголник кој е малку поголем од текстот.

Со десниот клик на глувчето притиснете на слојот и одберете Blending Options... применете ги следниве параметри во полето stroke.

Конечно поставете ја внатрешноста (Fill) на слојот на правоаголникот на 0% и ќе добиете прегледна обвивка околу вашето замислено лого.

Чекор 4

Ова е моментот кога ќе додадеме блог порака која што сумира за што се работи во овој блог. Изберете ја алатката Horizontal Type (T), фонт Bentham 60px и напишете кратка порака за вашите читатели. Осигурајте се дека висината на линијата е доволно просторна, за текстот да има простор за дишење и изгледа балансирано.

За амперсендот користев Baskerville (Italic) бидејќи изгледа пораскошно. За втората порака го користев фонтот PT Serif (Italic) со големина од 20px. Осигурајте се дека вашата порака е вертикално поставена во средината на сликата на заглавието, за да изгледа балансирана и полирана.

Дизајнирање на областа за содржина

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

Чекор 1

Ајде да започнеме со изработка на нашата блог објава. Изберете ја алатката Horizontal Type (T) и користејќи потемна боја и прилично голем фонт, впишете го насловот на вашата објава. Обидете се да го избегнувате користењето на апсолутно црна боја и изберете посуптилна боја, како темно сива, за да не изгледа пренападно. За овој туторијал користам темно сива #444444 со големина 42px и фонт Bentham со големи букви. Ставете го насловот во средината на документот и оставете прилично голем простор на врвот, така што вниманието на читателите ќе биде привлечено кон насловот.

Чекор 2

Намелете ја големината на фонтот на околу 14px и внесете го датумот на блог објавата, авторот, категоријата, ознаките, локацијата или што и да посакате, па на вашите читатели да ми дава преглед на публикацијата. Во мојот случај, јас го ставив датумот и локацијата на почетокот со големи букви за да останам верен на насловот.

Чекор 3

Блогот без вистинска содржина не вреди ништо, без разлика на тоа колку е добар дизајнот. Со користење на алатката Horizontal Type (T), задржете го кликот од глувчето и направете правоаголник помеѓу вторите и претпоследните насочувачи. Ширината на правоаголникот помеѓу насочувачите треба да биде 640px, а висината ќе зависи од должината на вашата објава.

Поставете ја бојата на позадината во нешто посветло и пријатно за окото. Јас искористив посветла сива #6f6f6f 18px PT Serif со висина на линија на 34px. Висината на линијата најчесто треба да биде околу 1.5 - 1.9, зависи од стилот на фонтот. Можете лесно да ја пресметате висината на линијата со множење на големината на фонтот што го користите со 1.9, на пример јас користам фонт со големина од 18px па: 18*1.8=34.2

Чекор 4

Како дизајнер секогаш треба да размислувате за дизајнирање динамична средина, па вметнете стилови за хиперврски или "hover states" (опција за прикажување без потребно притискање на копчето) за копчиња. Верувајте ми, програмерите ќе ви се заблагодарат за ова. Одберете суптилна боја која ќе се разликува од главната копија, подвлечете една од фразите кои ќе пренасочуваат кон друго место и променете ја нејзината боја. Јас користев бледо црвена #e3514e.

Дизајнирање копчиња за споделување

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

Чекор 1

Минимизирајте ја групата Содржина и отворете ја групата Споделување каде што ќе ги поставиме нашите копчиња. Земете ја алатката Rectangle (U) и нацртајте правоаголник што ќе се наоѓа помеѓу вторите и претпоследните насочувачи исто како кај копијата во главната објава. Кај мене е 640px54px. Потоа со десен клик, селектирајте Blending Options... и применете ги следниве опции.

користена боја #838383

Конечно, намалете ја опцијата Fill на слојот на 0% и ќе добиете прегледен правоаголник за вашите социјални мрежи.

Чекор 2

Изберете ја алатката Line (U) и поставете ја ширината на 1px, а потоа повлечете три вертикални линии кои ќе го делат правоаголникот на четири еднакви делови. Насочувачите ќе ви помогнат при поставувањето. Осигурајте се дека линиите се со идентична боја како кај надворешните линии на правоаголникот.

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

Совет:притиснете CMD+; за да ги скриете или прикажете насочувачите.

Чекор 3

Конечно земете ја алатката Horizontal Type (T) и направете копија, давајќи им до знаење на луѓето дека е за споделување. Јас користам едноставно SHARE, по кое ги имам впишано имињата на социјалните мрежи достапни за споделување.

Вметнете ги имињата во правоаголникот и поставете ги во средината на одделните блокови.

Чекор 4

Супер! Споделувањето на социјалните мрежи е готово, се што ни останува е да креираме "mouse over state" (опција за прикажување без потребно притискање на копчето) за копчето. Едноставно земете ја алатката Rectangle (U) и користејќи ја истата боја како и кај врската, нацртајте правоаголник под името на една од социјалните мрежи покривајќи го одделното место.

Дизајнирање на завршетокот

Време е да го завршиме нашиот блог дизајн со вметнување едноставен завршеток со авторски права.

Чекор 1

Минимизирајте ја групата Содржина и отворете ја групата Подножје. Потоа нацртајте едноставен правоаголник на дното кој ќе се наоѓа хоризонтално на документот и оставете доволно простор на врвот. Јас користев сива #555555 и околу 110px бел простор над формата.

Чекор 2

Конечно земете ја алатката Horizontal Type (T) и напишете едноставна копија за авторски права. Јас користев PT Serif 14px и бела боја #FFFFFF. Поставете ја вашата копија вертикално во средината од правоаголникот.

Завршивме со дизајнот.  Честитки!

Заклучок

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

Проверете на Create and Theme an Evernote Powered Blog With Postach.io, каде што ќе разгледаме за креирање на овој блог дизајн кај прелистувачот, интегрирајќи го со блогерска платформа за добар изглед.

Ако имате прашања или нејаснотии, известете не во коментари!

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.