Dzidziso: Maitiro ekumisikidza peji rewebhu neAdobe Photoshop

Iko kune kwakakura kwakasiyana maturusi ekugadzira mapeji ewebhu uye kushanda nenzira yakapusa uye inoshanda pasina kupinda kana kubata kodhi. Izvo zvisingaverengeke, zvinokurudzirwa nemaapplication (Adobe Dreamweaver muenzaniso) kana zvakananga nemapuratifomu epamhepo senge Wix. Nekudaro, kune webhu dhizaini, kuziva manyorerwo maitiro akakosha. HTML5 neCSS ndiyo mbiru dzakakosha dzekumisikidzwa kwemawebhusaiti uye mapeji ekumhara.

Nekudaro, kazhinji kazhinji kupfuura zvaungatarisira, uchafanirwa kutendeukira kune zvinoshandiswa seIndesign kana Adobe Photoshop kutsigira yako yekumisikidza basa uye kuvapa iwo akakwana magumo. Nhasi tichaona mune ino yakazara dzidziso, maitiro ekuronga peji rewebhu tichishandisa Adobe Photoshop. Muchikamu chekutanga ichi tichagara mubasa rinofanira kuvandudzwa kubva kuPhotohop, kunyangwe muzvikamu zvenguva yemberi tichaona mashandisiro atingaite basa iri kare muHTML kodhi kuti riite riite.

Kutanga nemagadzirirwo eedu wayaframe

Kutanga nekugadzwa uye dhizaini yewebhu peji, zvinonyanya kukosha kuti titange nekutsanangura izvo zvichave zvinhu zvekutanga, aya ndiwo mafupa. Ichi chimiro chinoshanda senge rutsigiro kubata zvese zvirimo (kungave zvinyorwa kana zvemultimedia). Nekutsanangura chimwe nechimwe chezvikamu zvinoumba peji redu, tinogona kushanda pazviri nemazvo zvakakwana uye nekupa dhizaini yekuona iri chaiyo sezvinobvira.

Izvo zvakakosha kuti isu titarise nezve zviyero izvo webhusaiti yedu ichave nazvo, kana ichave iine boxed kana Yakazara-upamhi. Rakavharwa peji rewebhu richava mukati memudziyo mudiki uye nekudaro nzvimbo ichaonekwa yakatenderedza. Pane kupokana, iyo yakazara witdth webhu inotora iyo yakazara skrini yeiyo kifaa inoburitsa peji racho. Kusarudza pakati pemaitiro kana imwe kupindura kungoita mibvunzo uye zvinoenderana nezvinodiwa zveprojekti yatiri kushanda. Isu tichashanda mune uyu muenzaniso nemabhokisi modhi saka haizotora nzvimbo yese yakapihwa nebrowser.

Kugadzira yedu wireframe, chinhu chekutanga chatinofanira kuita kuisa yeAdobe Photoshop application uye kusanganisa zviyero zvatinoda kuti peji redu rive naro. Mumuenzaniso uyu peji redu rinenge rakareba pixels mazana mapfumbamwe nemakumi masere. Nekudaro, saizi nyaya inogona kusiyana zvichienderana nekwekupedzisira kuenda kana chishandiso chatiri kuda kubereka peji redu. Iko hakuna kupokana kuti kuti webhu dhizaini ive inoshanda uye inoshanda, inofanirwa kuve iri wirirana uye inofanirwa kuchinjana nemidziyo yese iri pamusika. Nekudaro, mune ino kesi isu tiri kuzoshanda kugadzira prototype iyo yatiri kuzoberekesa pakombuta yedesktop. Kunyangwe zvakadaro, iyo inoteerera nyaya yatichazobata nayo gare gare, ikozvino, heino hutongi hwehukuru hweescreen yekushandira pane uyu muenzaniso. Ramba uchifunga kuti mune ino kesi tichaita marongero einomhara peji muAdobe Photoshop uye wozoiendesa kune HTML5 NE CSS3. Chinangwa cheichi chiito chidiki kushandura dhizaini yakagadzirwa muPhotohop mune ino shandisika uye inowirirana dhizaini yewebhu inopindura mafambiro emushandisi.

