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

Дизајнирајте Tumblr тема за патнички фото-дневник 

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

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

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

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

  • Слики од Skitterphoto
  • PT Serif фонт од Font Squirrel
  • PT Sans фонт од Font Squirrel
  • Слики од Unsplash
  • Икона Share од Iconfinder
  • Икона Retweet од Iconfinder
  • Икона Heart од Iconfinder 
  • Икона YouTube од Iconfinder

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

Чекор 1

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

Чекор 2

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

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

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

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

Заглавието или областа „над наборот“ (каде и да е тоа овие денови) игра важна улога во поврзувањето со корисници и нивното задржување на страницата. За овој патнички фото-дневник ќе употребам прекраснa слика од пејзаж од плажа за да го пробудиме авантуристичкиот дух и потсвесната помисла кај посетителите дека во оваа страница се работи за патување.

Чекор 1

Прво да креираме група наречена „Заглавие“ за почетокот со избирање Layer > New > Group... или со притискање на малата икона што се наоѓа на почетокот од панелата за слоеви.

Чекор 2

Најпрво, да поставиме навигација на самиот почеток од нашиот дневник, за да можат луѓето лесно да навигираат низ него. Одберете ја алатката Horizontal Type (T), одберете го фонтот PT Sans со големина 13px, подесете ја бојата на светло сива #323232 и внесете го името на вашиот фото-дневник. Ова е погодно место за нашето лого, па внесете го ако го имате. За овој фото-дневик користам замислено име „приемна порта“. За да го направите визуелно попривлечно, проширете го tracking (празното место помеѓу буквите) на 200.

Задолжително горе оставете простор за насловот, јас го поместив надолу за 25px.

Чекор 3

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

Чекор 4

Во групата „Заглавие“ нацртајте правоаголна форма (користете која било друга боја за да биде видлива) користејќи ја алатката Rectangle (U). Јас нацртав правоаголник со големини од 1200x640px и го поставив на врвот од документот оставајќи простор од 25px под горната навигација.

Чекор 5

Сега преземете ја оваа слика од плажа (или која било друга што ви се допаѓа), повлечете ја на Photoshop документот и поставете ја над правоаголниот слој. Преименувајте го слојот на сликата во нешто што ќе ви биде препознатливо подоцна, јас користев IMG. Потоа држете ги копчето Alt и глувчето притиснати врз слојот на сликата се додека не видете мала стрелка завртена надолу, а потоа испуштете. Само што креиравте Clipping Mask. Конечно, намалете ја непроѕирноста на слојот IMG на 75% за текстот кој ќе го ставиме на почетокот да биде почитлив.

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

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

Чекор 6

Да креираме воведна порака давајќи им до знаење на корисниците за што се работи. Задолжително користете голем фонт на букви за да го привлечете вниманието на посетителите. Во мојот случај е истиот фонт PT Sans, со големина 52px. За секундарна порака користете помал фонт, јас користев PT Serif со големина 28px. Обрнете внимание на местото помеѓу линиите, секогаш оставајте доволно простор за копија со цел да биде читливо.

Чекор 7

Најпосле, потребно ни е копче „call to action“ (CTA) за на луѓето да им се каже што да прават. Земете ја алатката Rectangle (U) и нацртајте бела #FFFFFF правоаголна форма. После тоа, внесете текст во белиот правоаголник што ќе гласи нешто слично како „прелистување фотографии“. Осигурајте се дека ќе оставите малку простор над копчето за да тоа изгледа привлечно и независно.

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

Сигурно сте веќе запознаeни со тоа дека Tumblr има доста различни достапни видови на објави. Подолу е прикажана слика од изгледот на почетната страница на Tumblr која прикажува кои видови објави може да ги креирате.

Низ претстојните чекори ќе ве упатам низ процесот на креирање различни видови на објави, имено:

  • Текстуална објава
  • Фото-објава
  • Видео објава
  • Цитат објава

Ќе ве оставам да го довршите остатокот од задачата.

Чекор 1

Најпрво да започнеме со внесување на текст. Ќе креираме една единица и ќе ја репродуцираме за останатите објави. Сите објави ќе бидат базирани на иста структура и ќе делат слични карактеристики (датум на објава, означувања, опции за споделување).

Креирајте нова група наречена „текст единица“. Потоа променете ја бојата на позадината во светло кафеава #f8f7f6, земете ја алатката Rectangle (U) и нацртајте правоаголна форма помеѓу првите и последните вертикални насочувачи. Во мојот пример правоаголникот е 1000x284px.

Земете ја алатката Horizontal Type (T) и користејќи PT Sans (Bold) внесете наслов. Задолжително оставете простор околу насловот за да изгледа балансирано и јасно. Јас го одделив 50px од врвот и левата страна.

