Fampianarana: Ahoana ny fametrahana lay pejin-tranonkala amin'ny Adobe Photoshop

MODELY-PHOTOSHOP

Misy fitaovana maro karazana hamolavolana pejin-tranonkala ary hiasa amin'ny fomba tsotra sy miasa tanteraka nefa tsy miditra na manisy kaody. Tsy tambo isaina izy ireo, natolotry ny fampiharana (Adobe Dreamweaver ohatra iray) na mivantana ataon'ny sehatra an-tserasera toa ny Wix. Na izany aza, ho an'ny mpamorona tranonkala dia ilaina ny fahalalana ny fomba fanao amin'ny tanana. HTML5 sy CSS no andry fototra amin'ny fametrahana ny tranokala sy ny pejy fiantsonana.

Na izany aza, matetika kokoa noho izay antenainao dia tsy maintsy mitodika amin'ireo rindranasa toa an'i Indesign ianao na Adobe Photoshop mba hamenoana ny asanao layout ary hanome azy ireo famaranana tonga lafatra. Androany dia ho hitantsika amin'ity lesona lehibe ity, ny fomba ahafahantsika manamboatra pejy web amin'ny alàlan'ny Adobe Photoshop. Amin'ity tapany voalohany ity dia hijanona amin'ny asa hovolavolaina avy amin'ny Photoshop izahay, na dia amin'ny fizarana manaraka aza dia ho hitantsika ny fomba ahafahantsika mampihatra an'io asa io sahady amin'ny kaody HTML mba hampandeha azy.

Manomboka amin'ny famolavolana tariby tariby anay

Hanombohana ny firafitra sy ny famolavolana pejin-tranonkala iray, zava-dehibe tokoa ny hanombohantsika amin'ny famaritana izay ho singa fototra, io no taolana. Ity firafitra ity dia ho fanohanana hitazona ny atiny rehetra (na lahatsoratra na haino aman-jery). Amin'ny famaritana ny fizarana tsirairay izay mandrafitra ny pejinay dia ho afaka hiasa amin'izy ireo amin'ny fahamendrehana tanteraka isika ary hanome endrika sary hita araka izay azo atao.

Zava-dehibe tokoa ny handinihantsika ireo refy hananan'ny tranonkalantsika, raha toa ka hanana a boxed na Full-sakany. Pejy web misy boaty no ho ao anaty fitoeram-bokatra kely ary noho izany hisy habaka hiseho manodidina azy. Mifanohitra amin'izany aza, ny tranonkala witdth feno dia hibodo ny efijery manontolo amin'ilay fitaovana mamerina ilay pejy. Ny fisafidianana eo amin'ny fomba tsotra na ny iray hafa dia mamaly ireo fanontaniana stôlika fotsiny ary hiankina amin'ny filan'ny tetikasa iasantsika ihany koa. Hiasa amin'ity ohatra ity izahay miaraka amin'ny maody boaty, ka tsy hipoka ny toerana rehetra omen'ny mpitety tranonkala.

 

Wireframe-1

Mba hamoronana ny tariby tariby, ny zavatra voalohany tokony hataontsika dia ny miditra amin'ny rindrambaiko Adobe Photoshop ary mampiditra ny refy tadiavintsika hanana ny pejinay. Amin'ity ohatra ity dia ho 1280 teboka ny sakany. Saingy, ny olana momba ny habe dia mety miovaova arakaraka ny toerana farany na ilay fitaovana tiana hamoaka ny pejinay. Tsy misy isalasalana fa raha mila miasa sy mahomby ny famolavolana tranonkala dia tsy maintsy manaiky ary tsy maintsy mifanaraka amin'ny fitaovana rehetra eny an-tsena izy io. Saingy, amin'ity tranga ity dia handeha hiasa isika hamoronana prototype izay havoakanay amin'ny solosaina birao. Na dia izany aza, ny olana mamaly izay hiatrehantsika any aoriana, amin'izao fotoana izao, ity misy ambaratongam-pahefan'ny efijery hiasa amin'ity ohatra ity. Ataovy ao an-tsaina fa amin'ity tranga ity dia hanao layout ny pejy fitobiana ao amin'ny Adobe Photoshop izahay ary avy eo hamindra azy mankany HTML5 SY CSS3. Ny tanjon'ity fampiharana kely ity dia ny hampiova endrika endrika noforonina tao amin'ny Photoshop ho famoronana tranokala azo ampiasaina sy mifandraika amin'ny fihetsiky ny mpampiasa.