Zviyero zvefoni mbozha

iPhone 4 uye 4S: 320 x 480

iPhone 5 uye 5S: 320 x 568

iPhone6: 375x667

iPhone 6+: 414x736

Nexus 4: 384 x 598

Nexus 5: 360 x 598

Galaxy S3, S4, S5: 360x640

HTC Imwe: 360 x 640

Mahwendefa kuyerwa

iPad mhando dzese pamwe nePad Mini: 1024 x 768

Galaxy Tab 2 uye 3 (7.0 inches): 600 x 1024

Galaxy Tab 2 uye 3 (10.1 inches): 800 x 1280

Nexus 7: 603 x 966

Nexus 10: 800 x 1280

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Zviyero zvemakomputa edesktop

Zvidzitiro zvidiki (zvinoshandiswa semuenzaniso mumabhuku emabhuku): 1024 x 600

Medium skrini: 1280 x 720/1280 x 800

Makuru masikirini: upamhi hwakakura kupfuura mapikiseti e1400, semuenzaniso 1400 x 900 kana 1600 x 1200.

Kutanga kugovera zvinhu uye nekupa zvikamu mukati medu webhu, zvakakosha kuti titarise zviyero kuti tive nechokwadi chekuverengeka uye melodic kupera. Zvichave zvakakosha kuti iwe ushandise sarudzo dzemitemo uye magwara aunogona kuwana mune yepamusoro menyu Tarisa. Kuti tishande nenzira yakaenzana uye chaiyo, zvakanakisa kuti isu tishande kubva muzana. Tichadzvanya pane yekuona menyu uyezve pane sarudzo «Nyowani gwara» kusarudza maitiro echikamu. Mune ino kesi tichaita mana akamira akapatsanuka pa25% uye isu tichavatora sereferenzi yekuisa mifananidzo yedu mutsoka uye mufananidzo wechiratidzo chedu mumusoro.

Iko kune kodhi yekutsanangura yega yega yenzvimbo dzinotora yedu muenzaniso uye basa iro rimwe nerimwe richava naro. Semuenzaniso, kuratidza nzvimbo inozogarwa nemufananidzo, isu tinogadzira marange ane mhando yemuchinjikwa. Kuratidza kuti tinoda kuisa mavhidhiyo mune imwe nzvimbo, isu tinosanganisira chiratidzo chekutamba mukati memudziyo wedu. Mumuenzaniso wekutanga uyu tiri kungoshanda chete nemifananidzo, mune yepamusoro kubatwa iwe unogona kuona iyo nzvimbo iyo iyo logo kubva pawebhusaiti yedu.

Izvi ndizvo zvaizoguma mhedzisiro yedu wireframe. Sekuona kwedu, iyo yakakamurwa kuita musoro unoumbwa nemufananidzo umo logo yacho ichawanikwa uye inozoshanda sechibatanidza kune peji rekumba rinofambidzana nemaviri mabhu, injini yekutsvaga uye mabhatani mana pabhokisi rekutsvaga. Uye zvakare, yatove mukati memuviri, isu takasanganisira bharati repadivi rinoumbwa nebara rekuparadzanisa uye nhevedzano yezvikamu zvinokamuranisa mhando yezvinyorwa zvichave pane webhusaiti yedu. Chimwe chikamu chine manhamba chinosanganisira zvinyorwa zvichave zviripo pane yedu saiti, uye pakupedzisira runyorwa rine anomiririra meta tag pane yedu saiti.

