Paano Gumuhit Ng Isang Website

Talaan ng mga Nilalaman:

Paano Gumuhit Ng Isang Website
Paano Gumuhit Ng Isang Website

Video: Paano Gumuhit Ng Isang Website

Video: Paano Gumuhit Ng Isang Website
Video: Web Ui Design in | Adobe Photoshop | GrafikGerm 2024, Mayo
Anonim

Sa paglikha ng isang website, ang yugto ng pag-render ng disenyo ng pahina ay napakahalaga, na kung saan ay magkakaroon ng pag-type at mai-publish sa network. Sa artikulong ito, matututunan mo kung paano gamitin ang Adobe Photoshop upang gumuhit ng isang karampatang layout para sa isang website, batay sa kung saan maaari kang makabuo ng mas kumplikadong mga layout.

Paano gumuhit ng isang website
Paano gumuhit ng isang website

Kailangan iyon

Programa ng Adobe Photoshop

Panuto

Hakbang 1

Lumikha ng isang bagong file sa Photoshop (Ctrl + N) na may mga sukat 1040x1400, kung saan 1400 ang taas. I-on ang pagpapakita ng mga pinuno (Ctrl + R) at itakda ang mga pixel bilang mga yunit ng pagsukat sa mga setting ng pinuno.

Hakbang 2

Simulang iunat ang mga gabay upang magkasya ang mga ito sa mga hangganan ng mga kahon ng layout. I-stretch ang mga hangganan sa gilid upang ang 40 mga pixel ay natitira sa mga gilid. Ang mga hangganan sa itaas at ibaba ay dapat ding mag-iwan ng 40 mga pixel sa bawat panig sa mga hangganan ng background.

Hakbang 3

Pagkatapos pumili ng isang gabay na 200px pababa mula sa tuktok ng background para sa tuktok na header.

Hakbang 4

Upang mabuo ang mga sidebars sa kaliwa at kanan ng layout, itakda ang mga gabay na 240 pixel mula sa background border sa kaliwa, at 800 sa kanan.

Hakbang 5

5px papasok mula sa kaliwa at kanang sidebars at iguhit ang dalawa pang patayong mga gabay. Pagkatapos ay i-drag ang dalawa pang mga gabay 245 px sa kaliwa at 795 px sa kanan.

Hakbang 6

Sukatin ngayon mula sa hangganan ng header 30px at gumuhit ng isang pahalang na gabay para sa pahalang na menu.

Hakbang 7

Piliin ang makitid na lugar ng pahalang menu na minarkahan mo lamang ng isang hugis-parihaba na pagpipilian gamit ang M key. Piliin ang punan na kagamitan at punan ang lugar ng isang walang kulay na ilaw na kulay-abo na kulay.

Hakbang 8

Piliin ang punan na kagamitan at punan ang lugar ng isang walang kulay na ilaw na kulay-abo na kulay. Mag-click sa menu na "Select-Modify-Compress", tukuyin ang isang pagpipilian na 1-pixel at i-click ang "OK." Punan ang lugar ng isang mas magaan na lilim ng kulay-abo - magkakaroon ka ng isang frame ng menu.

Hakbang 9

Lumikha ng isang bagong layer at pumili ng isang naaangkop na imahe para sa icon ng site o logo, at pagkatapos ay buksan ito.

Hakbang 10

Magpasok ng isang imahe sa isang bagong layer sa header, ilagay ito sa kaliwang gilid. Sa kanan ng imahe, isulat ang pamagat ng teksto ng site gamit ang anumang font.

Hakbang 11

Idisenyo ang iyong mga bloke ng website sa parehong scheme ng kulay bilang bagong nilikha na header. Piliin ang lugar ng kaliwang sidebar at isagawa ang parehong mga pagpapatakbo ng dalawang kulay na punan dito tulad ng sa menu block.

Hakbang 12

Gawin ang pareho sa gitnang malawak na bloke ng nilalaman. Kopyahin ang kaliwang layer ng sidebar at ilagay ito bilang kanang sidebar.

Hakbang 13

Magdagdag ng teksto sa iyong layout - pumili ng isang walang kinikilingan na font at punan ang mga pamagat ng menu, mga halimbawa ng balita, larawan, mga tag at seksyon ng mga link.

Hakbang 14

Tapusin ang layout sa pamamagitan ng paglikha ng isang "footer" o footer - isulat ang iyong mga copyright at iyong mga contact doon.

Inirerekumendang: