Tutorial: Paano Mag-layout ng isang Pahina sa Web sa Adobe Photoshop

Mayroong isang malaking pagkakaiba-iba ng mga tool upang mag-disenyo ng mga web page at magtrabaho sa isang ganap na simple at pagganap na paraan nang hindi pumapasok o nakakakuha ng code. Hindi mabilang ang mga ito, na iminungkahi ng mga aplikasyon (Adobe Dreamweaver ay isang halimbawa) o direkta ng mga online platform tulad ng Wix. Gayunpaman, para sa isang taga-disenyo ng web, mahalaga ang pag-alam sa manu-manong mga pamamaraan. Ang HTML5 at CSS ang pangunahing mga haligi para sa layout ng mga website at mga landing page.

Gayunpaman, mas madalas kaysa sa maaaring asahan mo, kakailanganin mong lumipat sa mga application tulad ng Indesign o Adobe Photoshop upang umakma sa iyong trabaho sa layout at bigyan sila ng isang perpektong tapusin. Ngayon makikita natin sa malawak na tutorial na ito, kung paano namin mai-layout ang isang web page gamit ang Adobe Photoshop. Sa unang bahaging ito ay mananatili kami sa gawaing mabubuo mula sa Photoshop, bagaman sa mga hinaharap na yugto ay makikita namin kung paano namin mailalapat ang gawaing ito nang direkta sa HTML code upang ito ay magamit.

Nagsisimula sa disenyo ng aming wireframe

Upang magsimula sa layout at disenyo ng isang web page, napakahalaga na magsimula kami sa pamamagitan ng pagtukoy kung ano ang magiging mga pangunahing elemento, ito ang balangkas. Ang istrakturang ito ay magsisilbing isang suporta upang hawakan ang lahat ng mga nilalaman (maging tekstuwal o multimedia). Sa pamamagitan ng pagtukoy sa bawat seksyon na bumubuo sa aming pahina, maaari kaming gumana sa mga ito nang may kumpletong kawastuhan at magbigay ng isang visual na disenyo na tumpak hangga't maaari.

Napakahalaga na isasaalang-alang namin ang mga sukat na magkakaroon ng aming website, kung magkakaroon ito ng boxed o Buong-lapad. Ang isang naka-box na web page ay nasa loob ng isang maliit na lalagyan at samakatuwid isang puwang ang lilitaw sa paligid nito. Sa kabaligtaran, ang isang buong web ng witdth ay sakupin ang buong screen ng aparato na nagpaparami ng pahina. Ang pagpili sa pagitan ng isang modality o iba pa ay tumutugon sa mga pang-istilong katanungan lamang at depende din sa mga pangangailangan ng proyekto kung saan kami nagtatrabaho. Gagana kami sa halimbawang ito kasama ang boxed mode upang hindi ito sakupin ang lahat ng puwang na ibinigay ng browser.

Upang likhain ang aming wireframe, ang unang bagay na kailangan naming gawin ay ipasok ang application ng Adobe Photoshop at isama ang mga sukat na nais naming magkaroon ng aming pahina. Sa halimbawang ito ang aming pahina ay magiging 1280 mga pixel ang lapad. Gayunpaman, ang isyu sa laki ay maaaring mag-iba depende sa pangwakas na patutunguhan o ang aparato kung saan nais naming kopyahin ang aming pahina. Walang duda na para sa isang disenyo ng web na maging functional at mahusay, dapat ito ay nakikiramay at dapat itong umangkop sa lahat ng mga aparato sa merkado. Gayunpaman, sa kasong ito ay gagana kami upang lumikha ng isang prototype na gagawin namin sa isang kopya ng isang computer sa desktop. Kahit na, ang tumutugong isyu na haharapin natin sa paglaon, sa ngayon, narito ang isang hierarchy ng mga sukat ng screen upang gumana sa halimbawang ito. Tandaan na sa kasong ito gagawa kami ng isang layout ng landing page sa Adobe Photoshop at pagkatapos ay ilipat ito sa HTML5 AT CSS3. Ang layunin ng maliit na kasanayan na ito ay upang i-convert ang isang disenyo na nilikha sa Photoshop sa isang magagamit at interactive na disenyo ng web na tumutugon sa paggalaw ng gumagamit.

Mga sukat para sa mga mobile phone

iPhone 4 at 4S: 320 x 480

iPhone 5 at 5S: 320 x 568

iPhone6: 375x667

iPhone 6+: 414x736

Nexus 4: 384 x 598

Nexus 5: 360 x 598

Galaxy S3, S4, S5: 360x640

Isa sa HTC: 360 x 640

Mga sukat ng tablet

iPad lahat ng mga modelo pati na rin ang iPad Mini: 1024 x 768

Galaxy Tab 2 at 3 (7.0 pulgada): 600 x 1024

