Водич: Како поставити веб страницу са Адобе Пхотосхоп-ом

Постоји велика разноликост алата за дизајнирање веб страница и рад на потпуно једноставан и функционалан начин без уношења или додиривања кода. Небројени су, предложени у апликацијама (Adobe Dreamweaver је пример) или директно путем мрежних платформи као што је Вик. Међутим, за веб дизајнера је неопходно познавање ручних поступака. ХТМЛ5 и ЦСС су основни стубови за изглед веб локација и одредишних страница.

Међутим, чешће него што бисте могли очекивати, мораћете да се обратите апликацијама попут Индесигн или Adobe Photoshop да допуните свој рад на распореду и пружите им савршен завршетак. Данас ћемо у овом опсежном водичу видети како можемо поставити веб страницу помоћу Адобе Пхотосхоп-а. У овом првом делу остајемо на делу који ће се развити из Пхотосхопа, мада ћемо у будућим ратама видети како то дело већ можемо директно применити у ХТМЛ коду да би постало функционално.

Почевши од дизајна нашег жичаног оквира

За почетак са изгледом и дизајном веб странице, изузетно је важно да започнемо дефинисањем шта ће бити основни елементи, ово је костур. Ова структура ће служити као подршка за чување свих садржаја (било текстуалних или мултимедијалних). Дефинисањем сваког од одељака који чине нашу страницу, моћи ћемо да радимо на њима са потпуном тачношћу и пружимо што прецизнији визуелни дизајн.

Веома је важно да узмемо у обзир димензије које ће наша веб локација имати, ако ће имати у кутији или пуне ширине. Упакована веб страница ће се налазити у малом контејнеру и зато ће се око ње појавити размак. Напротив, мрежа са пуном паметношћу заузеће цео екран уређаја који репродукује страницу. Избор између једног или другог модалитета одговара само на стилска питања и такође ће зависити од потреба пројекта на којем радимо. У овом примеру ћемо радити у бокс режиму, тако да неће заузимати сав простор који пружа прегледач.

Да бисмо креирали свој жичани оквир, прво што треба да урадимо је да уђемо у апликацију Адобе Пхотосхоп и уврстимо димензије које желимо да има наша страница. У овом примеру наша страница ће бити широка 1280 пиксела. Међутим, проблем са величином може се разликовати у зависности од крајњег одредишта или уређаја на којем желимо да репродукујемо нашу страницу. Нема сумње да веб дизајн мора бити функционалан и ефикасан одзив и мора се прилагодити свим уређајима на тржишту. Међутим, у овом случају ћемо радити на стварању прототипа који ћемо репродуковати на стоном рачунару. Упркос томе, одговорно питање са којим ћемо се позабавити касније, у овом примеру за сада имамо хијерархију димензија екрана. Имајте на уму да ћемо у овом случају направити изглед одредишне странице у Адобе Пхотосхопу, а затим ћемо је мигрирати на ХТМЛ5 И ЦСС3. Циљ ове мале праксе је претворити дизајн креиран у Пхотосхопу у употребљив и интерактиван веб дизајн који одговара кретању корисника.

Мерења за мобилне телефоне

иПхоне 4 и 4С: 320 к 480

иПхоне 5 и 5С: 320 к 568

иПхоне 6: 375 к 667

иПхоне 6+: 414 к 736

Некус 4: 384 к 598

Некус 5: 360 к 598

Галаки С3, С4, С5: 360 к 640

ХТЦ Оне: 360 к 640

Мерења таблета

иПад сви модели као и иПад Мини: 1024 к 768

Галаки Таб 2 и 3 (7.0 инча): 600 к 1024

Галаки Таб 2 и 3 (10.1 инча): 800 к 1280

Некус 7: 603 к 966

Некус 10: 800 к 1280

Мицрософт Сурфаце В8 РТ: 768 к 1366

Мицрософт Сурфаце В8 Про: 720 к 1280

Мерења за стоне рачунаре

Мали екрани (користе се на пример у нетбоок рачунарима): 1024 к 600

Средњи екрани: 1280 к 720/1280 к 800

Велики екрани: ширина већа од 1400 пиксела, на пример 1400 к 900 или 1600 к 1200.

Да бисмо започели дистрибуцију елемената и додељивање одељака у нашем веб моделу, веома је важно да узмемо у обзир пропорције како бисмо осигурали читљив и мелодичан завршетак. Биће неопходно да користите опције правила и водиче које можете пронаћи у горњем менију Поглед. Да бисмо радили пропорционално и тачно, најбоље је да радимо у процентима. Кликнућемо на мени приказа, а затим на опцију «Нови водич» да бисмо изабрали модалитет поделе. У овом случају направићемо четири вертикалне поделе од 25% и узећемо их као референцу за постављање наших слика у подножје и слике нашег логотипа у заглавље.