Fepetra ho an'ny telefaona finday

iPhone 4 sy 4S: 320 x 480

iPhone 5 sy 5S: 320 x 568

iPhone 6: 375 x 667

iPhone 6+: 414 x 736

Rohy 4: 384 x 598

Rohy 5: 360 x 598

Galaxy S3, S4, S5: 360 x 640

HTC One: 360 x 640

Fandrefesana takelaka

iPad ny maodely rehetra ary koa ny iPad Mini: 1024 x 768

Galaxy Tab 2 sy 3 (7.0 santimetatra): 600 x 1024

Galaxy Tab 2 sy 3 (10.1 santimetatra): 800 x 1280

Rohy 7: 603 x 966

Rohy 10: 800 x 1280

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Fepetra ho an'ny solosaina birao

Takelaka kely (ampiasaina ohatra amin'ny netbook): 1024 x 600

Pikantsary antonony: 1280 x 720/1280 x 800

Pikantsary lehibe: sakany lehibe kokoa noho 1400 teboka, ohatra 1400 x 900 na 1600 x 1200.

 

tariby tariby

Mba hanombohana fizarana ireo singa sy fizarana fizarana ao amin'ny tranokalanay, tena zava-dehibe ny fiheverantsika ireo fizarana mba hiantohana ny famitana mamaky sy ny mozika. Zava-dehibe ny fampiasanao ny fitsipika sy ny safidinao hitanao ao amin'ny menio ambony View. Ny miasa amin'ny fomba mitanila sy marina, dia tsara indrindra raha miasa amin'ny isan-jato isika. Kitiho ny menio zahana ary avy eo amin'ny safidy «Torolàlana vaovao» hisafidianana ny fomba fizarazarana. Amin'ity tranga ity dia hanao fizarana efatra mitsangana amin'ny 25% izahay ary horaisinay ho toy ny referansa hametrahana ny sarinay ao anaty footer sy ny sarin'ny sary famantarana anay ao amin'ny lohateny.

Wireframe-1a

Misy kaody hanondro ireo faritra tsirairay hipetraka ao amintsika MODELY ary ny fiasan'ny tsirairay amin'izy ireo. Ohatra, mba hanondroana ny faritra hipetrahan'ny sary dia hamorona mahitsizoro amina karazana hazo fijaliana isika. Mba hampisehoana fa te hampiditra horonantsary amin'ny faritra iray izahay, dia ampidirinay ao anaty kaonteneranay ilay sary mihetsika. Amin'ity ohatra voalohany ity dia tsy hiasa afa-tsy amin'ny sary izahay, ao amin'ny sary ambony dia azonao jerena ny faritra hipetrahan'ny Logo avy amin'ny tranokalanay.

Wireframe-farany

Ity no vokatra farany an'ny antsika wireframe. Araka ny hitantsika dia mizara lohateny iray ahitana ny sary izay hahitana ny sary famantarana ary ho rohy mankany amin'ny pejy fandraisana miaraka amina tabilao roa, motera fikarohana ary bokotra efatra eo amin'ny boaty fikarohana. Ho fanampin'izay, efa ao anatin'ny vatana, izahay dia nampiditra sidebar iray misy bar fisarahana sy andiana sokajy izay manasokajy ny karazana atiny izay ho ao amin'ny tranonkalantsika. Fizarana iray hafa miaraka amina isa izay misy ny fidirana izay hisy eo amin'ny tranokalanay, ary farany lisitra misy ny masonkarena marika be solontena ao amin'ny tranokalanay.

Ao amin'ny faritra misy ny atiny, izay ho faritan'ny fizarana izay hanisy atiny azo fehezina, ho hitantsika ny atin'ny lahatsoratray. Amin'ity tranga ity, ny sombin-mofo na ny sombin-mofo (izay manondro ny firafitra voajanaharin'ny tranonkalantsika, ny lohatenin'ny lahatsoratra, ny metadata, fehintsoratra iray toy ny fitambaran'ny lahatsoratra, ao anatiny no misy sary.

Amin'ny maha footer anay dia nampiditra sary efatra izahay izay hampifandraisina amin'ireo faritra hafa ao amin'ny pejinay. Eto isika dia afaka mampiditra logo na fizarana mahaliana hafa. Na dia ny tena izy aza dia hiasa bebe kokoa ity faritra ity prefooter, satria ny footer mihitsy dia hidina kely kokoa miaraka amin'ny politikan'ny fampiasana, ny fampandrenesana ara-dalàna ary ny zon'ny mpamorona.

Raha vantany vao nofaritantsika ny rafitra fototra na ny taolana an'ny pejinay, dia tsy maintsy mandeha any amin'ny ambaratonga manaraka izahay. Ity dia ahitana ny volavola tsirairay amin'ireo faritra ao amin'ny tranonkalantsika. Raha lazaina amin'ny teny hafa dia hanomboka "hameno" ny tsirairay amin'ireo faritra ireo isika amin'ny atiny izay hampidirina ao amin'ny tranonkalantsika ihany. Manoro hevitra antsika ny tsy hanombohantsika mamolavola ireo singa ireo alohan'ny hiasa amin'ny tariby tariby satria azo inoana fa raha manao an'io lamina io isika dia mila manova ny refiny. Mety hitranga ny manodinkodina ny sarinay ary mila mamerina ny famolavolana ny singa tsirairay, izay ho lasa fandaniam-potoana na vokatra ambany kalitao.

Amin'ity tranga ity dia ho tsotra be ny famolavolana ny tranonkalantsika. Hampiasa ny fitsipika momba ny famolavolana fitaovana, satria hampiasa ny sary famantarana Google izahay hanehoana an'io fanao io. Tokony hazavaiko fa ny tanjon'ity fampianarana ity dia ny hanehoana ny fahalalana ara-teknika, noho izany ny vokatra estetika amin'ity tranga ity dia tsy misy dikany. Araka ny hitanao, tsikelikely no nameno ny habaka tamin'ireo faritra rehetra efa nofaritanay teo amin'ny tetikasanay. Na izany aza, nanao fanovana kely izahay tamin'ny minitra farany. Araka ny efa tsikaritrareo dia nampihena be ny haben'ny sary famantarana izahay ary nampiditra tsipika fizarazarana tao amin'ny faritra lohan'ny ambany izay mifamatotra tanteraka amin'ny menio ambony. Amin'ity tranga ity dia nampiasa bokotra sy fitaovana avy amin'ny banky loharano izahay. Amin'ny maha mpamolavola antsika dia afaka mamolavola azy ireo isika, (indrindra io safidy io dia atoro antsika raha irintsika ny hampiseho tonika tena mitovy amin'ilay natolotry ny marika na sary famantarana).

Web

Zava-dehibe ny hitadidiantsika fa hametraka an'ity ohatra ity dia hiasa amin'ny ambaratonga roa samy hafa isika. Amin'ny lafiny iray, hiasa amin'ny zavatra izahay ary amin'ny lafiny iray hafa ny fisehoan'ny tranokala. Izany hoe, amin'ny lafiny iray amin'ny taolam-tranonkalanay sy amin'ny lafiny iray hafa rehetra singa mitsingevana izay hanohan'ity taolana ity. Ho tsapanao fa misy faritra izay tsy hitsingevana mihitsy, toy ny faritra hipetrahan'ny sisin-tanantsika, ny preefooter na ny bar fisarahana mampisaraka ny lohateny amin'ny vatana.

web2

Ny firafitra 1, 2, 3 ary 4 dia ho ampahany amin'ny lafika amin'ny pejin-tranonkalantsika, noho izany raha ny tena izy dia tsy ilaina ny manondrana toa izany avy amin'ny Adobe Photoshop, na dia vitantsika aza izany dia tsy ilaina izany. Rehefa miresaka Loko fisaka (iray amin'ireo fiasa tena ilaina amin'ny famolavolana fisaka sy ny famolavolana fitaovana, azo ampiharina tsara amin'ny alàlan'ny kaody amin'ny alàlan'ny fomban-taratasy CSS). Na izany aza, ny sisa amin'ireo singa dia tsy maintsy tehirizina raha ampidirina ao aorian'ny kaody HTML. Amin'ity kisary kely ity ihany koa dia namerina nanamboatra ireo faritra izay ao ambadiky ny pejy izahay mba hahafantaranay mazava izay ho endrik'ity tranokalanay ity.

Rehefa afaka mahatsapa ianao, ny fahatsapana ny famoronana an'ity tetik'asa ity ao amin'ny Adobe Photoshop dia ny hahazoana ny refy marina amin'ny singa tsirairay, ary ny hanazavana ny fandaminana sy ny firafitry ny singa tsirairay. Mazava ho azy, ny atiny an-tsoratra dia tsy misy toerana amin'ity dingana ity satria tsy maintsy hisy izany natolotra avy amin'ny mpampanonta kaody anay. Tokony hamafisintsika ihany koa fa amin'ity fampiharana ity dia hiasa miaraka amin'ny bokotra sy singa miorina isika, na dia matetika aza dia ampiharina amin'ny rafitra toy ny Bootstrap na mivantana avy amin'ny Jquery.

Vantany vao noforonintsika ireo singa tsirairay izay handrafitra ny pejin-tranonkalantsika, tonga ny fotoana hanombohana manondrana azy ireo ary hitahiry azy ireo ao anaty fampirimana sary hita ao anatin'ny fampirimana tetikasa HTML. Zava-dehibe ny fahazarana manondrana amin'ny tariby taribyo, satria azo inoana fa mila manova ny sasany amin'ireo singa tany am-boalohany mifototra amin'ny famolavolana taolana ianao. (Ohatra, amin'ity tranga ity, nanova ny haben'ny bokotra tany am-boalohany isika, ny sary famantarana ary ny ankamaroan'ny singa izay ampahany amin'ny firafitra, ao anatin'izany ny sary ao amin'ny faritra ambany).

Zava-dehibe ny ianarantsika mitahiry tsy miankina amin'ny zavatra rehetra hamonjy azy ireo amin'ny refy ananany ary amin'ny fomba mazava. Ny lesoka rehetra, na kely toy inona aza, dia mety hisy fiantraikany amin'ny singa rehetra izay ao anatin'ny pejin-tranonkalanao. Ataovy ao an-tsaina fa hifandray izy ireo ary tsy maintsy manana refy lavorary mba hahafahana miditra ao amin'ny HTML amin'ny tranonkala farany. Amin'ity tranga ity dia mila manapaka tsy miankina sy mitahiry ireto singa manaraka ireto isika:

  • Ny sary famantarana anay
  • Ny bokotra rehetra (ireo izay anisan'ny menio lehibe sy ny sisa).
  • Ireo sary rehetra.

Azontsika atao amin'ny fomba maro izany ary angamba hahita fomba hafa mahomby kokoa aminao ianao. Fa raha vao sambanao hanao an'ity karazana lamina ity dia mamporisika anao aho hanaraka ireto torohevitra manaraka ireto.

  • Voalohany, tsy maintsy mandeha any amin'ny folder misy ny fisie PSD izay misy ny wireframe misy anao ary averimbereno im-betsaka toy ireo singa izay haondranao. Amin'ity tranga ity dia namorona kopia 12 avy tamin'ny tena izy izahay ary nitahiry azy ireo tao amin'ilay fampirimana iray ihany. Manaraka izany, homenao anarana ny tsirairay amin'ireo kopia ary omeo ny tsirairay amin'izy ireo ny anaran'ny singa ao anatiny. Ny kopianay 12 dia homena anarana: Logo, bokotra menio 1, bokotra menio 2, bara fitadiavana, bokotra ambony 1, bokotra ambony 2, bokotra ambony 3 ary bokotra ambony 4. Ny efatra ambiny dia homena anarana hoe: Sary 1, Sary 2, Sary 3 sy sary 4.
  • Vantany vao vita izany dia hosokafantsika ilay fisie miaraka amin'ny anaran'ny logo.
  • Handeha any amin'ny paleta sosona misy antsika isika ary hahita ilay sosona misy ny sary famantarana. Avy eo dia hanery izahay Ctrl / Cmd raha tsindrio ny sary kely an'ilay sosona voalaza. Amin'izay dia ho voafantina ho azy ny sary famantarana.
  • Ny dingana manaraka dia ny milaza amin'i Photoshop fa irinay ny manapaka an'io logo io amin'ny fomba mazava. Ho an'ity dia tsy mila miantso ny fitaovana cropping fotsiny isika avy amin'ny fanalahidy na ny baiko C.
  • Vantany vao vitantsika izany dia tsindrio ny bokotra Enter antsika hanamafisana ny fahatapahana.
  • Handeha amin'ny menio File ambony izahay hanindriana ny fomba fitehirizana. Hisafidy ny anarana isika, izay amin'nity tranga ity dia «Logo» ary hanome endrika azy izahay PNG, noho izy fisie manolotra kalitao avo indrindra amin'ny tranonkala.
  • Averinay amin'ny alàlan'ny kopia sy ny singa rehetra ny fizotrany. Rehefa namboarinao, dia alao antoka fa ny sisa amin'ny sosona ao amin'ny palette misy antsika tsy hita maso na nofoanana. Amin'izany fomba izany no ahafahantsika mamonjy ny singa tsirairay miaraka amina background mangarahara.

Bokotra1

Amin'ity tranga ity dia misafidy ny bokotra menio 2 amin'ny palette sosona isika. Azonao atao ny mahita amin'ny pikantsary ny fisafidianana ho azy ny fetran'ny bokotra ananantsika.

bokotra2

Raha vantany vao mifidy ny fitaovana cropping avy amin'ny lakile C isika dia averina amin'ny refin'ny bokotra fotsiny ny lamba fonosantsika.

bokotra fitsitsiana

Izao no fotoana hamonjy tsirairay ny singa rehetra izay ao anatin'ny tranokalanay ary ampidirina ao anaty fampirimana sary ary hampiasainay avy eo. Hanao antso avy amin'ny kaody izahay ary hanohy ny fisianay, fa manomboka izao kosa dia avy amin'ny mpampanonta kaodinay.

Na dia maro aza ny fitaovana sy ny safidy hafa amin'ny fametrahana pejy web izay mahatonga ny fizotrany ho tonga intuitive tanteraka, tena zava-dehibe ny ianarantsika manao azy amin'ny boky fampianarana. Amin'izany fomba izany no hianarantsika izay fototra ifotoran'ny famolavolana pejy web.

famintinana:

  1. Volavola ny structure ny tranokala mijery manokana ny atiny tianao ampitaina sy ireo fizarana izay tsy maintsy noforoninao tao amin'ny tranonkalanao.
  2. Miasà amin'ny taolambalonao na wireframe avy amin'ny Adobe Photoshop izay manondro ny faritra isehoan'ny atiny sy ny endriny.
  3. Miantehitra amin'ny fepetra sy marika novokarinao taloha, manomboka famolavolana ny tampon'ny tranonkala. Ahitana singa rehetra (sady mitsingevana no miorina). Aza adino ny mampiditra ireo bokotra, sary ary sary mifanaraka aminy.
  4. Hetezo tsirairay ny singa rehetra izay ao anatin'ny tetikasa. Hamarino tsara fa manana ny fepetra sahaza azy ireo izy ireo ary tsy hiteraka olana aminao avy eo.
  5. Tehirizo amin'ny endrika rehetra ny singa rehetra PNG ao amin'ny fampirimana sary ao anatin'ny fampirimana tetikasa HTML.
  6. Ataovy ao an-tsaina fa ity tetikasa ity dia hanana fivoahan'ny varavarankely web ka tena zava-dehibe tokoa ny handraisanao ny maody loko sy hampiharana. RGB.
  7. Mahazoa aingam-panahy avy amin'ireo tranonkala hafa ankafizinao alohan'ny hidiranao amin'ny orinasa, ary aza adino ny miresaka izany amin'ireo mpikambana ao amin'ny ekipanao. Raha toa ka tetikasa ho an'ny mpanjifa izany dia andramo ny mifikitra amin'ilay Misahana ny araka izay azo atao.

 


Ny atin'ny lahatsoratra dia manaraka ny fitsipiky ny etika fanonta. Raha hitatitra tsindry diso eto.

2 hevitra, avelao ny anao

Avelao ny hevitrao

Ny adiresy email dia tsy ho namoaka. Mitaky saha dia marika amin'ny *

*

*

  1. Tompon'andraikitra amin'ny data: Miguel Ángel Gatón
  2. Tanjon'ny angona: Control SPAM, fitantanana hevitra.
  3. Legitimation: Ny fanekenao
  4. Fifandraisana momba ny angona: Tsy hampitaina amin'ny antoko fahatelo ny angona raha tsy amin'ny adidy ara-dalàna.
  5. Fitehirizana angona: Database nomen'ny Occentus Networks (EU)
  6. Zo: Amin'ny fotoana rehetra, azonao atao ny mametra, mamerina ary mamafa ny mombamomba anao.

  1.   Piratesking Pirate King dia hoy izy:

    hahahahahahaha ary amin'ny faran'izany rehetra izany dia mankanesena eo amin'ny bokotra fanombohana ianao, mamono fitaovana, ary manantona mpitsabo matihanina iray izay hahatonga anao ho tranonkala tsy mahamenatra;)

  2.   ronny dia hoy izy:

    Mankasitraka ahy tsara ny tutorial, fa angamba amin'ny manaraka dia hataonao antsipiriany bebe kokoa izany, mbola manomboka amin'ity famolavolana ity aho, ary rehefa hitako ireo sary miaraka amin'ny valiny farany dia misy dingana vitsivitsy izay tsy fantatro ny fomba hanaovana azy. Misaotra anao.