Paano Gumuhit Ng Isang Template Para Sa Isang Website

Talaan ng mga Nilalaman:

Paano Gumuhit Ng Isang Template Para Sa Isang Website
Paano Gumuhit Ng Isang Template Para Sa Isang Website

Video: Paano Gumuhit Ng Isang Template Para Sa Isang Website

Video: Paano Gumuhit Ng Isang Template Para Sa Isang Website
Video: FREE Website Templates by TemplateMonster 2024, Mayo
Anonim

Mayroong isang malaking bilang ng mga template ng website sa web, ngunit mayroon silang isang sagabal - hindi sila natatangi. Kung ayaw ng may-ari ng site na maulit ang disenyo ng kanyang site sa ibang lugar, maaari siyang mag-order ng isang template mula sa isang propesyonal na taga-disenyo o subukang likhain ito nang mag-isa.

Paano gumuhit ng isang template para sa isang website
Paano gumuhit ng isang template para sa isang website

Kailangan iyon

Programa ng Adobe Photoshop

Panuto

Hakbang 1

Ang paglikha ng iyong sariling template ay hindi mahirap isang gawain dahil maaaring sa unang tingin ito. Upang gumana, kailangan mo ng Adobe Photoshop - syempre, kailangan mong magkaroon ng kahit isang pangunahing pag-unawa sa pagtatrabaho kasama nito. Ngunit bago mo ilunsad ang programa at magsimulang lumikha, kailangan mong isipin nang maaga ang hinaharap na disenyo. Ang pinaka-maginhawang paraan upang gawin ito ay upang pamilyar muna sa hindi bababa sa isang daang handa nang mga template, suriin ang kanilang mga kalamangan at dehado. Bigyang pansin ang matagumpay na mga solusyon ng ilang mga elemento ng disenyo. Hindi ito nangangahulugang makopya mo ang mga ito, ngunit makatuwiran na kumuha ng ilang magaganda at maginhawang solusyon bilang batayan.

Hakbang 2

Batay sa pagsusuri ng mga template ng ibang tao at iyong sariling pagkamalikhain, dapat kang makakuha ng isang ideya kung paano magiging hitsura ang iyong site. Mahusay na gawin ang magaspang na mga sketch ng disenyo sa hinaharap na may kulay na mga lapis sa ordinaryong mga sheet na A4. Dapat kang magsimulang magtrabaho sa Photoshop lamang pagkatapos na magkaroon ka ng isang malinaw na ideya ng kung ano ang eksaktong iguhit mo.

Hakbang 3

Simulan ang Photoshop, lumikha ng isang bagong proyekto na 1200x1600, magtakda ng isang transparent na background. I-on ang Ruler tool, kung hindi pa ito naka-on, upang gawin ito pindutin ang key na kombinasyon na Ctrl + R. Paganahin ang pag-snap: Tingnan - Pag-snap.

Hakbang 4

Ngayon kailangan naming hatiin ang template sa mga gabay na magpapakita ng mga hangganan ng mga elemento nito - panig, haligi, atbp. Halimbawa, nais mong hatiin ang template upang mayroong isang makitid na haligi sa kaliwa, isang malawak na haligi sa kanan sa kanan ng template, at may puwang sa itaas para sa isang header. Nangangahulugan ito na kailangan mo ng tatlong mga patayong linya (ang kaliwang hangganan ng template, ang kanan at ang linya sa pagitan nila) at isang pahalang, na ipinapakita ang ilalim na hangganan ng header. Upang magtakda ng isang patayong linya, ilipat ang cursor sa kaliwang pinuno sa kaliwang bahagi, pindutin ang V at, habang pinipindot ang key, i-drag ang linya sa nais na lokasyon. Gawin ang pareho sa iba pang dalawang mga patayong linya. Ang mga pahalang na mga ay binuo sa parehong paraan, ang itaas na pinuno lamang ang ginagamit.

Hakbang 5

Maghanap ng isang background para sa iyong template, dapat ito ay isang maliit, umuulit na pattern. Buksan ito sa Photoshop, piliin, kopyahin. Pagkatapos i-paste sa template nang maraming beses hangga't kailangan mong punan ito sa background. Ginagawa ang pag-paste tulad nito: "I-edit" - "I-paste", at pagkatapos ay i-drag ang lugar ng background sa nais na lokasyon. Mas mabilis pa itong magpasok ng isang imahe gamit ang Ctrl + V command. Magdagdag ng isang background para sa header ng site sa parehong paraan. Maaari kang gumamit ng iba't ibang mga gradient na pagpuno upang lumikha ng isang background.

Hakbang 6

Gamit ang Pencil tool, iguhit ang mga hangganan ng template, na nakatuon sa mga linya na iginuhit (iyon ay, sa tuktok ng mga ito). Natanggap mo ang batayan ng pinakasimpleng template, ngayon kailangan mong dagdagan ito ng mga kinakailangang detalye - mga pindutan sa pag-navigate, mga linya ng menu, iba't ibang mga elemento ng dekorasyon, atbp. Para sa karagdagang impormasyon sa kung paano lumikha ng mga pindutan at iba pang mga elemento, basahin ang mga kaukulang artikulo sa pagtatrabaho sa Adobe Photoshop.

Hakbang 7

Ang template ay nilikha, ngayon kailangan mong i-cut ito sa mga piraso upang ipasok ang mga ito sa pahina ng html. Gamitin ang Slice Tool upang i-cut. Upang hanapin ito, i-right click ang tool na Frame at piliin ang Cutout mula sa bubukas na menu. Ngayon ay maaari mong pugad ang template tulad ng ninanais, pagkatapos ay i-save: "File" - "I-save para sa Web". Sa bubukas na window, piliin ang uri ng file: HTML at mga imahe, tukuyin ang pangalan ng file: index.htm at i-save ito. Magkakaroon ka ng isang index.htm file at isang folder ng mga imahe na may hiniwang mga imahe.

Inirerekumendang: