Okokufundisa: Ungalihlela kanjani ikhasi lewebhu nge-Adobe Photoshop

Kunezinhlobonhlobo zamathuluzi wokuqamba amakhasi ewebhu futhi asebenze ngendlela elula nasebenzayo ngaphandle kokufaka noma ukuthinta ikhodi. Akunakubalwa, kuhlongozwa izinhlelo zokusebenza (I-Adobe Dreamweaver yisibonelo) noma ngqo ngamapulatifomu aku-inthanethi anjengeWix. Kodwa-ke, kumklami wewebhu, ukwazi izinqubo ezenziwa ngesandla kubalulekile. I-HTML5 ne-CSS yizinsika eziyisisekelo zokuhlelwa kwamawebhusayithi namakhasi okufika.

Kodwa-ke, kaningi kunokulindela, kuzofanele uphendukele kuzinhlelo zokusebenza ezinjenge-Indesign noma I-Adobe Photoshop ukugcwalisa umsebenzi wakho wesakhiwo bese ubanikeza isiphetho esihle. Namuhla sizobona kulesi sifundo esibanzi, ukuthi singahlela kanjani ikhasi lewebhu sisebenzisa i-Adobe Photoshop. Kule ngxenye yokuqala sizohlala emsebenzini ozothuthukiswa kusuka ku-Photoshop, yize kwizitolimende ezizayo sizobona ukuthi lo msebenzi singawusebenzisa kanjani ngqo kwikhodi ye-HTML ukuwenza usebenze.

Ukuqala ngomklamo wegama lethu locingo

Ukuqala ngokuhlelwa nokwakheka kwekhasi lewebhu, kubaluleke kakhulu ukuthi siqale ngokuchaza ukuthi izakhi eziyisisekelo zizoba yini, nanka ama-skeleton. Lesi sakhiwo sizosebenza njengesisekelo sokubamba konke okuqukethwe (noma ngabe kungumbhalo noma i-multimedia). Ngokuchaza isigaba ngasinye esakha ikhasi lethu, singasebenza kuzo ngokunemba okuphelele futhi sinikeze umklamo wokubuka onembe ngangokunokwenzeka.

Kubaluleke kakhulu ukuthi sibheke ubukhulu i-webhusayithi yethu ezoba nayo, uma izoba nefayela le- ibhokisi noma ububanzi obugcwele. Ikhasi lewebhu elibhokisiwe lizoba ngaphakathi kwesitsha esincane ngakho-ke isikhala sizovela sizungeze sona. Ngokuphambene nalokho, i-witdth web ephelele izothatha sonke isikrini sedivayisi esikhiqiza ikhasi. Ukukhetha phakathi kwendlela eyodwa noma enye kuphendula imibuzo yesitayela futhi kuzoncika nasezidingweni zephrojekthi esisebenza kuyo. Sizosebenza kulesi sibonelo ngemodi ebhokisini ngakho-ke ngeke ithathe sonke isikhala esinikezwe isiphequluli.

Ukwakha i-wireframe yethu, into yokuqala okufanele siyenze ukufaka uhlelo lwe-Adobe Photoshop bese sifaka ubukhulu esifuna ikhasi lethu libe nalo. Kulesi sibonelo ikhasi lethu lizoba ngamaphikseli ayi-1280 ububanzi. Kodwa-ke, udaba losayizi lungahluka ngokuya ngendawo yokugcina noma idivaysi esifuna ukukhiqiza kuyo ikhasi lethu. Akungabazeki ukuthi ukuze ukwakheka kwewebhu kusebenze futhi kusebenze kahle, kufanele kube njalo isabele futhi kufanele ivumelane nawo wonke amadivayisi asemakethe. Kodwa-ke, kulokhu sizosebenzela ukudala uhlobo oluthile esizolukhiqiza kabusha kwikhompyutha yedeskithophu. Noma kunjalo, inkinga ephendulayo esizobhekana nayo ngokuhamba kwesikhathi, okwamanje, nansi isigaba sobukhulu besikrini esizosebenza naso kulesi sibonelo. Khumbula ukuthi kulokhu sizokwenza ukwakheka kwekhasi lokufika ku-Adobe Photoshop bese silithuthela ku-HTML5 KANYE ne-CSS3. Inhloso yalo mkhuba omncane ukuguqula idizayini eyenziwe ku-Photoshop ibe i-web design esetshenziswayo nesebenzisanayo ephendula ukunyakaza komsebenzisi.

Izilinganiso zomakhalekhukhwini

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

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

I-iPhone 6: 375 x 667

I-iPhone 6+: 414 x 736

I-Nexus 4: 384 x 598

I-Nexus 5: 360 x 598

I-Galaxy S3, S4, S5: 360 x 640

I-HTC One: 360 x 640

Izilinganiso zamathebulethi

I-iPad wonke amamodeli kanye ne-iPad Mini: 1024 x 768

I-Galaxy Tab 2 no-3 (7.0 amayintshi): 600 x 1024

I-Galaxy Tab 2 no-3 (10.1 amayintshi): 800 x 1280

I-Nexus 7: 603 x 966

I-Nexus 10: 800 x 1280

IMicrosoft Surface W8 RT: 768 x 1366

IMicrosoft Surface W8 Pro: 720 x 1280

Izilinganiso zamakhompyutha wedeskithophu

Izikrini ezincane (ezisetshenziselwa ukwenza isibonelo kuma-netbook): 1024 x 600

Izikrini eziphakathi: 1280 x 720/1280 x 800

Izikrini ezinkulu: ububanzi obukhulu kunamaphikseli ayi-1400, isibonelo 1400 x 900 noma 1600 x 1200.

Ukuqala ukusabalalisa ama-elementi nokwabela izigaba ngaphakathi kwe-web mockup yethu, kubaluleke kakhulu ukuthi sibheke izilinganiso ukuqinisekisa ukuphela okufundekayo nokomculo. Kuzoba kubalulekile ukuthi usebenzise izinketho zemithetho nemihlahlandlela ongayithola ekubukeni kwemenyu ephezulu. Ukuze sisebenze ngokulingana nangokuqondile, kungcono ukuthi sisebenze kusuka kumaphesenti. Sizocofa kumenyu yokubuka bese sikhetha inketho «Umhlahlandlela omusha» ukukhetha isimo sokwahlukana. Kulokhu sizokwenza ukwahlukana okumi mpo ku-25% futhi sizokuthatha njengesithenjwa sokubeka izithombe zethu kunyaweni kanye nomfanekiso welogo yethu kunhlokweni.

Kukhona ikhodi yokuqoka indawo ngayinye ezohlala eyethu imodeli nomsebenzi ngamunye wabo azoba nawo. Isibonelo, ukukhombisa indawo isithombe esizohlala kuyo, sizokwakha onxande ngohlobo lwesiphambano. Ukukhombisa ukuthi sifuna ukufaka amavidiyo endaweni ethile, sizofaka uphawu lokudlala ngaphakathi kwesiqukathi sethu. Kulesi sibonelo sokuqala sizosebenza ngezithombe kuphela, ekubambeni okuphezulu ungabona indawo leyo logo kusuka kuwebhusayithi yethu.

Lokhu kungaba umphumela wokugcina we i-wireframe. Njengoba sibona, ihlukaniswe yaba unhlokweni onomfanekiso lapho kutholakala khona uphawu lwazo futhi oluzosebenza njengesixhumanisi ekhasini lasekhaya elihambisana namathebhu amabili, injini yokusesha nezinkinobho ezine ebhokisini lokusesha. Ngaphezu kwalokho, ngaphakathi emzimbeni, sifake ibha eseceleni enebha ehlukanisayo nochungechunge lwezigaba ezihlukanisa uhlobo lokuqukethwe okuzoba kuwebhusayithi yethu. Esinye isigaba esinenombolo esifaka okufakiwe okuzoba khona kusayithi lethu, futhi ekugcineni kube nohlu olunamathegi amele kakhulu esayithi lethu.