Постоји код који означава свако од подручја која ће заузимати наше модел и функцију коју ће имати свако од њих. На пример, да бисмо указали на површину коју ће слика заузимати, креираћемо правоугаонике са врстом крста. Да бисмо назначили да желимо да уврстимо видео записе у одређено подручје, уврстићемо симбол за репродукцију у наш контејнер. У овом првом примеру ћемо радити само са сликама, у горњем снимку можете видети подручје које лого са наше веб странице.

Ово би био крајњи резултат нашег Вирефраме. Као што видимо, подељен је на заглавље састављено од слике на којој ће се наћи логотип и које ће служити као веза до почетне странице праћене са два језичка, претраживачем и четири дугмета на пољу за претрагу. Поред тога, већ у оквиру тела, укључили смо бочну траку која се састоји од преграде и низа категорија које категоризују врсту садржаја који ће бити на нашој веб локацији. Још један одељак са нумерацијом који укључује уносе који ће постојати на нашој веб локацији и на крају листу са најрепрезентативнијим метатаговима на нашој веб локацији.

У области садржаја, која ће бити дефинисана одељком који ће садржати садржај којим се самостално управља, наћи ћемо садржај наших чланака. У овом случају, презле или презле (што указује на органску структуру наше веб странице, наслов чланка, метаподатке, пасус као тело текста, у оквиру којег је и слика.

Као подножје уврстили смо четири слике које ће послужити као веза до других подручја наше странице. Овде можемо укључити логотипе или друге занимљиве одељке. Иако ће у стварности ово подручје деловати више слично префоотер, јер ће сам подножје ићи мало даље са политиком употребе, правном напоменом и ауторским правима.

Када дефинишемо основну структуру или костур наше странице, мораћемо да пређемо на следећи ниво. Ово ће се састојати од правилног дизајна сваког од подручја наше веб странице. Другим речима, почећемо да „попуњавамо“ сваку од ових области садржајем који ће коначно бити уметнут на нашу веб страницу. Препоручује се да не дизајнирамо ове елементе пре радова на жичном оквиру јер је врло вероватно да ћемо, ако то радимо овим редоследом, касније морати да променимо њихове пропорције. Ризикујемо да искривимо своје слике и да је потребно поновити дизајн сваког од елемената, што ће постати или губљење времена или резултат слабијег квалитета.

У овом случају дизајн наше веб странице биће изузетно једноставан. Користићемо прописи о дизајну материјала, јер ћемо користити Гооглеов логотип да бисмо приказали ову праксу. Морам да појасним да је сврха овог водича илустровање техничког знања, тако да је естетски резултат у овом случају небитан. Као што видите, мало по мало смо испуњавали простор свим областима које смо претходно одредили у нашој шеми. Међутим, направили смо малу модификацију у последњем тренутку. Као што сте можда приметили, знатно смо смањили величину свог логотипа и у доњи део заглавља укључили смо разделну линију која се савршено повезује са горњим менијем. У овом случају користили смо дугмад и материјале из банке ресурса. Као дизајнери можемо их дизајнирати сами, (нарочито ова опција се препоручује ако желимо да представља врло сличан тоник оном који представља слика бренда или логотип).

Важно је да имамо на уму да ћемо на овом примеру радити на два различита нивоа. С једне стране, радићемо на објектима, а са друге стране изглед веб странице. Односно, с једне стране у костуру наше веб странице, а с друге стране у свима плутајући елементи које ће овај костур подржати. Приметићете да постоје подручја која уопште неће лебдети, као што је подручје које ће заузети наша бочна трака, предфоотер или разделна трака која дели заглавље од тела.

Структуре 1, 2, 3 и 4 биће део позадина наше веб странице, тако да у стварности неће бити потребно да као такав извозимо из Адобе Пхотосхопа, иако то можемо, није потребно. Када је у питању Равне боје (једна од битних карактеристика равног дизајна и дизајна материјала, могу се савршено применити помоћу кода помоћу ЦСС табеле стилова). Међутим, остатак елемената мора бити сачуван за касније уметање у наш ХТМЛ код. У овом малом дијаграму такође смо репродуковали подручја која припадају позадини странице тако да имамо јасну представу о коначном изгледу наше странице.

Као што ћете моћи да схватите, смисао стварања ове шеме у Адобе Пхотосхопу је да се добије стварна димензија сваког елемента и да се разјасни распоред и структура сваког елемента. Наравно, текстуалном садржају није место у овој фази процеса, јер мора бити испоручује се из нашег уређивача кода. Такође морамо нагласити да ћемо у овој пракси радити са дугмадима и статичким елементима, мада се они обично примењују из оквира као што је Боотстрап или директно из Јкуери-а.

Једном када смо креирали сваки од елемената који ће чинити нашу веб страницу, време је да почнемо да их извозимо и чувамо у директоријуму слика који се налази унутар директоријума ХТМЛ пројекта. Важно је да се навикнете на извоз из свог жичаног оквира, јер је врло вероватно да ћете морати да измените неке од оригиналних елемената на основу конфигурације скелета. (На пример, у овом случају смо променили величину оригиналних дугмади, логотипа и већине елемената који су део композиције, укључујући слике у доњем делу).

Важно је да научимо да било који предмет складиштимо независно како бисмо га сачували у димензијама које имају и на прецизан начин. Свака грешка, ма колико минимална била, може утицати на све елементе који су део ваше веб странице. Имајте на уму да ће бити повезани једни с другима и да морају имати савршене димензије како би се у њих могло унети из ХТМЛ-а у коначну мрежу. У овом случају мораћемо самостално да исечемо и сачувамо следеће елементе:

• Наш лого.
• Сва дугмад (она која су део главног менија и остатак).
• Све слике.

Можемо то учинити на више начина и можда ћете пронаћи алтернативу која је за вас ефикаснија. Али ако је први пут да правите овакав изглед, препоручујем да следите следеће савете.

• Прво би требало да одете у директоријум у којем се налази ПСД датотека која садржи наш жичани оквир и дуплицирате је онолико пута колико и елемената које желите да извезете. У овом случају створили смо 12 копија од оригинала и сачували смо их у истој фасцикли. Затим ћете преименовати сваку копију и свакој од њих доделити име елемента који садржи. Наших 12 копија биће преименовано: Логотип, дугме менија 1, дугме менија 2, трака за претрагу, горње дугме 1, горње дугме 2, горње дугме 3 и горње дугме 4. Преостале четири ће бити преименоване у: Слика 1, Слика 2, Слика 3 и Слика 4.
• Једном када то завршимо, отворићемо датотеку са именом логотипа.
• Отићи ћемо на нашу палету слојева и пронаћи слој који садржи наш логотип. Тада ћемо притиснути Цтрл / Цмд док кликнемо на сличицу поменутог слоја. На овај начин логотип ће бити аутоматски изабран.
• Следећи корак ће бити рећи Пхотосхопу да желимо да тај логотип исече на прецизан начин. За ово ћемо морати да упутимо позив алату за обрезивање помоћу тастера или команде C.
• Једном када то учинимо, кликните на наше дугме Ентер да бисмо потврдили рез.
• Сада ћемо отићи на горњи мени Датотека да кликнемо на саве саве. Изабраћемо име, које ће у овом случају бити «Лого», и ми ћемо му доделити формат ПНГ, јер је датотека која нуди највиши квалитет на Интернету.
• Поновићемо поступак са свим копијама и елементима. Када обрежете, проверите да ли су остали слојеви у нашој палети невидљив или елиминисани. На овај начин можемо сачувати сваки елемент са прозирном позадином.

У овом случају одабиремо наше дугме менија 2 из палете слојева. На снимку екрана можете видети како су ограничења нашег дугмета аутоматски изабрана.

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

Сада је време да један по један сачувамо све елементе који су део наше веб странице и укључимо их у фасциклу слика и које ћемо касније користити. Позваћемо из нашег кода и наставићемо са изгледом, али од сада из нашег уређивача кода.

Иако постоји много алата и алтернатива за постављање веб странице који поступак чине потпуно интуитивним, врло је важно да научимо како то да урадимо у упутство. На овај начин ћемо научити које су основе дизајна веб странице.

Резиме:

1. Дизајнирајте структура веб странице обраћајући посебну пажњу на садржај који желите да пренесете и одељке које морате да креирате на својој веб локацији.
2. Порадите на свом скелету или Вирефраме из Адобе Пхотосхопа назначујући у којим областима ће се садржаји појављивати и њихов формат.
3. Ослањајући се на мере и брендове које сте претходно развили, почните дизајн површину мреже. Укључује све елементе (и плутајуће и фиксне). Не заборавите да укључите одговарајућа дугмад, логотип и слике.
4. Изрежите један по један све елементе који су део пројекта. Уверите се да имају праве мере и да вам касније неће правити проблеме.
5. Сачувајте све елементе у формату ПНГ у фасцикли слика унутар фасцикле пројекта ХТМЛ-.
6. Имајте на уму да ће овај пројекат имати излаз за веб прозор, зато је веома важно да узмете у обзир режим боја и примените се РГБ.
7. Инспиришите се другим веб локацијама којима се дивите пре него што се бавите послом и не заборавите да о томе разговарате са члановима свог тима. У случају да је то пројекат за клијента, покушајте да се придржавате информисање што је могуће даље.