Cashar barasho: Sidee Loogu Kharijiyaa Web Web ah Adobe Photoshop

Waxaa jira qalab aad u tiro badan oo loogu talagalay naqshadeynta bogagga shabakadda isla markaana ugu shaqeeya qaab gebi ahaanba fudud oo shaqeynaya adigoon soo galin ama taaban lambarka. Lama tirin karo, waxaa soo jeediyay codsiyada (Adobe Dreamweaver waa tusaale) ama si toos ah shabakadaha internetka sida Wix. Si kastaba ha noqotee, loogu talagalay naqshadeeyaha websaydhka, ogaanshaha nidaamyada gacanta ayaa muhiim u ah. HTML5 iyo CSS waa tiirarka aasaasiga u ah qaabeynta websaydhada iyo bogagga degitaanka.

Si kastaba ha noqotee, inta badan intaad filan karto, waa inaad u weecataa codsiyada sida Indesign ama Adobe Photoshop si aad u dhammaystirto shaqada qaabeynta oo aad u siiso dhammaystir dhammaystiran. Maanta waxaan ku arki doonnaa casharradan ballaaran, sida aan ugu qaabeyn karno degel adoo adeegsanaya Adobe Photoshop. Qeybtaan koowaad waxaan kusii nagaan doonaa shaqada laga soosaarayo Photoshop, inkasta oo qeybaha soosocda aan arki doono sida aan ugu dabaqi karno shaqadan si toos ah HTML code si aan uga dhigno mid shaqeynaya.

Laga bilaabo naqshadeynta xariggeena silig

Si aan ugu bilowno naqshadeynta iyo qaabeynta bogga, aad bey muhiim u tahay inaan ku bilowno qeexida waxyaabaha aasaasiga u noqon doono, tani waa qalfoofka. Qaab-dhismeedkani wuxuu u adeegi doonaa sidii taageero loogu hayn lahaa dhammaan waxyaabaha ku jira (ha ahaato qoraal ama qoraallo badan). Marka la qeexo qayb kasta oo ka mid ah boggayaga waxaan awood u yeelan doonnaa inaan kaga shaqeyno iyaga oo leh dhammaystirnaan buuxda oo aan siinno naqshad muuqaal ah oo sida ugu saxsan ugu macquulsan.

Aad ayey muhiim u tahay inaan tixgelinno cabirka uu yeelan doono degelkeenna, haddii uu yeelan doono a sanduuq ama baaxad buuxda. Bogga sanduuqa ku jira ayaa ku dhex jiri doona weel yar sidaa darteedna meel bannaan ayaa ka muuqan doonta. Taas bedelkeeda, shabakad caqli-gal ah oo buuxa ayaa qaban doonta shaashadda dhammaan qalabka dib-u-soo-saarka bogga. Kala-doorashada mid ama qaab kale waxay ka jawaabaysaa su'aalaha qaab-dhismeedka waxayna sidoo kale ku xirnaan doontaa baahiyaha mashruuca aan ku shaqeyno. Waxaan ku shaqeyn doonnaa tusaalahan qaabka feerka ah sidaa darteed ma fariisan doono dhammaan booska uu soo bandhigo biraawsarka.

Si loo abuuro silsiladdeena silsiladda, waxa ugu horreeya ee ay tahay inaan sameyno waa inaan galno barnaamijka Adobe Photoshop oo aan ku darno cabbirka aan dooneyno inuu boggeena yeesho. Tusaalahan boggeena wuxuu noqon doonaa 1280 pixels ballaaran. Si kastaba ha noqotee, arrinta cabbirka way kala duwanaan kartaa iyadoo kuxiran meesha ugu dambeysa ama qalabka aan dooneyno inaan ku soo saarno boggeena. Shaki kuma jiro in naqshadeynta websaydhku inay noqoto mid shaqeyneysa oo wax ku ool ah, waa inay noqotaa jawaab waana inay la jaan qaaddaa dhammaan aaladaha suuqa yaalla. Si kastaba ha noqotee, kiiskan waxaan u shaqeyn doonnaa sidii aan u abuuri lahayn nooc aan ku soo saari doonno kumbuyuutar desktop ah. Xitaa sidaas oo ay tahay, arrinta jawaabta ah ayaa gadaal laga wada hadli doonaa, hadda, halkan waxaa ku yaal kala duwanaansho cabbirrada shaashadda ee lagu shaqeynayo tusaalahan. Maskaxda ku hay in xaaladdan aan ka dhigi doonno qaabeynta bogga degista ee Adobe Photoshop ka dibna u guurno HTML5 IYO CSS3. Ujeedada laga leeyahay dhaqankan yar ayaa ah in loogu beddelo naqshad lagu abuuray Photoshop naqshad websaydh la isticmaali karo oo is-dhexgal ah oo ka jawaabeysa dhaqdhaqaaqa isticmaalaha.