Galaxy Tab 2 at 3 (10.1 pulgada): 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

Mga sukat para sa mga desktop computer

Maliit na mga screen (ginamit halimbawa sa mga netbook): 1024 x 600

Mga medium na screen: 1280 x 720/1280 x 800

Malaking mga screen: lapad na mas malaki sa 1400 mga pixel, halimbawa 1400 x 900 o 1600 x 1200.

Upang simulang ipamahagi ang mga elemento at magtalaga ng mga seksyon sa loob ng aming web mockup, napakahalaga na isinasaalang-alang namin ang mga sukat upang matiyak ang isang nababasa at malambing na tapusin. Mahalaga na gamitin mo ang mga panuntunan at pagpipilian ng mga gabay na maaari mong makita sa tuktok na menu ng View. Upang magtrabaho sa isang proporsyonal at eksaktong paraan, pinakamahusay na magtrabaho tayo mula sa mga porsyento. Mag-click kami sa menu ng view at pagkatapos ay sa pagpipiliang «Bagong gabay» upang piliin ang modality ng dibisyon. Sa kasong ito gagawa kami ng apat na patayong dibisyon sa 25% at dadalhin namin sila bilang isang sanggunian upang mailagay ang aming mga imahe sa footer at ang imahe ng aming logo sa header.

Mayroong isang code upang italaga ang bawat isa sa mga lugar na sakupin ang aming modelo at ang pagpapaandar na magkakaroon ang bawat isa sa kanila. Halimbawa, upang ipahiwatig ang lugar na sasakupin ng isang imahe, lilikha kami ng mga parihaba na may isang uri ng krus. Upang ipahiwatig na nais naming magsama ng mga video sa isang tiyak na lugar, isasama namin ang simbolo ng pag-play sa loob ng aming lalagyan. Sa unang halimbawang ito ay gagana lamang kami sa mga imahe, sa itaas na pagkuha maaari mong makita ang lugar na logo mula sa aming website.

Ito ang magiging resulta ng aming wireframe. Tulad ng nakikita natin, nahahati ito sa isang header na binubuo ng imahe kung saan matatagpuan ang logo at kung saan magsisilbing isang link sa home page na sinamahan ng dalawang tab, isang search engine at apat na mga pindutan sa search box. Bilang karagdagan, nasa loob na ng katawan, nagsama kami ng isang sidebar na binubuo ng isang naghahati na bar at isang serye ng mga kategorya na ikinategorya ang uri ng nilalaman na makikita sa aming website. Ang isa pang seksyon na may isang pagnunumero na kasama ang mga entry na mayroon sa aming site, at sa wakas isang listahan na may pinaka kinatawan na mga meta tag sa aming site.

