Направите чист изглед веб локације у Пхотосхопу - Дизајн изгледа веб локације је више него сређивање шарених слика и попуњавање неког текста у текстуалним оквирима. То је приступ који говори много о раду вашег клијента. Боје и графике веб странице одређују природу посла, док квалитет дизајна и лаган навигацијски ток веб странице треба да повежу корисника са организацијом и претворе га у потенцијалног купца.
Дизајн доброг изгледа и лако доступног изгледа веб страница обавезан је за све ваннабе веб дизајнере. Овај туториал ће вас водити кроз поступак креирања изгледа веб странице једноставан и чист од самог почетка. Током процеса наићи ћете на важне ствари које ће вам помоћи у стицању више знања о веб дизајну. 
Запишите своје захтеве пре дизајнирања изгледа веб странице
Пре него што почнете да дизајнирате изглед веб странице, требало би да знате како ће ваша веб локација изгледати и које су теме које би требало да укључите на веб локацију. Од пресудног је значаја направити списак елемената изгледа веб локације који ваш клијент треба на својој веб локацији. Уз то, квалитет доброг дизајнера је да припреми подсмех целог вебсајта пре него што почне са радом на завршном шаблону.
Различите дизајнерске компаније прилагођавају различите нивое стратегија пре дизајнирања, које могу садржавати уоквиривање жица, прототипирање, израду макета, бета верзије и још много тога. У овом туториалу направићемо моделну верзију пре него што започнемо оригинални дизајн шаблона. Користим сиве нијансе које омогућавају идентификацију блока макете
Цанвас
Прије година, док је било врло мало ОС-а и ограничених уређаја за приступ веб локацијама, димензије странице су биле фиксиране на једну или две величине. Данас је сценарио потпуно другачији. Крајњи корисници приступају веб локацијама на радним површинама различитих величина, мобилним телефонима, иПадима и таблетима. У овој разноврсној ситуацији, нема шансе да веб страницу поправите на одређену величину. Али постоје неке стандардне величине индустрије примењене на сваки уређај. Полако ћете пронаћи вашу омиљену величину или ће вам клијент упутити веб локацију да опонаша величине.
У овом случају радимо на следећим димензијама. Не брините за висину јер ће се она временом мењати. Што више садржаја додајете на вашу веб страницу, то ће бити већа висина.
Запамтите да је уобичајено да се вертикално померате по страници, тако да се можда нећете поправити на одређеној висини за своју веб страницу, осим ако не желите да се корисник креће по вашој почетној страници као Гоогле. Али, потребно је не померати се хоризонтално. Дакле, ограничите ширину према индустријским стандардима и не будите креативни с хоризонталним померањем.
За веб је резолуција ограничена на 72. Недавно су слике и странице веће резолуције пронађене на иПаду и неколико таблета. Али то је ретка прилика и боље је држати се броја 72 с обзиром на брзину интернета широм света.
Изаберите датотеке помоћу команде Цтрл + А и водиче једнако цртајте по предлошку. Веб локација треба да буде уредно организована, тако да је сваки елемент кохерентан један према другом. И смернице за изглед веб страница помажу вам да то лако добијете.
Припремите свој нацрт
Постављање ваше макетне датотеке на оригинални предложак помаже вам да уштедите довољно времена. Дизајн веб странице постаје толико једноставан да ћете на крају довршити оквир у року од неколико минута. Међутим, модел ће вам само помоћи да дизајнирате оквире. Довршење елемената дизајна детаљима, распоредом и поравнањем трајаће више времена него цртање изгледа веб локације.
Шема боја и остали избори
Следећа ствар након што припремите свој оквир је одабир шеме боја. Али, боље је припремити своје боје пре него што почнете да радите на дизајну.
Читава ствар се своди на поруку да, припремите оружје пре него што започнете дизајн. Све укључујући иконе, слике и изборе боја требало би да буде спремно пре него што почнете да радите. Организовање и планирање вашег рада уштедеће више времена и фокусираће се на дизајн без ометања између.
Одабир боја може бити избор дизајнера ако је компанија нова и претходно нема корпоративни идентитет. У неким случајевима, клијенти дају представу о нијансама које желе да логотип или позадина треба да буду. Што се тиче постојећих компанија у којима ћете можда требати редизајнирати читаву веб страницу, можда ћете морати одабрати исте боје према потребама клијента.
Постоје бројне веб странице које вам могу помоћи да одаберете милионе шема боја из архива. Испробајте следеће веб локације да бисте уживали у широком избору комбинација боја.
Цолор.адобе.цом
Цолоурловерс.цом
Овде сам изабрао неколико нијанси плаве које користим за веб локацију. Цела веб локација биће планирана у оквиру следеће шеме боја. Не заборавите да одаберете три или четири различите комбинације боја, јер не знамо који ће клијент клијент више воле. Једном када клијент финализира схему боја, сачувајте вредности нијанси и осигурајте да боје играју виталну улогу у свакој вертикали организације. Нарочито у корпоративном идентитету.
Процес дизајнирања
Постоји много начина да наставите са својим дизајнерима. Не постоје чврста и брза правила за обликовање веб страница која могу дефинирати или слиједити процес дизајнирања, већином је то поступак који ће дизајнер одабрати по својој погодности.
Неки дизајнери желе да направе читаве блокове и оквире и започну с радом на детаљима у другој фази, праћеним типом и коначно подешавањима и подешавањима. Неки воле да доврше један део странице одједном и пребаце га на други део. Пратимо други стил.
Веб локацију ћемо завршити у следећим корацима
- Заглавље и подножје
- Шта радимо
- Услуге
- Образац
- Вести
- Фоотер
Заглавље и подножје
Правило да дефинирате димензије вашег заглавља или натписа препуштено је вашој креативности. Према последњим трендовима, веб локације се појављују са огромном сликом која покрива цео екран рачунара. Стил се назива Херо слика, која је постала прилично популарна у последње време.
У овом случају започели смо са заглавом висине од 120 пиксела и висином од 550 пиксела за банер. Ширина треба да одговара величини документа.
Дизајни с чврстом бојом имају раван изглед који не иде добро са већим кадровима или сликама. Да избјегнем равни изглед, на врх натписа нанио сам слој прекривања градијентом. Даје банер дубину која се полако трансформише из једне нијансе у другу.
Затим смо почели да увозимо Логотип и ставимо га у горњи леви угао заглавља и још један већи лого на средину натписа. Такође можете да посматрате векторске облике веб локација у горњем десном углу, који се користе за дељење веза на друштвеним мрежама.
У овој фази сам завршио са додавањем врсте у делу Хеадер & Баннер. Назив компаније, порука робне марке, са везама и услугама, додаје се у тексту. Такође можете да видите прозирно дугме на банеру.
Обичан текст или превише типа без посебних функција поквариће изглед и осећај ваше веб странице; страница ће ускоро родити корисника, што му може омогућити да брзо напусти вашу веб локацију. Погледајте векторски облик који сам додао везама за услуге у горњем десном углу банера. Стил је једноставан, али попуњава празнину избјегавајући приземни изглед.
Изаберите слику која одговара предузећу. На мрежи је доступно милион слика са залихама и неће требати превише времена да се пронађе слика која одговара вашем захтеву.
У мом случају пронашао сам висококвалитетну слику за коју мислим да ће се добро слагати са мојом веб страницом. Немам пословну тему за веб локацију, тако да сам слободан да изаберем било коју слику која изгледа добро на посту са натписом.
Покушајте да преузмете неке ХД слике са веб локација са бесплатним сликама датих доле
ввв.пикабаи.цом
Мијешање је умјетност коју бисте требали савладати да бисте направили прекрасне транспаренте. Овде сам помешала три слоја како бих постигао ефекат приказан на горњој слици. Ево шта сам урадио
- Поставите слој слике на врх плаве боје
- Поставите прекривач Градиент изнад слике
- Промените непрозирност слике за 40 процената и промените режим мешања у разлику.
- Погледајте палету слојева на горњој слици да бисте разумели како се слојеви међусобно слажу.
Овако ће изгледати ваш Хеадер & Баннер док смо управо на њему радили. Радимо на једном делу одједном и време је да пређемо на следећи ниво.
Усклађивање од кључне важности када је у питању тип; имати представу о томе како треба да изгледа ваша веб локација и текст треба поравнати пре него што је покренете. На овом нивоу користио сам два различита оквира текста, оба поравната лево.
Следећи корак је дизајнирање сервисног дела веб странице. Дизајнирао сам металну звезду у сивим нијансама како бих приказао различите услуге компаније. Намјера кориштења симбола звијезде је услуга 5 звјездица.
Када је у питању поравнавање текста Водичи су вам најбољи пријатељи. Кохеренција унутар типа и објеката може се постићи ако се добро искористи бели простор и једнаке разлике између елемената дизајна. Користила сам многе смернице за изглед веб локација да видим да сви објекти у оквиру треба да одржавају одговарајуће празнине и растојања који износе прилично белог простора.
Следећи корак нашег дизајна је креирање поља обрасца. У овом случају радим супротно методи коју смо користили приликом дизајнирања банера. Ставићемо слој слике испод слоја обојене боје и нанети градијентни слој на два слоја како бисмо постигли бољи изглед. Играње са режимима мешања увек је неопходно за постављање већих слика.
Избор слика за ову страницу нема одређену тему везану за њу. Мислим да ће ова слика помоћи сајту да изгледа боље.
Поставите слику испод обојеног позадинског слоја. Да бисте фиксирали слику точно на величину обојеног слоја, користите опције маскирања слојева.
Погледајте палету слојева на горњој слици. Чврсти слој плаве боје налази се на врху слике, режим мешања се претвара у прекривање и непрозирност се смањује на 65 одсто.
Користила сам карту градијента на два слоја. Начин мијешања се мијења у нијансу, а непрозирност остаје иста.
Оквир за обрасце је спреман, што нас доводи до четвртог нивоа у дизајну наше веб странице.
Наш следећи ниво састоји се од два једноставна оквира текста. Подсећа на други ниво веб странице, а ја сам упоредио две кутије сличне врху. Одржавање кохерентности у усклађивању је добар начин коришћења белог простора.
Како смо стигли до завршног дела странице, време је да поново размотримо димензије подножја. Дизајнер мора да испланира висину подножја на основу веза које треба да користи тамо. У овом случају дао сам висини од 170 пиксела свом подножју. Ширина остаје иста као и веб локација.
Поставите линкове и слике по вашем захтеву.
Овим смо закључили дио дизајнирања наше веб странице. Комбинације боја које смо користили су минималне, користимо много белог простора у свом дизајну и додали смо једноставан текст са минималним фонтом. Намјера је дизајнирати чисту веб страницу, за коју се надамо да је испуњена.
Молимо погледајте још једном дизајн читаве странице испод