Cabirrada taleefannada gacanta

iPhone 4 iyo 4S: 320 x 480

iPhone 5 iyo 5S: 320 x 568

iPhone6: 375x667

iPhone 6+: 414x736

Nexus 4: 384 x 598

Nexus 5: 360 x 598

Galaxy S3, S4, S5: 360x640

HTC Mid: 360 x 640

Cabirka kiniiniyada

iPad dhammaan moodooyinka iyo sidoo kale iPad Mini: 1024 x 768

Galaxy Tab 2 iyo 3 (7.0 inji): 600 x 1024

Galaxy Tab 2 iyo 3 (10.1 inji): 800 x 1280

Nexus 7: 603 x 966

Nexus 10: 800 x 1280

Microsoft oogada W8 RT: 768 x 1366

Microsoft oogada W8 Pro: 720 x 1280

Cabbiraadaha kombiyuutarada desktop

Shaashado yaryar (tusaale ahaan waxaa loo isticmaalaa netbook): 1024 x 600

Shaashadaha dhexdhexaadka ah: 1280 x 720/1280 x 800

Shaashadaha waaweyn: balaca ka weyn 1400 pixels, tusaale 1400 x 900 ama 1600 x 1200.

Si loo bilaabo qaybinta walxaha iyo meeleynta qaybo ka mid ah majaajillada webka, waxaa aad muhiim u ah inaan tixgelinno u dhigma si loo hubiyo dhammaystirka akhrinta iyo laxanka leh. Waxay muhiim u noqon doontaa inaad isticmaasho xeerarka iyo xulashooyinka hagitaan ee aad ka heli karto liiska sare ee Muuqaalka. Si loogu shaqeeyo si saami ah oo sax ah, waxaa ugu fiican inaan ka shaqeyno boqolkiiba. Waxaan gujineynaa muuqaalka muuqaalka ka dibna ikhtiyaarka «hagaha cusub» si aan u dooranno qaabka qaybinta. Xaaladdan oo kale waxaan samayn doonaa afar qaybood oo toosan oo ah 25% waxaanan u qaadan doonnaa tixraac ahaan si aan u dhigno sawirradeenna hoose iyo sawirka astaanteenna cinwaanka.

Waxaa jira koodh loo qoondeeyo mid kasta oo ka mid ah aagagga qabsan doona annaga tusaale iyo shaqada mid kasta oo ka mid ahi yeelan doono. Tusaale ahaan, si loo muujiyo aagga uu sawirku ku fadhiisan doono, waxaannu u abuuri doonnaa leydi oo leh nooc iskutallaab ah. Si loo muujiyo inaan dooneyno inaan fiidiyowyo ku darno meel cayiman, waxaan ku dari doonnaa calaamadda cayaarta gudaha weelkeenna. Tusaalahan koowaad waxaan kaliya la shaqeyn doonnaa sawirro, qabashada kore waxaad ka arki kartaa aagga qabsanaya logo boggayaga internetka.

Tani waxay noqon laheyd natiijada ugu dambeysa ee inaga Wireframe. Sida aan aragno, waxay u qaybsan tahay cinwaan ka kooban sawirka lagu dhex arki doono astaanta taas oo u adeegaysa iskuxirka bogga guriga oo ay weheliyaan laba tab, mashiin raadin iyo afar badhan oo ku yaal sanduuqa raadinta. Intaa waxaa sii dheer, horeyba jirka dhexdiisa, waxaan ku darnay bar dhinac ah oo ka kooban baarka wax lagu qeybiyo iyo qaybo taxane ah oo loo kala saarayo nooca waxyaabaha ku jira boggayaga internetka. Qeyb kale oo lambar leh oo ay ku jiraan qoraallada ka jiraya boggayaga, iyo ugu dambeyn liis ay ku qoran yihiin astaamaha ugu badan ee metela boggeena.

