Koyawa: Yadda ake shimfida Shafin Yanar Gizo tare da Adobe Photoshop

Akwai nau'ikan kayan aiki da yawa don tsara shafukan yanar gizo da aiki cikin cikakkiyar hanya mai sauƙi da aiki ba tare da shigar ko taɓa lambar ba. Ba su da adadi, waɗanda aikace-aikace suka gabatar (Adobe Dreamweaver misali ne) ko kuma kai tsaye ta hanyar dandalin kan layi kamar Wix. Koyaya, don mai tsara yanar gizo, sanin hanyoyin aikin hannu yana da mahimmanci. HTML5 da CSS sune ginshiƙai masu mahimmanci don shimfida shafukan yanar gizo da shafukan sauka.

Koyaya, sau da yawa fiye da yadda kuke tsammani, dole ne ku juya zuwa aikace-aikace kamar Indesign ko Adobe Photoshop don haɓaka aikin shimfidar ku kuma ba su cikakken kammala. A yau za mu gani a cikin wannan babban koyawa, yadda za mu iya tsara shafin yanar gizo ta amfani da Adobe Photoshop. A wannan bangare na farko zamu tsaya a cikin aikin da za'a haɓaka daga Photoshop, kodayake a cikin abubuwan nan gaba zamu ga yadda za mu iya amfani da wannan aikin tuni kai tsaye a cikin lambar HTML don sanya shi aiki.

Farawa da ƙirar wayar mu ta waya

Don farawa tare da shimfidawa da ƙirar shafin yanar gizo, yana da matukar mahimmanci mu fara da bayyana abubuwan da abubuwan yau da kullun zasu kasance, wannan shine kwarangwal. Wannan tsarin zai kasance a matsayin tallafi don riƙe duk abubuwan da ke ciki (na rubutu ko na watsa labaru). Ta hanyar bayyana kowane ɓangaren da suka shafi shafinmu, zamu iya aiki akan su tare da cikakkiyar daidaito da kuma samar da ƙirar gani wacce take daidai yadda ya kamata.

Yana da matukar mahimmanci muyi la'akari da girman da gidan yanar gizon mu zai kasance, idan yana da dambe ko Cikakken fadi. Shafin gidan yanar gizo mai kwalin zai kasance cikin ƙaramin akwati sabili da haka fili zai bayyana a kusa da shi. Akasin haka, cikakken gidan yanar gizo mai ƙima zai mamaye duk fuskar na'urar da ke sake shafin. Zaɓi tsakanin tsari ɗaya ko wata yana amsa tambayoyin salo kawai kuma zai dogara ne akan bukatun aikin da muke aiki akai. Zamuyi aiki a wannan misalin tare da yanayin dambe, saboda haka ba zai mamaye dukkan sararin da mai binciken yayi ba.

Don ƙirƙirar igiyar waya, abin da zamu fara yi shine shigar da aikace-aikacen Adobe Photoshop kuma mu haɗa da girman da muke son shafinmu yayi. A cikin wannan misalin shafin namu zai zama faɗi pixels 1280. Koyaya, batun girman zai iya bambanta dangane da makoma ta ƙarshe ko na'urar da muke son ƙirƙirar shafinmu akan ta. Babu shakka cewa don ƙirar gidan yanar gizo ta kasance mai aiki da inganci, dole ne ta kasance m kuma dole ne ya daidaita da duk na'urori akan kasuwa. Koyaya, a wannan yanayin zamuyi aiki don ƙirƙirar samfur wanda zamu haifa akan kwamfutar tebur. Kodayake, batun amsawa wanda zamuyi magana akansa daga baya, a yanzu, anan ga matsayin girman girman allo don aiki a wannan misalin. Ka tuna cewa a wannan yanayin zamu sanya shimfidar shafin sauka a Adobe Photoshop sannan mu ƙaura zuwa HTML5 DA CSS3. Manufar wannan ƙaramar aikin ita ce canza ƙirar da aka kirkira a cikin Photoshop zuwa ƙirar gidan yanar gizo mai amfani da ma'amala wanda zai amsa motsin mai amfani.

Matakan wayoyin hannu

iPhone 4 da 4S: 320 x 480

iPhone 5 da 5S: 320 x 568

IPhone 6: 375 x 667

iPhone 6+: 414x736

Nexus 4: 384 x 598

Nexus 5: 360 x 598

Galaxy S3, S4, S5: 360x640

HTC Daya: 360 x 640

Ma'aunin ma'auni

iPad duk samfuran harma da iPad Mini: 1024 x 768

Galaxy Tab 2 da 3 (inci 7.0): 600 x 1024

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

Ma'aunai don kwamfutocin tebur

