Isifundo: Uyibeka njani iWebhu yeWebhu ngeAdobe Photoshop

Kukho iintlobo ezininzi zezixhobo zokuyila amaphepha ewebhu kunye nokusebenza ngendlela elula kwaye esebenzayo ngaphandle kokungena okanye ukuchukumisa ikhowudi. Akunakubalwa, kucetyiswa zizicelo (Adobe Dreamweaver ngumzekelo) okanye ngokuthe ngqo ngamaqonga akwi-Intanethi anjengeWix. Nangona kunjalo, kuyilo lwewebhu, ukwazi iinkqubo zencwadana kubalulekile. I-HTML5 kunye ne-CSS zezona ntsika zisisiseko zolwakhiwo lwewebhusayithi kunye namaphepha okufika.

Nangona kunjalo, rhoqo rhoqo kunokuba ungalindela, kuya kufuneka ujike kwizicelo ezinje nge-Indesign okanye Adobe Photoshop ukuncedisa uyilo lomsebenzi wakho kwaye ubanike ukugqiba ngokugqibeleleyo. Namhlanje siza kubona kwesi sifundo sibanzi, indlela esinokulicwangcisa ngayo iphepha lewebhu sisebenzisa iAdobe Photoshop. Kule nxalenye yokuqala siza kuhlala emsebenzini oza kuphuhliswa ukusuka kwi-Photoshop, nangona kwizavenge ezizayo siza kubona ukuba singawusebenzisa njani lo msebenzi sele ungqo ngqo kwikhowudi ye-HTML ukuwenza usebenze.

Ukuqala kuyilo lwefowuni yethu yocingo

Ukuqala ngoyilo kunye noyilo lwephepha lewebhu, kubaluleke kakhulu ukuba siqale ngokuchaza ukuba zeziphi izinto ezisisiseko eziya kuba zezi, olu luhlu lwamathambo. Olu lwakhiwo luya kusebenza njengenkxaso yokubamba yonke imixholo (nokuba yeyokubhaliweyo okanye yemultimedia). Ngokuchaza icandelo ngalinye elenza iphepha lethu siya kuba nakho ukusebenza ngokuchanekileyo kwaye sinike uyilo olubonakalayo oluchanekileyo kangangoko.

Kubaluleke kakhulu ukuba sithathele ingqalelo ubungakanani eya kuthi iwebhusayithi yethu ibenayo, ukuba iya kuba nayo ibhokisi okanye ububanzi obugcweleyo. Iphepha lewebhu elibhokisi liya kuba ngaphakathi kwesikhongozeli esincinci kwaye ke indawo iya kuvela kuyo. Ngokuchasene noko, i-witdth web iyakuthi ihlale kwiscreen sonke sesixhobo esivelisa iphepha. Ukukhetha phakathi kwendlela enye okanye enye kuphendula imibuzo yesitayile kwaye kuya kuxhomekeka kwiimfuno zeprojekthi esisebenza kuyo. Siza kusebenza kulo mzekelo kunye nemowudi yebhokisi, ke ayizukuhlala kuwo wonke umhlaba obonelelwe ngumkhangeli.

Ukwenza i-wireframe, into yokuqala ekufuneka siyenzile kukufaka usetyenziso lweAdobe Photoshop kwaye kubandakanya nemilinganiselo esifuna ukuba nephepha lethu libe nayo. Kulo mzekelo iphepha lethu liya kuba ziiphikseli ezili-1280 ububanzi. Nangona kunjalo, umba wobungakanani unokuhluka ngokuxhomekeka kwindawo yokugqibela okanye isixhobo esifuna ukuvelisa kwakhona iphepha lethu. Alithandabuzeki elokuba uyilo lwewebhu ukuze lusebenze kwaye lusebenze ngokufanelekileyo, kufuneka lube njalo noluphendulayo kwaye kufuneka ivumelane nazo zonke izixhobo ezikwiimarike. Nangona kunjalo, kule meko siza kusebenza ukwenza iprototype esiza kuyenza kwakhona kwikhompyuter ye-desktop. Nangona kunjalo, umba ophendulayo uya kuxutyushwa kamva, okwangoku, nalu uluhlu lobungakanani bescreen sokusebenza kulo mzekelo. Gcina ukhumbula ukuba kule meko siza kwenza ubeko lwephepha lokufika kwiAdobe Photoshop emva koko silifudusele kwi-HTML5 Kunye ne-CSS3. Injongo yale nkqubo incinci kukuguqula uyilo olwenziwe kwiFotohop lube luyilo olusebenzisekayo nolunxibelelanayo lwewebhu oluphendula iintshukumo zomsebenzisi.