Aagga mawduuca, kaas oo lagu qeexi doono qayb ay ku jiri doonaan nuxurka is-maaraynta, waxaan ka heli doonnaa nuxurka maqaalladayada. Xaaladdan oo kale, rootiga rootiga ama rootiga rootiga (oo tilmaamaya qaab dhismeedka dabiiciga ah ee degelkeena, cinwaanka maqaalka, metadata, cutub ahaan qoraal ahaan, kaas oo sawir lagu dhex daray).

Raadraac ahaan waxaan ku soo darnay afar sawir oo u adeegi doona sidii xiriiriye meelaha kale ee boggeena ah. Halkan waxaan ku dari karnaa calaamadaha ama qaybaha kale ee xiisaha leh. In kasta oo xaqiiqda jirta, aaggan ayaa u dhaqmi doona sida oo kale hordhac, Maaddaama cagtu lafteeda xoogaa hoos ugu sii dhacayso iyadoo la adeegsanayo siyaasadda isticmaalka, ogeysiiska sharciga ah iyo xuquuqda lahaanshaha.

Marka aan qeexno qaabdhismeedka aasaasiga ah ama qalfoofka boggeenna, waa inaan u gudubnaa heerka xiga. Tani waxay ka koobnaan doontaa naqshadeynta dhabta ah ee mid kasta oo ka mid ah aagagga shabakaddayada. Si kale haddii loo dhigo, waxaan bilaabi doonnaa "buuxinta" mid kasta oo ka mid ah aagaggan waxyaabaha ku jira ee ugu dambeyn lagu soo gelin doono degelkeenna. Waxaa lagugula talinayaa inaanan naqshadeyn walxahaan kahor intaanan ka shaqeynin siligga silsiladda maxaa yeelay waxay aad ugu dhowdahay haddii aan ku sameyno amarkan, waxaan u baahanahay inaan dib u habeyn ku sameysano hadhow Waxaan halis ugu jirnaa in aan sawirano sawiradeenna iyo in dib loogu noqdo naqshaddii mid kasta oo canaasiirta ka mid ah, taas oo noqon doonta waqti lumis ama natiijo tayo hooseysa.

Xaaladdan oo kale, naqshadeynta degelkeennu waxay noqon doontaa mid aad u fudud. Waxaan isticmaali doonaa amarrada naqshadeynta maaddada, maaddaama aan adeegsan doonno astaanta Google si aan u tusaale u noqonno dhaqankan. Waa inaan cadeeyaa in ujeedada casharkaan ay tahay in lagu muujiyo aqoonta farsamada, sidaas darteed natiijada bilicsanaanta ee kiiskan waa mid aan khuseyn. Sidaad u aragto, in yar ayaan u buuxinaynay booska dhammaan meelihii aan horay ugu go'aaminnay qorshaheenna. Si kastaba ha noqotee, waxaan sameynay isbadal yar daqiiqadii ugu dambeysay. Sidaad dareentayba, waxaan si aad ah u yareynay cabirka astaanteena waxaanan kusoo darnay xarriiq qeybinaysa qeybta hoose ee madaxa oo sifiican ugu xirmeysa liiska kore. Xaaladdan oo kale waxaan u isticmaalnay badhamada iyo agabyada bangiga kheyraadka. Anagoo naqshadeeyayaal ah ayaynu naqshadeyn karnaa nafteena, (gaar ahaan doorashadan waxaa lagula talinayaa haddii aan rabno inay soo bandhigto tonic aad u la mid ah kan ay soo bandhigtay sawirka astaanta ama astaanta).

Waa muhiim inaan maskaxda ku hayno in si aan u dhigno tusaalahan aan uga shaqeyn doonno laba heer oo kala duwan. Dhinac, waxaan ka shaqeyn doonnaa walxaha iyo dhanka kale muuqaalka bogga. Taasi waa, dhinac ka mid ah qalfoofka degelkeena iyo dhinaca kale dhammaan waxyaalaha sabeynaya ee qalfoofkani taageeri doono. Waxaad ogaan doontaa inay jiraan aagag aan dul sabayn doonin haba yaraatee, sida aagga uu dhinaceena dhinici doono, lugta hore ama baarka kala qaybinta ee madaxa kala saara jirka.