Screensananan fuska (amfani da misali a cikin netbooks): 1024 x 600

Matsakaicin matsakaici: 1280 x 720/1280 x 800

Manyan fuska: nisa ya fi pixels 1400, misali 1400 x 900 ko 1600 x 1200.

Don fara rarraba abubuwan da sanya sassan cikin izgili na yanar gizan mu, yana da mahimmanci muyi la'akari da gwargwado don tabbatar da karantawa da karin waƙa. Zai zama yana da mahimmanci kuyi amfani da dokoki da zaɓuɓɓukan jagororin da zaku iya samu a saman menu Duba. Don yin aiki daidai gwargwado kuma daidai, yana da kyau muyi aiki daga kashi. Za mu danna kan menu na gani sannan kuma a kan zaɓi «Sabon jagora» don zaɓar yanayin yanayin rarrabuwa. A wannan yanayin zamu sanya rarrabuwa huɗu a tsaye a 25% kuma zamu ɗauke su azaman ishara don sanya hotunanmu a cikin sawun da hoton tambarinmu a cikin rubutun.

Akwai lambar da za a sanya kowane yanki da zai mamaye namu samfurin da aikin da kowannensu zai yi. Misali, don nuna yankin da hoto zai shagaltar, za mu ƙirƙira murabba'i mai ma'ana tare da nau'in giciye. Don nuna cewa muna son haɗa bidiyo a cikin wani yanki, za mu haɗa da alamar wasan a cikin kwandonmu. A cikin wannan misalin na farko zamuyi aiki ne kawai tare da hotuna, a cikin kamawa ta sama zaka iya ganin yankin da logo daga shafin yanar gizon mu.

Wannan zai zama ƙarshen sakamakon namu wayaframe. Kamar yadda muke gani, an kasu zuwa taken da aka ɗauka da hoton wanda za'a sami tambarin wanda kuma zaiyi aiki azaman hanyar haɗi zuwa shafin gida tare da shafuka biyu, injin bincike da maɓallan guda huɗu akan akwatin bincike. Kari akan haka, tuni a cikin jiki, mun hada da wani bangare na gefe wanda yake dauke da sandunan rarrabuwa da kuma jerin rukunoni wadanda suke rarraba nau'ikan abubuwan da zasu kasance akan gidan yanar gizon mu. Wani sashe tare da lambobi wanda ya hada da shigarwar da za su wanzu a shafinmu, kuma a karshe jerin da ke da alamun wakilci masu yawa a shafinmu.

A cikin yankin abun ciki, wanda ɓangaren da zai ƙunsa zai bayyana shi abun ciki mai iya sarrafa kansa, zamu sami abubuwan da ke cikin labaranmu. A wannan yanayin, burodin burodi ko kuma burodin burodi (wanda ke nuna tsarin tsarin gidan yanar gizon mu, kan labarin, metadata, sakin layi a matsayin jikin rubutu, wanda a ciki aka haɗa hoto.

A matsayina na ƙafa mun haɗa hotuna huɗu waɗanda zasu zama hanyar haɗi zuwa wasu yankuna na shafinmu. Anan zamu iya haɗa alamomi ko wasu sassan masu ban sha'awa. Kodayake a zahiri, wannan yanki zaiyi aiki kamar haka mai kafa gaba, tun da ƙafafun kansa zai ɗan ƙara zuwa ƙasa tare da manufofin amfani, sanarwa na doka da haƙƙin mallaka.

Da zarar mun bayyana mahimman tsari ko kwarangwal na shafinmu, dole ne mu je mataki na gaba. Wannan zai kunshi ainihin zane na kowane yanki na gidan yanar gizon mu. A takaice dai, zamu fara "cika" kowane ɗayan waɗannan yankuna da abubuwan da a ƙarshe za'a saka su akan gidan yanar gizon mu. Ana ba da shawarar kada mu fara zayyano wadannan abubuwan kafin muyi aiki a kan wayoyin waya saboda akwai yiwuwar idan muka yi hakan a cikin wannan tsari, daga baya za mu bukaci sauya yanayinsu. Muna fuskantar haɗarin gurbata hotunanmu da kuma sake yin zane-zane na kowane ɗayan abubuwan, wanda zai zama ko ɓata lokaci ko sakamako mafi ƙarancin inganci.

A wannan yanayin, ƙirar gidan yanar gizon mu zai zama mai sauƙin gaske. Za mu yi amfani da ka'idojin kayan abu, Tunda zamuyi amfani da tambarin Google domin misalta wannan aikin. Dole ne in fayyace cewa manufar wannan darasin ita ce ta nuna ilimin fasaha, don haka sakamakon kyan gani a wannan yanayin bashi da wata ma'ana. Kamar yadda kake gani, da kadan kadan muke cika filin da dukkan wuraren da a baya muka ayyana a cikin shirinmu. Koyaya, munyi ɗan gyare-gyare a minti na ƙarshe. Kamar yadda wataƙila kuka lura, mun rage girman tambarin namu kuma mun haɗa da layin rabawa a cikin ƙananan rubutun kai tsaye wanda yake haɗuwa daidai da menu na sama. A wannan yanayin munyi amfani da maballin da kayan aiki daga bankin albarkatu. A matsayinmu na masu zane za mu iya tsara su da kanmu, (musamman wannan shawarar ana ba da shawarar idan muna son ta gabatar da wani abu mai kama da wanda hoton alama ko tambari ya gabatar).

Yana da mahimmanci mu tuna cewa shin zamu bada wannan misalin ne zamuyi aiki akan matakai biyu daban daban. A gefe guda, za mu yi aiki a kan abubuwa kuma a ɗaya hannun bayyanar shafin yanar gizon. Wato, a gefe guda a cikin kwarangwal din gidan yanar gizon mu kuma a wani bangaren a duka abubuwan shawagi waɗanda wannan kwarangwal ɗin zai tallafawa. Za ku gane cewa akwai wuraren da ba za su yi shawagi kwata-kwata ba, kamar yankin da gefen gefenmu zai mamaye, mai tafiya a gaba ko sandar raba abin da ya raba kan da kai daga jiki.

Tsarin 1, 2, 3 da 4 zasu kasance cikin baya daga gidan yanar gizon mu, don haka ba lallai ne ya zama dole a gare mu ba don fitarwa kamar haka daga Adobe Photoshop, kodayake zamu iya yin hakan, ba lallai bane. Idan yazo Lebur launuka (ɗayan mahimman fasalulluran ƙirar lebur da ƙirar kayan abu, ana iya amfani da su daidai ta hanyar lambar ta amfani da tsarin CSS) Koyaya, sauran abubuwan dole ne a adana don shigarwar gaba a cikin lambar HTML ɗinmu. A cikin wannan karamin zane mun kuma sake maimaita wuraren da suke daga bangon shafin domin mu sami cikakken masaniyar yadda shafinmu zai kasance a karshe.

Kamar yadda zaku iya fahimta, ma'anar kirkirar wannan makircin a cikin Adobe Photoshop shine a sami hakikanin ma'aunin kowane bangare, kuma a bayyana tsari da tsarin kowane bangare. Tabbas, abun cikin matani bashi da gurbi a wannan matakin aikin tunda dole ne ya kasance kawota daga editan editanmu. Dole ne kuma mu nuna cewa a cikin wannan aikin, za mu yi aiki tare da maɓallan da abubuwa masu rikitarwa, kodayake galibi waɗannan ana amfani da su daga tsari kamar Bootstrap ko kai tsaye daga Jquery.

Da zarar mun ƙirƙiri kowane ɗayan abubuwan da zasu samar da shafin yanar gizon mu, lokaci yayi da zamu fara fitar da su da kuma adana su a cikin jakar hotunan da ke cikin babban fayil ɗin aikin HTML. Yana da mahimmanci ku saba da fitarwa daga wayarku ta waya, saboda da alama akwai yiwuwar ku gyara wasu abubuwa na asali bisa ga tsarin kwarangwal. (Misali, a wannan yanayin, mun canza girman maɓallan asali, tambari da galibin abubuwan da suke ɓangaren abun, gami da hotunan da ke yankin ƙasa).

Yana da mahimmanci mu koya don adana kowane abu da kansa don ceton su da girman da suke da su kuma a madaidaiciyar hanya. Duk wani kuskure, duk da haka kaɗan, na iya yin tasiri ga duk abubuwan da suke ɓangaren shafin yanar gizonku. Ka tuna cewa za su kasance da alaƙa da juna kuma dole ne su kasance suna da cikakkun abubuwa yadda za a iya shigar da su daga HTML a cikin gidan yanar gizo na ƙarshe. A wannan yanayin, zamu buƙaci yanke kanmu da adana abubuwa masu zuwa:

• Alamar mu.
• Duk maɓallan (waɗanda suke ɓangaren babban menu da sauran).
• Duk hotunan.

Za mu iya yin hakan ta hanyoyi da yawa kuma wataƙila za ku sami madadin da ya fi muku tasiri. Amma idan shine karo na farko da zaku yi irin wannan shimfidar, Ina ba ku shawarar da ku bi waɗannan shawarwari masu zuwa.

• Da farko, dole ne ka je babban fayil din da fayil ɗin PSD da ke ɗauke da wayoyin mu yake kuma ka maimaita shi sau da yawa kamar abubuwan da za ka fitar da su. A wannan halin mun ƙirƙiri kofe 12 daga na asali kuma mun adana su a cikin babban fayil ɗin. Abu na gaba, zaku sake suna wa kowane ɗayan kwafin kuma ku sakawa kowane ɗayansu sunan abin da yake ƙunshe. Kwafin namu 12 za'a sake musu suna: Logo, maɓallin menu 1, maballin menu 2, sandar bincike, maɓallin sama na sama 1, maɓallin sama na sama 2, maɓallin sama na sama 3 da na sama 4. Sauran huɗun za a sake suna kamar: Hoto na 1, Hoto na 2, Hoto na 3 da Hoto na 4.
• Da zarar an gama wannan za mu buɗe fayil ɗin tare da sunan tambari.
• Zamu je palet din mu kuma gano wurin da yake dauke da tambarinmu. Sa'an nan kuma za mu danna Ctrl / Cmd yayin da muke danna kan ɗan yatsan bayanan da aka faɗi. Ta wannan hanyar, za a zaɓi alamar ta atomatik.
• Mataki na gaba shine mu gayawa Photoshop cewa muna son ta yanke wannan tambarin ta hanya madaidaiciya. Don wannan kawai zamuyi kira ga kayan aikin shukar daga maɓalli ko umarni C.
• Da zarar munyi wannan zamu danna maɓallin Shigar da mu don tabbatar da yankan.
• Yanzu zamu je saman menu na Fayil don danna adana yadda. Za mu zaɓi sunan, wanda a wannan yanayin zai zama «Logo» kuma za mu sanya masa tsari PNG, don kasancewa fayil ɗin da ke ba da inganci mafi kyau akan yanar gizo.
• Zamu maimaita aikin tare da duk kofe da abubuwa. Lokacin da kuka yankakke, ku tabbata sauran yadudduka a palet ɗinmu suna ba a ganuwa ko kawar dashi. Ta wannan hanyar zamu iya adana kowane ɗayan tare da bayyanannen tushe.

A wannan yanayin muna zaɓar maɓallin menu na 2 daga palette mai laushi. Kuna iya gani a cikin hoton yadda aka zaɓi iyakokin maɓallinmu ta atomatik.

Da zarar mun zabi kayan amfanin gona daga madannin C, zane-zanenmu ya ragu ne kawai zuwa girman maballin mu.

Yanzu lokaci yayi da zamu adana daya bayan daya dukkan abubuwanda suke wani bangare na gidan yanar gizan mu sannan ka sanya su a cikin jakar hotuna da kuma wadanda zamuyi amfani dasu anan gaba Zamuyi kira daga lambar mu kuma cigaba da tsarin mu amma daga yanzu daga editan lambar mu.

Kodayake akwai kayan aiki da yawa da kuma hanyoyi daban-daban don shimfida shafin yanar gizon da ke sa aikin gaba ɗaya ya zama mai hankali, yana da matukar mahimmanci mu koya yin hakan a cikin manual. Ta wannan hanyar za mu koyi menene ginshiƙan bayan tsara shafin yanar gizo.

Tsaya:

1. Tsara da tsarin na gidan yanar gizo suna ba da kulawa ta musamman ga abubuwan da kake son watsawa da sassan da dole ne ka ƙirƙiri akan gidan yanar gizon ka.
2. Yi aiki akan kwarangwal ko wayaframe daga Adobe Photoshop yana nuna a waɗanne wurare abubuwan da ke ciki zasu bayyana da tsarin su.
3. Dogaro da matakan da alamun da kuka haɓaka a baya, fara zuwa zane fuskar yanar gizo. Ya ƙunshi dukkan abubuwa (duka masu iyo da tsayayye). Kar a manta a haɗa da maɓallan da suka dace, tambari, da hotuna.
4. Yanke dukkan abubuwanda suke sashin aikin ɗaya bayan ɗaya. Tabbatar suna da matakan da suka dace kuma ba zasu haifar muku da matsala ba daga baya.
5. Adana dukkan abubuwa cikin tsari PNG a cikin jakar hotunan a cikin babban fayil ɗin aikin HTML.
6. Ka tuna cewa wannan aikin zai sami fitarwa zuwa taga ta yanar gizo saboda haka yana da matukar mahimmanci kuyi la'akari da yanayin launi kuma kuyi amfani dashi RGB.
7. Samun izini daga wasu shafukan yanar gizo waɗanda kuke sha'awa kafin ku fara aiki, kuma kar ku manta da tattauna wannan tare da mambobin ƙungiyar ku. Idan aiki ne don abokin ciniki, yi ƙoƙarin tsayawa ga jawabin har zuwa yiwu.