Sa lugar ng nilalaman, na tutukuyin ng isang seksyon na isasama pamamahala ng sariling nilalaman, mahahanap namin ang nilalaman ng aming mga artikulo. Sa kasong ito, ang mga breadcrumb o ang breadcrumb (na nagpapahiwatig ng organikong istraktura ng aming website, ang pamagat ng artikulo, ang metadata, isang talata bilang isang katawan ng teksto, kung saan kasama ang isang imahe.

Bilang isang footer ay nagsama kami ng apat na mga imahe na magsisilbing isang link sa iba pang mga lugar ng aming pahina. Dito maaari naming isama ang mga logo o iba pang mga kagiliw-giliw na seksyon. Bagaman sa katotohanan, ang lugar na ito ay kikilos nang higit pa prefooter, dahil ang footer mismo ay lalayo nang kaunti sa patakaran sa paggamit, ligal na abiso at copyright.

Kapag natukoy na namin ang pangunahing istraktura o balangkas ng aming pahina, kailangan naming pumunta sa susunod na antas. Ito ay binubuo ng tamang disenyo ng bawat isa sa mga lugar ng aming website. Sa madaling salita, magsisimula kaming "punan" ang bawat isa sa mga lugar na ito sa nilalaman na sa wakas ay mailalagay sa aming website. Inirerekumenda na huwag naming simulang idisenyo ang mga elementong ito bago magtrabaho sa wireframe sapagkat malamang na kung gagawin natin ito sa pagkakasunud-sunod na ito, sa paglaon kakailanganin nating baguhin ang kanilang mga sukat. Pinapamahalaan namin ang peligro ng pagbaluktot ng aming mga imahe at kinakailangang gawing muli ang disenyo ng bawat isa sa mga elemento, na magiging alinman sa pag-aaksaya ng oras o isang mas mababang resulta ng kalidad.

Sa kasong ito, ang disenyo ng aming website ay magiging napaka-simple. Gagamitin namin ang mga panuto sa disenyo ng materyal, dahil gagamitin namin ang logo ng Google upang ipakita ang kasanayang ito. Dapat kong linawin na ang layunin ng tutorial na ito ay upang ilarawan ang kaalamang panteknikal, kaya't ang resulta ng aesthetic sa kasong ito ay hindi nauugnay. Tulad ng nakikita mo, unti-unti naming pinupunan ang puwang ng lahat ng mga lugar na dati naming natutukoy sa aming pamamaraan. Gayunpaman, gumawa kami ng isang maliit na pagbabago sa huling minuto. Tulad ng napansin mo, binawasan namin ang laki ng aming logo nang malaki at nagsama kami ng isang linya ng paghahati sa mas mababang lugar ng header na ganap na kumokonekta sa itaas na menu. Sa kasong ito, gumamit kami ng mga pindutan at materyales mula sa isang resource bank. Bilang mga tagadisenyo maaari nating idisenyo ang mga ito sa ating sarili, (lalo na ang pagpipiliang ito ay inirerekomenda kung nais naming ipakita ito ng isang katulad na gamot na pampalakas na ipinakita ng tatak na imahe o logo).

Mahalagang tandaan natin na upang mailatag ang halimbawang ito ay gagana tayo sa dalawang magkakaibang antas. Sa isang banda, gagana namin ang mga bagay at sa kabilang banda ang hitsura ng website. Iyon ay, sa isang banda sa balangkas ng aming website at sa kabilang banda sa lahat mga lumulutang na elemento na susuportahan ng balangkas na ito. Mapapansin mo na may mga lugar na hindi talaga lumulutang, tulad ng lugar na sakupin ng aming sidebar, ang preefooter o ang paghihiwalay na bar na naghihiwalay sa header mula sa katawan.

Ang mga istrukturang 1, 2, 3 at 4 ay magiging bahagi ng likuran ng aming web page, kaya sa totoo lang hindi na kinakailangan para sa amin na mag-export tulad ng mula sa Adobe Photoshop, kahit na magagawa namin ito, hindi kinakailangan. Kapag tungkol sa Mga kulay ng Flat (Isa sa mga mahahalagang tampok ng flat na disenyo at disenyo ng materyal, maaari silang mailapat nang perpekto sa pamamagitan ng code gamit ang isang CSS styleheet). Gayunpaman, ang natitirang mga elemento ay dapat na nai-save para sa paglaon ng pagpapasok sa aming HTML code. Sa maliit na diagram na ito ay nag-kopya din kami ng mga lugar na kabilang sa background ng pahina upang mayroon kaming isang malinaw na ideya kung ano ang panghuli na hitsura ng aming site.

Tulad ng magagawa mong mapagtanto, ang kahulugan ng paglikha ng pamamaraan na ito sa Adobe Photoshop ay upang makuha ang totoong sukat ng bawat elemento, at upang linawin ang pag-aayos at istraktura ng bawat elemento. Siyempre, ang nilalaman ng tekstuwal ay walang lugar sa yugtong ito ng proseso dahil dapat ito na ibinigay mula sa aming code editor. Dapat din nating ipahiwatig na sa kasanayang ito, gagana kami sa mga pindutan at mga static na elemento, bagaman sa pangkalahatan ito ay karaniwang inilalapat mula sa mga balangkas tulad ng Bootstrap o direkta mula sa Jquery.

Kapag nilikha namin ang bawat isa sa mga elemento na bubuo sa aming web page, oras na upang simulang i-export ang mga ito at i-save ang mga ito sa folder ng mga imahe na matatagpuan sa loob ng folder ng proyekto ng HTML. Mahalaga na masanay ka sa pag-export mula sa iyong wireframe, dahil malamang na kailangan mong baguhin ang ilan sa mga orihinal na elemento batay sa pagsasaayos ng balangkas. (Halimbawa, sa kasong ito, binago namin ang laki ng mga orihinal na pindutan, logo at karamihan ng mga elemento na bahagi ng komposisyon, kabilang ang mga imahe sa mas mababang lugar).

Mahalagang matutunan nating mai-save ang anumang item nang nakapag-iisa upang mai-save ang mga ito sa mga sukat na mayroon sila at sa isang tumpak na paraan. Ang anumang error, subalit kaunti, ay maaaring maka-impluwensya sa lahat ng mga elemento na bahagi ng iyong web page. Tandaan na maiuugnay ang mga ito sa isa't isa at dapat magkaroon ng mga perpektong sukat upang mapasok sila mula sa HTML sa huling web. Sa kasong ito, kakailanganin nating malaya na i-cut at i-save ang mga sumusunod na elemento:

• Ang aming logo.
• Lahat ng mga pindutan (mga bahagi ng pangunahing menu at ang iba pa).
• Lahat ng mga imahe.

Maaari naming gawin ito sa maraming paraan at marahil ay makakahanap ka ng isang kahalili na mas epektibo para sa iyo. Ngunit kung ito ang unang pagkakataon na gagawin mo ang ganitong uri ng layout, inirerekumenda kong sundin mo ang mga sumusunod na tip.

• Una, dapat kang pumunta sa folder kung saan matatagpuan ang PSD file na naglalaman ng aming wireframe at doblehin ito nang maraming beses hangga't ang mga elemento na iyong i-export. Sa kasong ito lumikha kami ng 12 kopya mula sa orihinal at nai-save namin ang mga ito sa parehong folder. Susunod, papangalanan mo ulit ang bawat kopya at itatalaga sa bawat isa sa kanila ang pangalan ng sangkap na naglalaman nito. Ang aming 12 kopya ay papalitan ng pangalan: Logo, pindutan ng menu 1, menu button 2, search bar, itaas na pindutan 1, itaas na pindutan 2, itaas na pindutan 3 at itaas na pindutan 4. Ang natitirang apat ay papangalanan bilang: Larawan 1, Larawan 2, Larawan 3 at Larawan 4.
• Kapag tapos na ito buksan namin ang file na may pangalan ng logo.
• Pupunta kami sa aming layer palette at hanapin ang layer na naglalaman ng aming logo. Pagkatapos ay pipindutin namin Ctrl / Cmd habang nag-click kami sa thumbnail ng nasabing layer. Sa ganitong paraan awtomatikong mapili ang logo.
• Ang susunod na hakbang ay sasabihin sa Photoshop na nais naming gupitin ang logo na iyon sa isang tumpak na paraan. Para sa mga ito ay kakailanganin lamang naming tumawag sa cropping tool mula sa susi o utos C.
• Kapag nagawa na namin ito mag-click kami sa aming Enter button upang kumpirmahin ang hiwa.
• Ngayon pupunta kami sa tuktok na menu ng File upang mag-click sa i-save kung paano. Pipiliin namin ang pangalan, na sa kasong ito ay magiging «Logo» at magtatalaga kami ng isang format dito PNG, para sa pagiging file na nag-aalok ng pinakamataas na kalidad sa web.
• Uulitin namin ang proseso sa lahat ng mga kopya at mga elemento. Kapag nag-trim ka, siguraduhin na ang natitirang mga layer sa aming paleta ay hindi maaaring makita o natanggal. Sa ganitong paraan maaari nating mai-save ang bawat elemento na may isang transparent na background.

Sa kasong ito ay pipiliin namin ang aming menu button 2 mula sa mga layer palette. Maaari mong makita sa screenshot kung paano awtomatikong napili ang mga limitasyon ng aming pindutan.

Kapag pinili namin ang cropping tool mula sa C key, ang aming canvas ay nabawasan lamang sa mga sukat ng aming pindutan.

Ngayon ang oras upang mai-save nang isa-isa ang lahat ng mga elemento na bahagi ng aming website at isama ang mga ito sa folder ng mga imahe na gagamitin namin sa paglaon. Tatawag kami mula sa aming code at magpapatuloy kami sa aming layout ngunit mula ngayon mula sa aming code editor.

Bagaman maraming mga tool at kahalili upang mag-layout ng isang web page na ganap na madaling maunawaan ang proseso, napakahalaga na malaman nating gawin ito sa isang manwal. Sa ganitong paraan malalaman natin kung ano ang mga batayan sa likod ng disenyo ng isang web page.

Buod:

1. Disenyo ang estructura ng website na nagbibigay ng espesyal na pansin sa nilalamang nais mong ipadala at mga seksyon na dapat mong likhain sa iyong website.
2. Gumana sa iyong balangkas o wireframe mula sa Adobe Photoshop na nagpapahiwatig kung aling mga lugar ang mga nilalaman ay lilitaw at ang kanilang format.
3. Umasa sa mga panukala at tatak na dati mong nabuo, magsimula sa disenyo ang ibabaw ng web. May kasamang lahat ng mga elemento (parehong lumulutang at naayos). Huwag kalimutang isama ang kaukulang mga pindutan, logo, at mga imahe.
4. Gupitin isa-isa ang lahat ng mga elemento na bahagi ng proyekto. Siguraduhin na mayroon silang mga tamang hakbang at hindi sila magdulot ng mga problema sa iyo sa paglaon.
5. I-save ang lahat ng mga elemento sa format PNG sa folder ng mga imahe sa loob ng folder ng proyekto HTML.
6. Tandaan na ang proyektong ito ay magkakaroon ng isang output sa web window kaya napakahalaga na isinasaalang-alang mo ang color mode at ilapat RGB.
7. Maging inspirasyon ng iba pang mga web page na hinahangaan mo bago ka magtrabaho, at huwag kalimutang talakayin ito sa mga miyembro ng iyong koponan. Kung sakaling ito ay isang proyekto para sa isang kliyente, subukang manatili sa pagtatagubilin hanggang sa maaari.