Qaab dhismeedka 1, 2, 3 iyo 4 ayaa ka mid noqon doona background ee boggeena, sidaas darteed run ahaantii muhiim ma noqon doonto in laga dhoofiyo sida Adobe Photoshop, in kasta oo aan sameyn karno, haddana muhiim ma ahan. Markay tahay Midabada fidsan (mid ka mid ah astaamaha lagama maarmaanka u ah naqshadeynta guryaha iyo naqshadeynta maaddada, waxaa loo isticmaali karaa si dhammaystiran iyadoo loo marayo koodh iyadoo la adeegsanayo qaab-dhismeedka CSS). Si kastaba ha noqotee, walxaha intiisa kale waa in loo kaydiyaa gelinta dambe ee koodhkeenna HTML. Jaantuskan yar waxaan sidoo kale ku soo saarnay aagagga ka tirsan asalka bogga si aan u helno fikrad cad oo ah muuqaalka ugu dambeeya ee boggeena noqon doono.

Sida aad awoodi doontid inaad ogaatid, ujeedada loo abuuray nidaamkan Adobe Photoshop waa in la helo cabirka dhabta ah ee qayb kasta, lana caddeeyo qaabka iyo qaab dhismeedka qayb kasta. Dabcan, nuxurka qoraalku boos kuma lahan wejigan hawsha maadaama ay tahay inuu noqdo laga keenay tafatirahayaga koodhka. Waa inaan sidoo kale tilmaamno in dhaqankan, aan ku shaqeyn doonno badhamada iyo walxaha ma guurtada ah, in kastoo guud ahaan kuwani badanaa laga adeegsado qaababka sida Bootstrap ama si toos ah Jquery.

Markaan abuurnay mid kasta oo ka mid ah walxaha ka koobnaan doona boggeena, waa waqtigii aan bilaabi lahayn dhoofintooda oo aan ku keydinayno galka sawirrada ee ku dhex jira galka mashruuca HTML. Waa muhiim inaad la qabsato dhoofinta siliggaaga, maxaa yeelay waxay u badan tahay inaad u baahan tahay inaad wax ka beddesho astaamaha asalka ah ee ku saleysan qaabeynta qalfoofka. (Tusaale ahaan, kiiskan, waxaan bedelnay cabbirka badhamada asalka ah, astaanta iyo inta badan astaamaha qeyb ka ah halabuurka, oo ay ku jiraan sawirada aagga hoose).

Waa muhiim inaan baranno inaan badbaadinno shay kasta si madax-bannaan si aan ugu badbaadino cabirrada ay leeyihiin iyo hab sax ah. Khalad kasta, haba yaraadee, wuxuu saameyn ku yeelan karaa dhammaan waxyaabaha ka mid ah boggaaga. Maskaxda ku hay in ay isku xirnaan doonaan oo waa inay lahaadaan cabirro hagaagsan si looga soo galo HTML bogga ugu dambeeya. Xaaladdan oo kale, waxaan u baahan doonaa inaan si madax-bannaan u jarno oo u kaydinno qodobbada soo socda:

• Astaanteena.
• Dhamaan badhannada (waa kuwa ka mid ah menu-ka weyn iyo inta kale).
• Dhamaan sawirada.

Waxaan ku samayn karnaa siyaabo badan waxaana laga yaabaa inaad u baahan tahay bedel kaa waxtar badan adiga. Laakiin haddii ay tahay markii ugu horreysay ee aad samaynaysid qaabeynta noocan ah, waxaan kugula talinayaa inaad raacdo talooyinka soo socda.