Imilinganiselo yeefowuni eziphathwayo

I-iPhone 4 kunye ne-4S: 320 x 480

I-iPhone 5 kunye ne-5S: 320 x 568

Ifowuni ye-6: 375 x 667

I-iPhone 6+: 414 x 736

INexus 4: 384 x 598

INexus 5: 360 x 598

IGalaxy S3, S4, S5: 360 x 640

I-HTC One: 360 x 640

Imilinganiselo yeetafile

I-iPad zonke iimodeli kunye ne-iPad Mini: 1024 x 768

Galaxy Tab 2 kunye 3 (7.0 intshi): 600 x 1024

Galaxy Tab 2 kunye 3 (10.1 intshi): 800 x 1280

INexus 7: 603 x 966

INexus 10: 800 x 1280

Umphezulu weMicrosoft W8 RT: 768 x 1366

Umphezulu weMicrosoft W8 Pro: 720 x 1280

Imilinganiselo yeekhompyuter zekhompyuter

Izikrini ezincinci (ezisetyenziselwa ukwenza umzekelo kwiincwadi zeencwadi): 1024 x 600

Izikrini eziphakathi: 1280 x 720/1280 x 800

Izikrini ezinkulu: ububanzi obukhulu kuneepikseli ezili-1400, umzekelo 1400 x 900 okanye 1600 x 1200.

Ukuqala ukusabalalisa izinto kunye nokunikezela amacandelo ngaphakathi kwewebhu yethu, kubaluleke kakhulu ukuba sithathele ingqalelo ubukhulu ukuqinisekisa ukufundeka kunye nokuphela komculo. Kuya kuba kubalulekile ukuba usebenzise imigaqo kunye nezikhokelo zokukhetha onokuzifumana kwimenyu ephezulu yokujonga. Ukusebenza ngokulinganayo nangokuchanekileyo, kungcono ukuba sisebenze ukusuka kwiipesenti. Siza kucofa kwimenyu yokujonga emva koko emva kokukhetha «Isikhokelo esitsha» ukukhetha indlela yokwahlulahlula. Kule meko siza kwenza izahlulo ezine ngokuthe nkqo kwi-25% kwaye siya kuzithatha njengesalathiso sokubeka imifanekiso yethu kwi-footer kunye nomfanekiso we-logo yethu entlokweni.

Kukho ikhowudi echaza indawo nganye eza kuhlala eyethu imodeli kunye nomsebenzi oya kuthi ngamnye abe nawo. Umzekelo, ukubonisa indawo oza kuhlala kuyo umfanekiso, siza kwenza ii-rectangles ngohlobo lomnqamlezo. Ukubonisa ukuba sifuna ukufaka iividiyo kwindawo ethile, siya kubandakanya isimboli yokudlala ngaphakathi kwesikhongozeli sethu. Kulo mzekelo wokuqala siza kusebenza kuphela nemifanekiso, ekubambeni okuphezulu ungabona indawo leyo logo kwiwebhusayithi yethu.

Esi iya kuba sisiphumo sesiphelo sethu ifayile. Njengoko sibona, yahlulahlulwe yentloko ebunjwe ngumfanekiso apho uphawu luya kufumaneka khona kwaye luya kusebenza njengekhonkco kwiphepha lasekhaya elihamba neethebhu ezimbini, injini yokukhangela kunye namaqhosha amane kwibhokisi yokukhangela. Ukongeza, sele sikulo mzimba, sifake ibha esecaleni enebha yokwahlulahlulahlula kunye noluhlu lweendidi ezihlela uhlobo lomxholo oza kubakho kwiwebhusayithi yethu. Elinye icandelo elinamanani afaka amangeniso aya kubakho kwindawo yethu, kwaye ekugqibeleni uluhlu olunezona meta tag okanye iilebhile ezikwindawo yethu.

Kwindawo yomxholo, eya kuchazwa licandelo eliya kubandakanya umxholo ozilawulayo, Siza kufumana umxholo wenqaku lethu. Kule meko, ii-breadcrumbs okanye i-breadcrumb (ebonisa ubume bewebhusayithi yethu, isihloko senqaku, imethadatha, umhlathi njengesiqendu sesicatshulwa, ngaphakathi apho kufakwe khona umfanekiso.

Njengombhalo weenyawo sibandakanye imifanekiso emine eya kusebenza njengesiqhagamshelo kwezinye iindawo zephepha lethu. Apha sinokubandakanya iilogo okanye amanye amacandelo anomdla. Nangona ngokwenyani, le ndawo iya kusebenza ngokungakumbi i-prefooter, kuba unyaweni ngokwawo uya kuhamba kancinci ezantsi kunye nomgaqo-nkqubo wokusetyenziswa, isaziso somthetho kunye nelungelo lokushicilela.

Nje ukuba sichaze ulwakhiwo olusisiseko okanye amathambo ephepha lethu, kuya kufuneka siye kwinqanaba elilandelayo. Oku kuya kubandakanya uyilo olufanelekileyo lwendawo nganye yewebhusayithi yethu. Ngamanye amagama, siya kuqala "ukuzalisa" nganye kwezi ndawo ngomxholo oya kuthi ekugqibeleni ufakwe kwiwebhusayithi yethu. Kuyacetyiswa ukuba singaziyili ezi zinto ngaphambi kokusebenza kwifowuni yocingo kuba kunokwenzeka ukuba ukuba siyenza ngolu hlobo, siya kufuna ukuguqula ubukhulu babo kamva. Sifaka umngcipheko wokugqwetha imifanekiso yethu kwaye kufuneka wenze kwakhona uyilo lwento nganye, eya kuthi ibe yinkcitho yexesha okanye isiphumo esisezantsi somgangatho.

Kule meko, uyilo lwewebhusayithi yethu luya kuba lula kakhulu. Siza kusebenzisa i Imiyalelo yoyilo lwezixhobo, kuba siza kusebenzisa ilogo kaGoogle ukubonisa lo mkhuba. Kuya kufuneka ndicacise ukuba injongo yesi sifundo kukubonisa ulwazi lobuchwephesha, ke isiphumo sobuhle kweli cala asinamsebenzi. Njengoko ubona, kancinci kancinci besizalisa indawo ngazo zonke iindawo ebesizimisele ngaphambili kwisikimu sethu. Nangona kunjalo, senze uhlengahlengiso oluncinci ngomzuzu wokugqibela. Njengoko uqaphele, sibunciphisile ubukhulu be logo yethu kwaye sibandakanyile ulwahlulo kwindawo esezantsi yentloko edibanisa ngokugqibeleleyo nemenyu ephezulu. Kule meko sisebenzise amaqhosha kunye nezinto ezivela kwibhanki yezixhobo. Njengabaqulunqi sinokuyiyila ngokwethu, (ngakumbi olu khetho luyacetyiswa ukuba sifuna ukuba lubonise i-tonic efanayo naleyo iboniswe ngumfanekiso wesimboli okanye i-logo).

Kubalulekile ukuba sikhumbule ukuba ukwenza lo mzekelo siza kusebenza kumanqanaba amabini ahlukeneyo. Kwelinye icala, siya kusebenza kwizinto kwaye kwelinye icala ukubonakala kwewebhusayithi. Oko kukuthi, kwelinye icala kumathambo ewebhusayithi yethu nakwelinye icala kubo bonke Izinto ezidadayo eziya kuthi zixhaswe ngala mathambo. Uyakuqaphela ukuba kukho iindawo ezingayi kudada konke konke, ezinje ngendawo eziza kuhlala kwibar esecaleni kwethu, i-preefooter okanye ibha yokwahlulahlulahlulahlula umxholo entlokweni.

Ulwakhiwo 1, 2, 3 kunye no-4 bayakuba yinxalenye ye- yangasemva kwiphepha lethu lewebhu, ke enyanisweni akuyi kuba yimfuneko kuthi ukuba sithumele ngaphandle okunjalo ukusuka kwiAdobe Photoshop, nangona singayenza, akuyomfuneko. Xa isiza Imibala eflethi (enye yezona zinto zibalulekileyo kuyilo olucwangcisiweyo kunye noyilo lwezixhobo, zinokusetyenziswa ngokugqibeleleyo ngekhowudi kusetyenziswa iphepha lesimbo leCSS). Nangona kunjalo, ezinye izinto kufuneka zigcinwe ukuze kufakwe kamva kwikhowudi yethu ye-HTML. Kule mzobo mncinci sivelise kwakhona iindawo ezingasemva kwephepha ukuze sibe nembono ecacileyo malunga nokubonakala kokugqibela kwesiza sethu.

Njengoko uza kuba nakho ukuqonda, uluvo lokwenza esi sikimu kwi-Adobe Photoshop kukufumana ubungakanani bokwenyani bento nganye, kunye nokucacisa ulungelelwaniso kunye nolwakhiwo lwento nganye. Ewe umxholo wokubhaliweyo awunandawo kwesi sigaba senkqubo kuba kufanelekile inikwe kumhleli wethu wekhowudi. Kuya kufuneka sikwazile ukuba kolu qheliselo, siza kusebenza namaqhosha kunye nezinto ezimileyo, nangona zihlala zisetyenziswa kwizakhelo ezinje ngeBootstrap okanye ngqo kwiJquery.

Nje ukuba senze nganye yezinto eziza kwenza iphepha lethu lewebhu, lixesha lokuba siqale ukuzithumela kwaye sizigcine kwifolda yemifanekiso ebekwe ngaphakathi kwifolda yeprojekthi ye-HTML. Kubalulekile ukuba uqhelisele ukuthumela ngaphandle kwifowuni yakho yefowuni, kuba kunokwenzeka kakhulu ukuba kuya kufuneka uguqulule ezinye zezinto zokuqala ezisekwe kuqwalaselo lwamathambo. (Umzekelo, kule meko, sitshintshe ubungakanani bamaqhosha oqobo, ilogo kunye nezinto ezininzi eziyinxalenye yokwakhiwa, kubandakanya imifanekiso ekummandla osezantsi).

Kubalulekile ukuba sifunde ukugcina nayiphi na into ngokuzimeleyo ukuyigcina ngemilinganiselo abanayo kwaye ngendlela echanekileyo. Nayiphi na impazamo, nangona incinci, inokuchaphazela zonke izinto eziyinxalenye yephepha lakho lewebhu. Gcina ukhumbula ukuba ziya kudibana kwaye kufuneka zibe nemilinganiselo efanelekileyo ukuze zingeniswe kwi-HTML kwiwebhu yokugqibela. Kule meko, siya kufuna ukusika ngokuzimeleyo kwaye sigcine izinto ezilandelayo:

• Ilogo yethu.
• Onke amaqhosha (lawo ayinxalenye yemenyu ephambili kunye nokunye).
• Yonke imifanekiso.

Singayenza ngeendlela ezininzi kwaye mhlawumbi uya kufumana enye esebenzayo ngakumbi kuwe. Kodwa ukuba lixesha lokuqala ukuba uza kwenza olu hlobo lobeko, ndincoma ukuba ulandele ezi ngcebiso zilandelayo.

• Kuqala, kuya kufuneka ungene kwifolda apho ifayile yePSD equlethwe yifowuni yocingo kwaye uyiphindaphinde amaxesha amaninzi nezinto oya kuzithumela kwelinye ilizwe. Kule meko senze iikopi ezili-12 ezivela koqobo kwaye sizigcine kwifolda efanayo. Emva koko, uya kuyinika elinye igama ikopi nganye kwaye unike nganye nganye igama lento ekuyo. Iikopi zethu ezili-12 ziya kuthiywa igama: iLogo, iqhosha lemenyu 1, iqhosha lemenyu 2, ibha yokukhangela, iqhosha elingaphezulu 1, iqhosha elingaphezulu 2, iqhosha elingaphezulu 3 kunye neqhosha elingaphezulu. Ezine ezishiyekileyo ziya kuthiywa igama elitsha: Umfanekiso 4 kunye noMfanekiso 1.
• Nje ukuba kwenziwe oku siya kuvula ifayile enegama le logo.
• Siza kuya kwiphalethi yethu yokwahlula kwaye sifumane umaleko oqukethe ilogo yethu. Emva koko siya kucinezela Ctrl / Cmd Ngelixa sicofa kwi-thumbnail yomaleko othethiweyo. Ngale ndlela ilogo iya kukhethwa ngokuzenzekelayo.
• Isinyathelo esilandelayo siya kuba kukuxelela i-Photoshop ukuba sifuna ukuba iyinqumle loo logo ngendlela echanekileyo. Ngale nto kuyakufuneka senze umnxeba kwisixhobo sokususa kwisitshixo okanye kumyalelo C.
• Nje ukuba sikwenze oku siya kucofa kwiqhosha lethu lokungena ukuqinisekisa ukusikwa.
• Ngoku siya kwimenyu ephezulu yeFayile ukucofa ekugcineni. Siza kukhetha igama, kulo mzekelo liya kuba ngu «logo» kwaye siya kunika ifomathi PNG, kuba yile fayile ebonelela ngomgangatho ophezulu kwiwebhu.
• Siza kuyiphinda inkqubo ngazo zonke iikopi kunye nezinto. Xa usikiwe, qiniseka ukuba zonke ezinye izinto ezikwiiphalethi zethu zezi engabonakaliyo okanye isuswe. Ngale ndlela sinokugcina into nganye inemvelaphi ebonakalayo.

Kule meko sikhetha imenyu yethu yeqhosha 2 kwiiphalethi zomaleko. Uyabona kwiscreenshot ukuba imida yeqhosha lethu ikhethwe njani ngokuzenzekelayo.

Nje ukuba sikhethe isixhobo sokusika kwiqhosha C, i-canvas yethu iyancitshiswa kuphela kubungakanani beqhosha lethu.

Ngoku lixesha lokugcina nganye nganye zonke izinto eziyinxalenye yewebhusayithi yethu kwaye sizifaka kwifolda yemifanekiso kwaye siza kuyisebenzisa kamva. Siza kwenza umnxeba ukusuka kwikhowudi yethu kwaye siya kuqhubeka nobeko lwethu kodwa ukusukela ngoku ukusuka kumhleli wekhowudi yethu.

Nangona kukho izixhobo ezininzi kunye nezinye iindlela zokuyilwa kwephepha lewebhu kwaye ezenza ukuba inkqubo ibenomdla ngokupheleleyo, kubaluleke kakhulu ukuba sifunde ukuyenza ngezandla. Ngale ndlela siza kufunda ukuba zeziphi izinto ezisisiseko emva koyilo lwephepha lewebhu.

Isishwankathelo:

1. Yila i isakhiwo Yewebhusayithi ihlawula ngokukodwa umxholo ofuna ukuwudlulisa kunye namacandelo ekufuneka uwenze kwiwebhusayithi yakho.
2. Sebenza kumathambo akho okanye ifayile ukusuka kwiAdobe Photoshop ebonisa ukuba zeziphi iindawo imixholo ezakuvela kunye nefomathi yazo.
3. Ukuthembela kumanyathelo kunye neempawu esele uziphuhlisile, qala uyilo umphezulu wewebhu. Ibandakanya zonke izinto (zombini zidada kwaye zilungisiwe). Ungalibali ukufaka amaqhosha ahambelanayo, ilogo kunye nemifanekiso.
4. Sika onke amanqaku ayinxalenye yeprojekthi nganye nganye. Qinisekisa ukuba banamanyathelo afanelekileyo kwaye ngekhe bakubangele iingxaki kamva.
5. Gcina zonke izinto ngefomathi PNG kwifolda yemifanekiso ngaphakathi kwifolda yeprojekthi HTML.
6. Gcina ukhumbula ukuba le projekthi iya kuba nemveliso kwiwindow yewebhu ke ngoko kubaluleke kakhulu ukuba uyithathele ingqalelo indlela yombala kwaye usebenzise RGB.
7. Khuthazwa ngamanye amaphepha ewebhu owathandayo ngaphambi kokuba uye emsebenzini, kwaye ungalibali ukuxoxa ngale nto kunye namalungu eqela lakho. Kwimeko apho yiprojekthi yomthengi, zama ukunamathela kwi ngcaciso kangangoko kunokwenzeka.