Endaweni yokuqukethwe, ezochazwa yisigaba esizofaka phakathi okuqukethwe okuzilawulekayo, sizothola okuqukethwe izindatshana zethu. Kulokhu, ama-breadcrumbs noma i-breadcrumb (ekhombisa ukwakheka kwe-webhusayithi yethu, isihloko sendatshana, imethadatha, isigaba njengomzimba wombhalo, lapho kufakwa khona isithombe.

Njengonyaweni sifake izithombe ezine ezizosebenza njengesixhumanisi kwezinye izindawo zekhasi lethu. Lapha singafaka ama-logo noma ezinye izigaba ezithokozisayo. Yize empeleni, le ndawo izosebenza ngokufana owandulela unyawo, ngoba unyaweni uqobo luzoqhubeka kancane phansi nenqubomgomo yokusebenzisa, isaziso somthetho nelungelo lobunikazi.

Lapho sesichaze ukwakheka okuyisisekelo noma amathambo ekhasi lethu, kuzofanele siye ezingeni elilandelayo. Lokhu kuzoba nokwakhiwa okufanele kwendawo ngayinye yewebhusayithi yethu. Ngamanye amagama, sizoqala "ukugcwalisa" ngayinye yalezi zindawo ngokuqukethwe okuzogcina kufakwe kuwebhusayithi yethu. Kunconywa ukuthi singazakhi lezi zinto ngaphambi kokusebenza ku-wireframe ngoba kungenzeka kakhulu ukuthi uma sikwenza ngale ndlela, sizodinga ukuguqula ubukhulu bazo ngokuhamba kwesikhathi. Sifaka engcupheni yokuhlanekezela izithombe zethu futhi nokwenza kabusha ukwakhiwa kwesakhi ngasinye, okuzoba ukuchitha isikhathi noma umphumela wekhwalithi ephansi.

Kulokhu, ukwakheka kwewebhusayithi yethu kuzoba lula ngokwedlulele. Sizosebenzisa i- izimiso zokwakhiwa kwempahla, ngoba sizosebenzisa ilogo yeGoogle ukwenza lo mkhuba. Kumele ngicacise ukuthi inhloso yalesi sifundo ukukhombisa ulwazi lobuchwepheshe, ngakho-ke umphumela wobuhle kuleli cala awusebenzi. Njengoba ukwazi ukubona, kancane kancane besilokhu sigcwalisa isikhala ngazo zonke izindawo ebesizinqume phambilini esikimini sethu. Kodwa-ke, senze ukuguqulwa okuncane ngomzuzu wokugcina. Njengoba kungenzeka uqaphele, sinciphise ubukhulu be-logo yethu kakhulu futhi sifake umugqa ohlukanisayo endaweni kanhlokweni ophansi oxhuma ngokuphelele nemenyu ephezulu. Kulokhu sisebenzise izinkinobho nezinto zokwakha ezivela ebhange lezinsizakusebenza. Njengabaqambi singakwazi ukuziklama ngokwethu, (ikakhulukazi le nketho iyanconywa uma sifuna ukuthi yethule i-tonic efanayo kakhulu naleyo eyethulwe isithombe somkhiqizo noma i-logo).

Kubalulekile ukuthi sikhumbule ukuthi ukwenza lesi sibonelo sizosebenza emazingeni amabili ahlukene. Ngakolunye uhlangothi, sizosebenza ezintweni ngakolunye uhlangothi ukubukeka kwewebhusayithi. Okusho ukuthi, ngakolunye uhlangothi emathanjeni ewebhusayithi yethu futhi ngakolunye uhlangothi kukho konke izinto ezintantayo ezizosekelwa yileli skeleton. Uzobona ukuthi kunezindawo ezingeke zintanta nhlobo, njengendawo okuzongena kuyo ibha yethu eseceleni, i-preefooter noma ibha ehlukanisayo ehlukanisa unhlokweni emzimbeni.

Izakhiwo 1, 2, 3 no-4 zizoba yingxenye ye- Isizinda wekhasi lethu le-web, ngakho-ke empeleni ngeke kudingeke ukuthi sikhiphele kanjalo kusuka ku-Adobe Photoshop, noma singakwenza, akudingekile. Uma kukhulunywa nge Imibala eflethi (Enye yezinto ezibalulekile zokwakhiwa okuyisicaba nokwakhiwa kwezinto ezibonakalayo, zingasetshenziswa ngokuphelele ngekhodi kusetshenziswa isitayela seCSS). Kodwa-ke, zonke ezinye izinto kufanele zigcinwe ukuze zifakwe kamuva kukhodi yethu ye-HTML. Kulo mdwebo omncane siphinde sakhiqiza izindawo ezingemuva kwekhasi ukuze sibe nombono ocacile wokuthi ukubonakala kokugcina kwesayithi lethu kuzoba yini.

Njengoba uzokwazi ukubona, inhloso yokwakha lolu hlelo ku-Adobe Photoshop ukuthola ubukhulu bento ngayinye, futhi ucacise ukuhleleka nokwakheka kwento ngayinye. Vele, okuqukethwe kombhalo akunandawo kulesi sigaba senqubo ngoba kufanele kube njalo kunikezwe kusuka kusihleli sekhodi yethu. Kumele futhi siveze ukuthi kulo mkhuba, sizosebenza ngezinkinobho nezinto ezimile, yize ngokuvamile lokhu kusetshenziswa ezinhlakeni ezifana neBootstrap noma ngqo kusuka eJquery.

Lapho sesenze into ngayinye ezokwakha ikhasi lethu lewebhu, sekuyisikhathi sokuqala ukuzithumela futhi sizilondoloze kufolda yezithombe etholakala ngaphakathi kwefolda yephrojekthi ye-HTML. Kubalulekile ukuthi ujwayele ukukhipha kusuka ku-wireframe yakho, ngoba kungenzeka kakhulu ukuthi uzodinga ukuguqula ezinye zezinto zoqobo ngokususelwa ekucushweni kwamathambo. (Isibonelo, kulokhu, sishintshe usayizi wezinkinobho zoqobo, ilogo nezinto eziningi eziyingxenye yokwakhiwa, kufaka phakathi izithombe ezisendaweni engezansi).

Kubalulekile ukuthi sifunde ukonga noma iyiphi into ngokuzimela ukuyigcina ngobukhulu abanabo nangendlela eqondile. Noma iliphi iphutha, noma lilincane kangakanani, lingaba nomthelela kuzo zonke izinto eziyingxenye yekhasi lakho lewebhu. Hlala wazi ukuthi zizohlobana futhi kufanele zibe nobukhulu obuhle ukuze zifakwe zisuka ku-HTML kuwebhu yokugcina. Kulokhu, sizodinga ukusika ngokuzimela bese sigcina izinto ezilandelayo:

• Ilogo yethu.
• Zonke izinkinobho (lezo eziyingxenye yemenyu enkulu nokunye okusele).
• Zonke izithombe.

Singakwenza ngezindlela eziningi futhi mhlawumbe uzothola enye indlela ephumelela kakhulu kuwe. Kepha uma kungokokuqala ukuthi wenze lolu hlobo lwesakhiwo, ngincoma ukuthi ulandele amathiphu alandelayo.

• Okokuqala, kufanele uye kufolda lapho kutholakala khona ifayela le-PSD eliqukethe i-wireframe yethu bese uliphinda kaningi njengezinto ozozikhipha. Kulokhu sidale amakhophi ayi-12 asuka koqobo futhi siwagcine kwifolda efanayo. Okulandelayo, uzoqamba kabusha elinye nelinye lamakhophi bese unikeza ngalinye lawo igama lento eliqukethe. Amakhophi ethu ayi-12 azoqanjwa kabusha: Ilogo, inkinobho yemenyu 1, inkinobho yemenyu 2, ibha yokusesha, inkinobho ephezulu 1, inkinobho ephezulu 2, inkinobho ephezulu 3 kanye nenkinobho ephezulu. Isithombe 4 nesithombe 1.
• Uma lokhu sekuqedile sizovula ifayela ngegama le-logo.
• Sizoya kuphalethi lethu lesendlalelo bese sithola ungqimba oluqukethe uphawu lwethu. Ngemuva kwalokho sizocindezela Ctrl / Cmd ngenkathi sichofoza isithonjana sesendlalelo esishiwoyo. Ngale ndlela, i-logo izobe ikhethwe ngokuzenzekelayo.
• Isinyathelo esilandelayo kuzoba ukutshela i-Photoshop ukuthi sifuna ukuthi isike leyo logo ngendlela eqondile. Ngalokhu kuzofanele senze ikholi kuthuluzi lokunqampula kusuka kukhiye noma kumyalo C.
• Uma sesikwenzile lokhu sizocindezela inkinobho yethu yokufaka ukuqinisekisa ukusika.
• Manje sizoya kwimenyu ephezulu yefayela ukuze sichofoze ku-save how. Sizokhetha igama, kulokhu kuzoba yi- «Logo» futhi sizokwabela ifomethi I-PNG, ngokuba yifayela elinikeza ikhwalithi ephezulu kakhulu kuwebhu.
• Sizophinda inqubo ngawo wonke amakhophi nezinto. Uma usikile, qiniseka ukuthi zonke ezinye izingqimba kuphalethi lethu ezingabonakali noma kuqedwe. Ngale ndlela singagcina into ngayinye ngemvelaphi ebonakalayo.

Kulokhu sikhetha inkinobho yethu yemenyu 2 kusuka kuphalethi yezendlalelo. Ungabona ku-skrini ukuthi imikhawulo yenkinobho yethu ikhethwe kanjani ngokuzenzakalela.

Lapho sesikhethe ithuluzi lokunqampula kukhiye C, indwangu yethu yehliswa kuphela kubukhulu benkinobho yethu.

Manje yisikhathi sokugcina ngakunye zonke izinto eziyingxenye yewebhusayithi yethu futhi sizifake kufolda yezithombe esizoyisebenzisa ngokuhamba kwesikhathi. Sizoshaya izingcingo kusuka kukhodi yethu futhi sizoqhubeka nokuhlelwa kwethu kepha kusukela manje kusuka kusihleli sekhodi yethu.

Yize kunamathuluzi amaningi kanye nezinye izindlela zokuhlela ikhasi lewebhu elenza inqubo ibe enembile ngokuphelele, kubaluleke kakhulu ukuthi sifunde ukukwenza inhlukano. Ngale ndlela sizofunda ukuthi yiziphi izisekelo eziyisisekelo zokwakhiwa kwekhasi lewebhu.

Isifingqo:

1. Yakha i- isakhiwo wewebhusayithi unake ngokukhethekile okuqukethwe ofuna ukukudlulisa kanye nezigaba okufanele uzenze kuwebhusayithi yakho.
2. Sebenza emathanjeni akho noma i-wireframe kusuka ku-Adobe Photoshop ekhombisa ukuthi okuqukethwe kuzovela kuziphi izindawo nefomethi yazo.
3. Ukuthembela kuzinyathelo nemikhiqizo oyithuthukisile phambilini, qala kuyo ukwakheka ubuso bewebhu. Kufaka zonke izinto (zombili ezintantayo nezingaguquki). Ungakhohlwa ukufaka izinkinobho ezihambisanayo, ilogo, nezithombe.
4. Sika zonke izinto eziyingxenye yephrojekthi ngayinye ngayinye. Qiniseka ukuthi banezinyathelo ezifanele nokuthi ngeke bakudalele izinkinga ngokuhamba kwesikhathi.
5. Gcina zonke izinto ngefomethi I-PNG kufolda yezithombe ngaphakathi kwefolda yephrojekthi i-HTML.
6. Yazi ukuthi le phrojekthi izoba nokukhishwa ewindini lewebhu ngakho-ke kubaluleke kakhulu ukuthi ucabangele imodi yombala bese usebenzisa RGB.
7. Thola ugqozi ngamanye amakhasi wewebhu owathandayo ngaphambi kokuya emsebenzini, futhi ungakhohlwa ukuxoxa ngalokhu namalungu eqembu lakho. Uma kwenzeka kuyiphrojekthi yeklayenti, zama ukunamathela ku- ukuxoxa ngangokunokwenzeka.