• Marka hore, waa inaad tagtaa galka halka faylka PSD ee ka kooban siligyagayagu ku yaallo oo aad nuqul ka sameyso inta jeer ee canaasiirta aad dhoofinayso. Xaaladdan oo kale waxaan ka abuurnay 12 nuqul asalka oo waxaan ku keydinay isla galka. Marka xigta, waxaad magacaabi doontaa mid kasta oo nuqullo ah oo mid walba oo ka mid ah waxaad u magacaabi doontaa magaca curiyaha ay ka kooban tahay. 12-kooda nuqul ayaa loo bixin doonaa: Logo, badhanka menu 1, badhanka menu 2, bar raadinta, badhanka sare 1, badhanka kore 2, badhanka kore 3 iyo badhanka sare 4. Afarta soo hadhay waxaa loo magacaabi doonaa: Sawirka 1, Sawirka 2, Sawirka 3 iyo Sawirka 4.
• Marka tan la sameeyo waxaan fureynaa feylka oo leh magaca astaanta.
• Waxaan u tagi doonnaa palette lakabkayaga oo waxaan raadineynaa lakabka ay ku jirto astaanteenna. Kadib waan cadaadi doonnaa Ctrl / Cmd inta aan gujineyno thumbnail ee lakabka la yiri. Sidan ayaa astaanta si otomaatig ah loo soo xulay.
• Tallaabada xigta waxay noqon doontaa inaan u sheegno Photoshop inaan dooneyno inay u jarto astaantaas si sax ah. Tan waxaan kaliya u baahan doonnaa inaan ka wacno aaladda wax soo saarka ee fure ama amarka C.
• Markaan sidan yeelno waxaan gujin doonnaa badhankayaga gala si aan u xaqiijino goynta.
• Hadda waxaan aadi doonnaa qeybta sare ee Faylka si aan u gujino sida loo badbaadiyo. Waxaan dooran doonnaa magaca, kaasoo kiiskan noqon doona «Logo» waxaanna u qoondeyn doonnaa qaab PNG, ahaanshaha faylka bixiya tayada ugu sareysa webka.
• Waxaan ku celcelin doonaa howsha nuqulada oo dhan iyo walxaha. Markaad jarjartid, hubi in inta ka hartay lakabyada ku yaal palette-ku ay yihiin la arki karin ama la baabi’iyey. Sidan ayaan ku badbaadin karnaa walx kasta oo leh asal hufan.

Xaaladdan oo kale waxaan ka xulannaa badhankayaga menu 2 ee lakabyada palette. Waxaad ku arki kartaa shaashadda sida xadka badhankeenna si otomaatig ah loogu xushay.

Marka aan ka soo xulno qalabka wax-soo-saarka ee furaha C, shiraacyadeenna waxaa loo yareeyey oo keliya cabbirka badhankayaga.

Hadda waa waqtigii aan mid mid u keydin lahayn dhammaan walxaha ka tirsan degelkeenna oo aan ku darno galka sawirrada iyo kuwa aan gadaal ka isticmaali doonno. Waxaan wicitaan ka sameyn doonnaa koodhkeena waana sii wadi doonnaa qaabeynta laakiin wixii hada ka dambeeya waxaan ka sii wadaynaa tifaftiraha koodhkeena.

In kasta oo ay jiraan qalabyo badan iyo waxyaabo kale oo lagu beddelan karo bogga oo geedi socodka ka dhigaya mid gebi ahaanba dareen leh, haddana waxaa aad muhiim u ah inaan baranno sida loo sameeyo buuggan. Qaabkan waxaan ku baran doonnaa waa maxay aasaaska ka dambeeya qaabeynta bogga.

Resumen:

1. Naqshadeynta qaab dhismeedka oo ka mid ah bogga fiiro gaar ah u leh waxyaabaha aad rabto inaad gudbiso iyo qaybaha ay tahay inaad ku sameysid boggaaga.
2. Ka shaqee qalfoofkaaga ama Wireframe ka socota Adobe Photoshop oo tilmaamaya qaybaha ay ka kooban yihiin waxyaabaha ka soo muuqan doona iyo qaabkooda.
3. Ku tiirsanaanta tallaabooyinka iyo noocyada aad horay u soo saartay, bilow inaad naqshad dusha sare ee shabakadda. Waxaa ku jira dhammaan walxaha (labadaba sabeynaya iyo kuwo go'anba). Ha iloobin inaad ku darto badhamada u dhigma, astaanta, iyo sawirrada.
4. Mid mid u jar dhammaan waxyaabaha ka mid ah mashruuca. Hubso inay haystaan ​​tallaabooyin sax ah oo aysan dhib dambe kuu geysan doonin.
5. Ku keydi dhammaan walxaha qaab ahaan PNG galka galka sawirada gudaha galka mashruuca HTML.
6. Maskaxda ku hay in mashruucani yeelan doono wax soo saar daaqada shabakada sidaa darteed ay aad muhiim u tahay inaad tixgeliso qaabka midabka oo aad dalbato RGB.
7. Ku dhiirrigeliso degellada kale ee aad ku qanacsan tahay ka hor intaadan u dhaqaaqin ganacsiga, hana iloobin inaad kala hadasho tan xubnaha kooxdaada. Haddii ay tahay mashruuc loogu talagalay macmiilka, iskuday inaad ku dhegto Warbixinta intii suurtogal ah.