Чекор 2

Користејќи ја истата алатка, одберете го фонтот PT Serif, намалете ја неговата големина на 15px и променете ја бојата во посветло сива #444444. А потоа внесете ја содржината на вашата објава. Зголемете ја висината на линијата за да изгледа почитливо и визуално привлечно. Во овој случај ја поставив висината на линијата на 26px.

Чекор 3

Најпосле, треба да го прикажеме датумот на објавувањето, пропратен со неколку означувања и опции за споделување. Користејќи ја истата алатката внесете неколку означувања, од кои секое ќе биде пропратено со hashtag # и поставете ги под содржината. Потоа променете ја бојата во посветло сива #666666 така што е посветло и дава импресија на помалку важно, овозможувајќи поголемо внимание кон главната содржина.

Чекор 4

Сега преминете на Iconfinder и преземете икони share, retweet и heart.

На крај, креирајте нова група наречена „Икони“ и во неа вметнете ги иконите. Оставете простор од страните и намалете ја непроѕирноста на групата на 30% за иконите да се совпаѓаат со бојата на датумот и означувањата.

Дизајнирање на делот на фото-објавата

Чекор 1

Кога ќе завршите со ова, дуплирајте ја групата „текст единица“ и преименувајте ја во „фото единица“. Поместете ја 60px под првиот блок, отстранете го содржинскиот слој и преместете го насловот на објавата кон крајот за да е во иста линија со датумот и означувањата на објавата. Променете го насловот на објавата, датумот и означувањата. Селектирајте го позадинскиот слој, притиснете CMD+T и променете ја големината така што ќе има простор од 50px и горе и долу.

Чекор 2

Дуплирајте го позадинскиот слој и променете ја неговата големина користејќи CMD+T. Јас ја променив големината во 1000x510px.

Поместете го над насловот и преминете кон Skitterphoto за да изберете фотографија која ќе ви се допаѓа за фото-објавата и поставете ја над правоаголникот. Притиснете ги копчето Alt и глувчето над сликичката на слојот се додека не забележете мала стрелка завртена надолу. А потоа испуштете го глувчето за да креирате Clipping Mask.

Дизајнирање на делот на видео-објавата

Чекор 1

Ова е едноставно. Со помош на CMD+J дуплирајте ја групата „фото-единица“ и преименувајте ја во „видео единица“. Поместете ја под фото-објавата и променете ги сликата, насловот и означувањата. Потоа треба да посочиме дека ова е видео објава со поставување на иконата YouTube над неа.

Преземете ја иконата YouTube од Iconfinder и поставете ја во центарот на сликата од видео објавата.

Дизајнирање на делот на цитат објавата

Чекор 1

Уште еднаш дуплирајте (CMD+J)  ја групата „текст единица“ и поместете ја под видео објавата. Отстранете го насловот и содржинските слоеви оставајќи ги датумите, означувањата и иконите за споделување.

Потоа, земете ја алатката Horizontal Type (T), одберете го фонтот PT Serif (Italic), подесете ја големината на 35px и осигурајте се дека бојата е темно сива #323232.

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

Дуплирајте ја групата „фото-единица“ и поставете ја под цитат објавата за нашата макета да наликува на вистински Tumblr блог.

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

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

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

Се приближуваме кон крајот на дизајнирање на оваа едноставна Tumblr тема. Ајде да додадеме копче "load more" (карактеристично за Tumblr темите) и изјава за авторски права.

Чекор 3

Минимизирајте ги сите групи и креирајте нова наречена „Подножје“. Потоа отворете ја групата „Заглавие“ и најдете ги слоевите на копчиња „прелистување слики“, правоаголната форма и текстуалниот слој. Притиснете го копчето CMD и селектирајте ги двата слоеви, а потоа притиснете CMD+J за да ги дуплирате и привлечете кон групата „Подножје“

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

Чекор 2

Најпосле, внесете ги информациите за авторски права. За постојаност користете го истиот фонт како кај копијата за внес на фотографии. Во овој случај тоа е PT Serif 15px и сива боја #444444. Обрнете внимание на празното место, низ целиот шаблон имаме многу бел простор што придава чувство на јасност и организација. Јас искористив 60px празен простор помеѓу внесот на слики, копчето “load more" и изјавата за авторски права.

Усогласувањето е центрирано за работите да бидат во согласност со копчињата за допишување и „call to action“(CTA).

Честитки!

Тоа е тоа! Завршивме со дизајнот на тема, а сега прегледајте ги слоевите на документите, избришете ги непотребните и предадете го дизајнот на вашиот програмер, или уште подобро, кодирајте го сами. Во претстоен туторијал ќе го кодираме овој дизајн во целосно функционална Tumblr тема, па останете заинтересирани!

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.