Ang prinsipyo ng "sinalubong ng mga damit" ay totoo hindi lamang para sa mga tao, kundi pati na rin para sa mga site. Ang damit ng site ay ang disenyo nito. At ang disenyo ang tumutukoy sa impression na mayroon ang bisita sa unang ilang segundo ng pagtingin sa mapagkukunan. Lalo na mahalaga ang impression na ito dahil tinutukoy nito ang kanyang pag-uugali sa hinaharap. Ang unang elemento ng disenyo na nakikita ng bawat gumagamit na bumibisita sa site ay ang "header" nito. Ang takip ay ang mukha ng mapagkukunan ng web. Samakatuwid, ang bawat baguhan na taga-disenyo ng web ay nais na una sa lahat alamin kung paano gumawa ng mga header para sa mga site.
Kailangan
- - pag-access sa Internet;
- - modernong browser;
- - raster graphics editor (GIMP, Photoshop);
- - Opsyonal: editor ng vector graphics (CorelDraw);
- - Opsyonal: Kapaligiran sa pagmomodelo ng 3D (Blender, 3DStudio);
- - Opsyonal: sheet ng papel, lapis o pluma.
Panuto
Hakbang 1
Bumuo ng isang konsepto para sa hinaharap na header ng site. Sa isip, ang konsepto ay dapat batay sa orihinal na ideya. Kapag nagkukulang ang mga ideya, maaaring makuha ang inspirasyon sa pamamagitan ng pag-aaral ng mayroon nang magagandang solusyon. Masasalamin ang resulta ng malikhaing pagsasaliksik sa anyo ng isang sketch sa isang piraso ng papel. Ang sketch ay dapat sumasalamin sa istraktura ng hinaharap na header ng site na may pahiwatig ng mga lugar na "goma" at mga lugar na puno ng mga imahe. Sa yugtong ito, magandang ideya na mag-isip ng isang tinatayang scheme ng kulay para sa disenyo ng header.
Hakbang 2
Piliin ang laki ng header. Sa totoo lang, sulit na malinaw na tukuyin ang isa lamang sa mga parameter nito - ang taas. Bilang isang patakaran, ang taas ng mga header ng site ay naayos, at hindi ito nakasalalay sa lohikal na resolusyon na nakakaapekto sa mga parameter ng pagpapakita ng mga font. Sa madaling salita, dapat kang pumili ng isang halaga para sa taas ng header sa mga pixel. Sa kasong ito, makatuwiran na isaalang-alang ang posibilidad ng paglalagay ng mga banner o mga bloke ng advertising ayon sa konteksto sa header. Tungkol sa lapad, dapat mong matukoy ang minimum na halaga, i-highlight ang hindi bababa sa isang "goma" na lugar na nagbibigay-daan sa header na umangkop sa iba't ibang laki ng web page.
Hakbang 3
Lumikha ng isang template ng header sa isang graphics editor. Sa isang bagong dokumento, magdagdag ng isang transparent layer kung saan mo i-drag ang sketch ayon sa napiling mga parameter ng geometriko. Ang taas ng layer ay dapat na tumutugma sa taas ng header. Ang lapad ay maaaring kunin bilang arbitrary, ngunit mas malaki kaysa sa minimum na sukat, nag-iiwan ng puwang para sa pahalang na "goma" na mga lugar. "Sa template, italaga ang mga zone ng naayos at variable na laki, mga zone na nilalayon na mapunan ng mga static na imahe, mga imahe sa background.
Hakbang 4
Maghanap o lumikha ng mga static na imahe upang ilagay sa iyong template ng header. Ang logo at ilang mga natatanging elemento ay maaaring malikha sa isang vector editor o 3D na pagmomodelo na kapaligiran. Napakadali upang makahanap ng mga pampakay na imahe sa mga libreng photobanks sa Internet.
Hakbang 5
Ipasok ang background, logo at mga static na imahe sa template ng header ng site sa isang editor ng graphics. Idagdag ang background at bawat imahe sa isang hiwalay na transparent layer. Ayusin ang mga layer sa pinakamahusay na paraan. Sa pamamagitan ng paglipat ng mga imahe sa mga layer, makamit ang kanilang perpektong layout, naaayon sa dating nilikha na template.
Hakbang 6
I-save ang nagresultang imahe ng header. I-save ang gumaganang proyekto sa katutubong format ng graphics editor. Pagkatapos ay i-save ang pipi na imahe ng header sa isang format na walang pagkawala (halimbawa, PNG).
Hakbang 7
Lumikha ng isang template ng header ng HTML kung kinakailangan. Buksan ang pipi na imahe sa editor. Gupitin ang mga imahe mula rito na tumutugma sa mga lugar ng isang nakapirming laki. Mula sa mga lugar na naaayon sa mga lugar na "goma", gupitin ang mga imahe na 1 pixel ang lapad. I-save ang lahat ng mga imahe sa disk. I-layout ang header ng HTML gamit ang mga nai-save na larawan.