Munzvimbo yezvirimo, inozotsanangurwa nechikamu chinosanganisira zvoga-zvinogoneka zvemukati, isu tichawana zvirimo zvezvinyorwa zvedu. Mune ino kesi, breadcrumbs kana breadcrumb (iyo inoratidza chimiro chehupenyu hwewebhu webhusaiti, zita rechinyorwa, metadata, ndima seboka remavara, mukati mayo mufananidzo unosanganisirwa.

Sekutsoka isu takasanganisira mifananidzo mina iyo inozoshanda sechibatanidza kune dzimwe nzvimbo dzepeji redu. Pano tinogona kusanganisira marogo kana zvimwe zvinonakidza zvikamu. Kunyangwe muchokwadi, ino nzvimbo ichaita senge prefooter, sezvo tsoka pachezvayo ichaenda kumberi pasi pasi nemutemo wekushandisa, ziviso yepamutemo uye copyright.

Kana tangotsanangudza chimiro chakakosha kana marangwanda epeji redu, isu tichafanirwa kuenda padanho rinotevera. Izvi zvichave nemagadzirirwo akafanira enzvimbo imwe neimwe yewebhusaiti yedu. Mune mamwe mazwi, isu tinotanga "kuzadza" yega yega nzvimbo nenzvimbo dzinozopedzisira dzaiswa pane yedu webhusaiti. Zvinokurudzirwa kuti isu tisatange kugadzira zvinhu izvi tisati tashanda pane wayaframe nekuti zvinowanzoitika kuti kana tikazviita nenzira iyi, gare gare isu tinofanirwa kugadzirisa zviyero zvavo. Isu tinomhanya nenjodzi yekukanganisa mifananidzo yedu uye kuita zvekare dhizaini yechimwe nechimwe chezvinhu, icho chingave chiri kutambisa nguva kana yakaderera mhando mhedzisiro.

Mune ino kesi, dhizaini yewebhusaiti yedu ichave yakapusa zvakanyanya. Isu tinoshandisa iyo zvigadzirwa zvekugadzira zvirevo, sezvo tichizoshandisa logo yeGoogle kuratidza iyi tsika. Ini ndinofanira kujekesa kuti chinangwa chedzidziso iyi ndechekuenzanisira ruzivo rwehunyanzvi, saka mhedzisiro yekuita mune ino kesi haina basa. Sezvauri kuona, zvishoma nezvishoma isu tanga tichizadza nzvimbo nenzvimbo dzese dzatakatema kare muchirongwa chedu. Nekudaro, isu takaita shanduko diki paminiti yekupedzisira. Sezvaungave iwe wakacherekedza, isu takadzora saizi yeyedu logo zvakanyanya uye isu takasanganisira tambo yekukamuranisa munzvimbo yepazasi yemusoro inobatana zvakakwana nemenyu yepamusoro. Mune ino kesi isu takashandisa mabhatani uye zvigadzirwa kubva kubhangi rezvinhu. Sevagadziri tinogona kuzvigadzira pachedu, (kunyanya iyi sarudzo inokurudzirwa kana tichida kuti iratidze tonic yakafanana kune iyo yakaratidzwa nemufananidzo wechiratidzo kana mucherechedzo).

Izvo zvakakosha kuti isu tizvirangarire kuti kuisa muenzaniso uyu isu tiri kuzoshanda pamatanho maviri akasiyana. Kune rimwe divi, isu tichashanda pazvinhu uye kune rumwe rutivi kuoneka kwewebhusaiti. Ndokunge, kune rumwe rutivi mumasaga ewebhusaiti yedu uye kune rimwe divi mune zvese zvinhu zvinoyangarara zvinotsigirwa nemapfupa aya. Iwe unozoona kuti kune nzvimbo dzisingazove dzakayangarara zvachose, senge nzvimbo ichagara yedu yepadivi, preefooter kana bhawa rinogovanisa iro rinokamura musoro kubva mumuviri.

Maumbirwo 1, 2, 3 uye 4 ichave chikamu cheiyo kumashure yewebhu peji redu, saka pachokwadi hazvizove zvakakosha kuti isu titumire kunze kwakadaro kubva kuAdobe Photoshop, kunyangwe tichigona kuzviita, hazvidiwe. Kana zvasvika pa Flat mavara (Chimwe chezvinhu zvakakosha zveplat dhizaini uye dhizaini dhizaini, ivo vanogona kuiswa zvakakwana kuburikidza nekodhi vachishandisa CSS zvitaera). Nekudaro, izvo zvakasara zvezvinhu zvinofanirwa kuchengetedzwa kuti zvizoiswa gare gare mune yedu HTML kodhi. Mune ino dhayagiramu diki takaburitsa zvakare nzvimbo dziri kumashure kwepeji kuitira kuti tive neruzivo rwakajeka rwekuti chimiro chekupedzisira chesaiti yedu chichava chii.

Sezvo iwe uchizokwanisa kuona, pfungwa yekugadzira chirongwa ichi muAdobe Photoshop ndeye kuwana chiyero chaicho chechinhu chimwe nechimwe, uye kujekesa kurongeka uye chimiro chechinhu chimwe nechimwe. Ehezve, zvinyorwa zvemukati hazvina nzvimbo muchikamu chino chezviitiko sezvo zvichifanira kudaro yakapihwa kubva kune yedu kodhi mhariri. Isu tinofanirwa zvakare kuratidza kuti mune ino tsika, isu tiri kuzoshanda nemabhatani uye zvinhu zvakamira, kunyangwe kazhinji izvi zvinowanzo shandiswa kubva kuhurongwa hwakadai seBootstrap kana zvakananga kubva kuJquery.

Kana tangogadzira yega yega yezvinhu zvinoumba peji redu rewebhu, inguva yekutanga kuvabuditsa nekuvachengeta mufaira rezvifananidzo riri mukati meiyo HTML purojekita refaira. Izvo zvakakosha kuti iwe ujaire kuendesa kunze kubva kune yako wayaframe, nekuti zvinonyanya kuitika kuti iwe uchafanirwa kugadzirisa zvimwe zvepakutanga zvinhu zvinoenderana neiyo skeleton kumisikidzwa. (Semuenzaniso, mune ino kesi, isu tachinja saizi yemabhatani ekutanga, logo uye zvizhinji zvezvinhu zviri chikamu chechimiro, kusanganisira mifananidzo iri munzvimbo yepazasi).

Izvo zvakakosha kuti isu tidzidze kusevha chero chinhu takazvimiririra kuti tivachengete iwo nematanho avanayo uye nenzira chaiyo nzira. Chero kukanganisa, zvisinei kushoma, kunogona kukanganisa zvese zvinhu zviri zvewebhu peji rako. Ramba uchifunga kuti izvo zvichave zvine hukama kune mumwe nemumwe uye zvinofanirwa kuve nematanho akakwana kuti vagone kupindwa kubva kuHTML mune yekupedzisira webhu. Mune ino kesi, isu tichafanirwa kuzvimiririra kucheka uye chengetedza zvinotevera zvinhu:

• Yedu logo.
• Mabhatani ese (iwo ari chikamu chemenyu huru uye nezvimwe).
• Mifananidzo yose.

Tinogona kuzviita munzira dzakawanda uye pamwe iwe uchawana imwe nzira inoshanda zvakanyanya kwauri. Asi kana iri kekutanga nguva yauri kuzogadzira marongero erudzi urwu, ndinokurudzira kuti utevere matipi anotevera.

• Kutanga, iwe unofanirwa kuenda kune dhairekitori uko iyo faira rePSD rine yedu wireframe iri uye woidzokorodza iyo kakawanda sezvinhu zvauri kuenda kutumira kunze. Mune ino kesi tave takagadzira makopi gumi nemaviri kubva pane yekutanga uye takaachengeta mufaira rimwe chete. Tevere, iwe unozotumidza rimwe nerimwe remakopi uye wozopa rimwe nerimwe rawo zita rechinhu charinaro. Makopi edu gumi nemaviri anozotumidzwazve zita kuti: Logo, bhatani remenu 12, bhatani remenu 12, bhari yekutsvaga, bhatani repamusoro 1, bhatani repamusoro 2, bhatani repamusoro 1 uye bhatani repamusoro 2. Mamwe mana akasara anozotumidzwa zita se: Mufananidzo 3, Mufananidzo 4 Mufananidzo 1 uye Mufananidzo 2.
• Kana izvi zvaitwa isu tinozovhura iyo faira ine iyo logo zita.
• Tichaenda kune yedu yakaturikidzana palette uye tsvaga iyo dura ine logo yedu. Ipapo isu tichadzvanya Ctrl / Cmd apo isu tinodzvanya pane chigunwe cheichi chakati layer. Nenzira iyi logo ichave yakasarudzwa otomatiki.
• Nhanho inotevera ichave yekuudza Photoshop kuti isu tinoda kuti icheke iyo logo nenzira chaiyo. Kune izvi isu tinongofanirwa chete kufona kuchirongwa chekucheka kubva kuiyi kiyi kana rairo C.
• Kana tangoita izvi tinodzvanya pane yedu Enter bhatani kuti tisimbise iyo yakatemwa.
• Iye zvino tichaenda kune yepamusoro File menyu kuti tinyore pane savha sei. Tichasarudza iro zita, iro mune ino kesi richava «Logo» uye isu tichagovanisa fomati PNG, yekuve iyo faira iyo inopa mhando yepamusoro pawebhu.
• Tichadzokorora maitiro acho nemakopi ese uye nezvinhu. Paunenge watema, ita shuwa kuti mamwe ese marara mune edu palette kusingaoneki kana kubviswa. Nenzira iyi tinogona kusevha chinhu chimwe nechimwe neyakajeka kumashure.

Mune ino kesi isu tiri kusarudza yedu yemenyu bhatani 2 kubva kune akaturikidzana palette. Iwe unogona kuona mune iyo skrini kuti iyo miganho yebhatani redu yakasarudzwa otomatiki.

Kana tangosarudza chishandiso kubva kuC kiyi, yedu canvas inoderedzwa chete kune zviyero zvebhatani redu.

Ino ndiyo nguva yekusevha chimwe nechimwe zvinhu zvese zviri chikamu chewebsite yedu uye zvigovaisa mumifananidzo folda uye yatinozoshandisa gare gare. Tichaita zvekufona kubva kukodhi yedu uye isu tichaenderera mberi nehurongwa hwedu asi kubva zvino zvichienda kubva kukodhi yekodhi yedu.

Kunyangwe paine akawanda maturusi uye dzimwe nzira dzekumisikidza peji rewebhu rinoita kuti maitiro acho anzwisisike, zvakakosha kuti tidzidze kuzviita mune manual. Nenzira iyi tichadzidza kuti ndezvipi zvakakosha kumashure kwekugadzirwa kwewebhu peji.

Resumen:

1. Gadzira iyo chimiro yewebhu webhusaiti ichiteerera zvakanyanya kune izvo zvemukati zvaunoda kutumira uye zvikamu zvaunofanira kugadzira pawebhusaiti yako.
2. Shanda pamapfupa ako kana wireframe kubva kuAdobe Photoshop inoratidza inzvimbo dzipi dzinoonekwa zvirimo uye nemanyorerwo azvo.
3. Kuvimba nezviyero uye mabhureki awakambogadzira, tanga ku dhizaini pamusoro pewebhu. Inosanganisira zvese zvinhu (zvese zviri kuyangarara uye zvakagadziriswa). Usakanganwa kuisa mabhatani anoenderana, logo, uye mifananidzo.
4. Cheka zvese zvinhu zviri chikamu chepurojekiti chimwe nechimwe. Ita shuwa kuti vane matanho akakodzera uye kuti ivo havazokukonzere iwe matambudziko gare gare.
5. Sevha zvinhu zvese zvine fomati PNG mune iyo mifananidzo folda mukati meiyo purojekita dhairekitori HTML.
6. Ramba uchifunga kuti chirongwa ichi chichava nechinobuditsa kuwindo rewebhu saka zvakakosha kuti iwe utarise nezve iyo mhando mode uye shandisa RGB.
7. Wana kurudziro nemamwe mapeji ewebhu aunoyemura usati wasvika kubasa, uye usakanganwa kukurukura izvi nenhengo dzechikwata chako. Kana iri chirongwa chemutengi, edza kunamatira ku mhemberero kure sezvinobvira.