Tutorial: Kif Tqassam Paġna tal-Web bl-Adobe Photoshop

MUDELL-PHOTOSHOP

Hemm varjetà kbira ta 'għodda biex tfassal paġni tal-web u taħdem b'mod totalment sempliċi u funzjonali mingħajr ma ddaħħal jew tmiss kodiċi. Huma bla għadd, proposti mill-applikazzjonijiet (Adobe Dreamweaver huwa eżempju) jew direttament minn pjattaformi online bħal Wix. Madankollu, għal disinjatur tal-web, li jkun jaf il-proċeduri manwali huwa essenzjali. HTML5 u CSS huma l-pilastri fundamentali għat-tqassim ta 'websajts u landing pages.

Madankollu, aktar spiss milli tista 'tistenna, ikollok tirrikorri għal applikazzjonijiet bħal Indesign jew Adobe Photoshop biex tikkumplimenta x-xogħol tat-tqassim tiegħek u tagħtihom finitura perfetta. Illum se naraw f'dan it-tutorja estensiv, kif nistgħu nqassmu paġna tal-web billi nużaw l-Adobe Photoshop. F'din l-ewwel parti se nibqgħu fix-xogħol li għandu jiġi żviluppat minn Photoshop, għalkemm f'pagamenti futuri se naraw kif nistgħu napplikaw dan ix-xogħol diġà direttament f'kodiċi HTML biex nagħmluh funzjonali.

Nibdew bid-disinn tal-wireframe tagħna

Biex tibda bit-tqassim u d-disinn ta 'paġna tal-web, huwa importanti ħafna li nibdew billi niddefinixxu x'se jkunu l-elementi bażiċi, dan huwa l-iskeletru. Din l-istruttura sservi bħala appoġġ biex iżżomm il-kontenut kollu (kemm jekk testwali jew multimedjali). Billi niddefinixxu kull waħda mis-sezzjonijiet li jiffurmaw il-paġna tagħna nkunu nistgħu naħdmu fuqhom bi preċiżjoni sħiħa u nipprovdu disinn viżwali li jkun preċiż kemm jista 'jkun.

Huwa importanti ħafna li nqisu d-dimensjonijiet li l-websajt tagħna se jkollha, jekk ikollha kaxxa jew Wisa 'sħiħ. Paġna tal-web f'kaxxa tkun ġewwa kontenitur żgħir u għalhekk jidher spazju madwaru. Għall-kuntrarju, web witdth sħiħ jokkupa l-iskrin kollu tal-apparat li jirriproduċi l-paġna. L-għażla bejn modalità jew oħra tirrispondi għal mistoqsijiet stilistiċi biss u tiddependi wkoll fuq il-ħtiġijiet tal-proġett li qed naħdmu fuqu. Aħna se naħdmu f'dan l-eżempju bil-mod boxed, u għalhekk mhux se jokkupa l-ispazju kollu pprovdut mill-browser.

 

Wireframe-1

Biex noħolqu l-wireframe tagħna, l-ewwel ħaġa li għandna nagħmlu hi li nidħlu fl-applikazzjoni Adobe Photoshop u ninkludu d-dimensjonijiet li rridu li jkollna l-paġna tagħna. F'dan l-eżempju l-paġna tagħna se tkun 1280 pixel wiesgħa. Madankollu, il-kwistjoni tad-daqs tista 'tvarja skont id-destinazzjoni finali jew l-apparat li rridu nirriproduċu l-paġna tagħna. M'hemm l-ebda dubju li biex disinn tal-web ikun funzjonali u effiċjenti, għandu jkun jirrispondu u għandu jadatta għall-apparati kollha fis-suq. Madankollu, f'dan il-każ se naħdmu biex noħolqu prototip li se nirriproduċu fuq kompjuter desktop. Anke hekk, il-kwistjoni reattiva li ser nittrattaw aktar tard, għal issa, hawnhekk hija ġerarkija tad-dimensjonijiet tal-iskrin biex naħdmu magħha f'dan l-eżempju. Żomm f'moħħok li f'dan il-każ se nagħmlu tqassim tal-paġna tal-inżul f'Adobe Photoshop u mbagħad immigrawha għal HTML5 U CSS3. L-għan ta 'din il-prattika żgħira huwa li tikkonverti disinn maħluq fil-Photoshop f'disinn tal-web li jista' jintuża u interattiv li jirrispondi għall-movimenti tal-utent.

Kejl għat-telefowns ċellulari

iPhone 4 u 4S: 320 x 480

iPhone 5 u 5S: 320 x 568

iPhone 6: 375 x 667

iPhone 6+: 414 x 736

Nexus 4: 384 x 598

Nexus 5: 360 x 598

Galaxy S3, S4, S5: 360 x 640

HTC One: 360 x 640

Kejl tal-pilloli

iPad il-mudelli kollha kif ukoll iPad Mini: 1024 x 768

Galaxy Tab 2 u 3 (7.0 pulzieri): 600 x 1024

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

Kejl għal kompjuters desktop

Skrins żgħar (użati pereżempju fin-netbooks): 1024 x 600

Skrins medji: 1280 x 720/1280 x 800

Skrins kbar: wisa 'akbar minn 1400 pixel, eżempju 1400 x 900 jew 1600 x 1200.

 

gwidi tal-wireframe

Biex tibda tqassam l-elementi u tassenja sezzjonijiet fi ħdan il-web mockup tagħna, huwa importanti ħafna li nqisu l-proporzjonijiet biex niżguraw finitura li tinqara u melodika. Ikun essenzjali li tuża l-għażliet tar-regoli u l-gwidi li tista 'ssib fil-menu ta' fuq Ara. Biex naħdmu b'mod proporzjonali u eżatt, l-aħjar huwa li naħdmu minn persentaġġi. Se nikklikkjaw fuq il-menu tal-vista u mbagħad fuq l-għażla «Gwida Ġdida» biex nagħżlu l-modalità tad-diviżjoni. F'dan il-każ se nagħmlu erba 'diviżjonijiet vertikali f'25% u se nieħduhom bħala referenza biex inpoġġu l-immaġini tagħna fil-footer u l-immaġni tal-logo tagħna fl-header.

Wireframe-1a

Hemm kodiċi biex tinnomina kull waħda miż-żoni li se jokkupaw tagħna mudell u l-funzjoni li kull wieħed minnhom se jkollu. Pereżempju, biex nindikaw iż-żona li se tokkupa immaġni, noħolqu rettangoli b'tip ta 'salib. Biex nindikaw li rridu ninkludu vidjows f'ċerta żona, se ninkludu s-simbolu tal-logħob ġewwa l-kontenitur tagħna. F'dan l-ewwel eżempju se naħdmu biss bl-istampi, fil-qabda ta 'fuq tista' tara l-erja li logo mill-websajt tagħna.

Wireframe-finali

Dan ikun ir-riżultat finali ta 'tagħna wireframe. Kif nistgħu naraw, huwa maqsum f'intestatura magħmula mill-immaġni li fiha jinstab il-logo u li sservi bħala ħolqa għall-home page akkumpanjata minn żewġ tabs, magna tat-tiftix u erba 'buttuni fuq il-kaxxa tat-tfittxija. Barra minn hekk, diġà fil-ġisem, inkludejna sidebar komposta minn strixxa diviżorja u serje ta 'kategoriji li jikkategorizzaw it-tip ta' kontenut li se jkun fuq il-websajt tagħna. Taqsima oħra b'numerazzjoni li tinkludi l-entrati li se jeżistu fuq is-sit tagħna, u fl-aħħar lista bl-aktar meta tags rappreżentattivi fuq is-sit tagħna.

Fil-qasam tal-kontenut, li se jkun definit minn taqsima li se tinkludi kontenut maniġġabbli minnu nnifsu, insibu l-kontenut tal-artikli tagħna. F'dan il-każ, frak tal-ħobż jew frak tal-ħobż (li jindika l-istruttura organika tal-websajt tagħna, it-titlu tal-artiklu, il-metadata, paragrafu bħala korp ta 'test, li fih hija inkluża immaġni.

Bħala footer daħħalna erba 'immaġini li jservu bħala ħolqa għal oqsma oħra tal-paġna tagħna. Hawnhekk nistgħu ninkludu logos jew sezzjonijiet interessanti oħra. Għalkemm fir-realtà, dan il-qasam se jaġixxi aktar bħal prefooter, peress li l-footer innifsu se jmur ftit iktar 'l isfel bil-politika dwar l-użu, l-avviż legali u d-drittijiet tal-awtur.

Ladarba niddefinixxu l-istruttura bażika jew l-iskeletru tal-paġna tagħna, ikollna mmorru għall-livell li jmiss. Dan se jikkonsisti fid-disinn xieraq ta 'kull waħda mill-oqsma tal-websajt tagħna. Jiġifieri, se nibdew "nimlew" kull waħda minn dawn l-oqsma bil-kontenut li finalment jiddaħħal fuq il-websajt tagħna. Huwa rrakkomandat li ma niddisinjawx dawn l-elementi qabel ma naħdmu fuq il-wireframe għax huwa probabbli ħafna li jekk nagħmlu dan f'din l-ordni, ikollna bżonn nimmodifikaw il-proporzjonijiet tagħhom aktar tard. Nirriskjaw li nfixklu l-immaġini tagħna u li jkollok terġa 'tagħmel id-disinn ta' kull wieħed mill-elementi, li se jsir jew ħela ta 'ħin jew riżultat ta' kwalità aktar baxxa.

F'dan il-każ, id-disinn tal-websajt tagħna se jkun estremament sempliċi. Aħna nużaw il preċetti tad-disinn tal-materjal, peress li se nużaw il-logo ta 'Google biex nagħtu eżempju ta' din il-prattika. Irrid niċċara li l-iskop ta 'dan it-tutorja huwa li juri l-għarfien tekniku, għalhekk ir-riżultat estetiku f'dan il-każ huwa irrilevanti. Kif tistgħu taraw, ftit ftit konna qed nimlew l-ispazju bl-oqsma kollha li qabel iddeterminajna fl-iskema tagħna. Madankollu, għamilna modifika żgħira fl-aħħar minuta. Kif forsi innutajt, aħna naqqasna d-daqs tal-logo tagħna b'mod konsiderevoli u nkludejna linja diviżorja fiż-żona ta 'l-intestatura t'isfel li tgħaqqad perfettament mal-menu ta' fuq. F'dan il-każ użajna buttuni u materjali minn bank tar-riżorsi. Bħala disinjaturi nistgħu niddisinjawhom aħna stess, (speċjalment din l-għażla hija rrakkomandata jekk irriduha tippreżenta toniku simili ħafna għal dak ippreżentat mill-immaġni tal-marka jew il-logo).

web

Huwa importanti li nżommu f'moħħna li biex nagħmlu dan l-eżempju ser naħdmu fuq żewġ livelli differenti. Minn naħa, se naħdmu fuq l-oġġetti u min-naħa l-oħra d-dehra tal-websajt. Jiġifieri, minn naħa waħda fl-iskeletru tal-websajt tagħna u min-naħa l-oħra kollha elementi li jżommu f'wiċċ l-ilma li dan l-iskeletru se jsostni. Tinduna li hemm żoni li mhux se jkunu f'wiċċ l-ilma, bħall-erja li l-istrixxa tal-ġenb tagħna se tokkupa, il-preefooter jew il-bar li jaqsam li jaqsam l-intestatura mill-ġisem.

web2

L - istrutturi 1, 2, 3 u 4 se jkunu parti mill - isfond tal-paġna tal-web tagħna, allura fir-realtà mhux se jkun neċessarju għalina li nesportaw bħala tali mill-Adobe Photoshop, għalkemm nistgħu nagħmlu dan, mhux meħtieġ. Meta niġu għall Kuluri ċatti (waħda mill-karatteristiċi essenzjali tad-disinn ċatt u d-disinn tal-materjal, jistgħu jiġu applikati perfettament permezz tal-kodiċi bl-użu ta 'folja ta' stili CSS). Madankollu, il-bqija tal-elementi għandhom jiġu ssejvjati għal inserzjoni aktar tard fil-kodiċi HTML tagħna. F’din id-dijagramma żgħira rriproduċejna wkoll iż-żoni li jappartjenu għall-isfond tal-paġna sabiex ikollna idea ċara ta ’x’se tkun id-dehra finali tas-sit tagħna.

Kif tkun tista 'tirrealizza, is-sens li tinħoloq din l-iskema f'Adobe Photoshop huwa li tikseb id-dimensjoni reali ta' kull element, u li tiċċara l-arranġament u l-istruttura ta 'kull element. Naturalment, il-kontenut testwali m'għandux post f'din il-fażi tal-proċess peress li għandu jkun fornut mill-editur tal-kodiċi tagħna. Irridu nindikaw ukoll li f'din il-prattika, se naħdmu ma 'buttuni u elementi statiċi, għalkemm ġeneralment dawn huma ġeneralment applikati minn oqfsa bħal Bootstrap jew direttament minn Jquery.

Ladarba ħloqna kull wieħed mill-elementi li jiffurmaw il-paġna web tagħna, wasal iż-żmien li nibdew nesportawhom u nsalvawhom fil-folder tal-immaġini li jinsab ġewwa l-folder tal-proġett HTML. Huwa importanti li tidra tesporta mill-wireframe tiegħek, għax huwa probabbli ħafna li jkollok bżonn timmodifika wħud mill-elementi oriġinali bbażati fuq il-konfigurazzjoni tal-iskeletru. (Pereżempju, f'dan il-każ, biddilna d-daqs tal-buttuni oriġinali, il-logo u ħafna mill-elementi li huma parti mill-kompożizzjoni, inklużi l-immaġini fiż-żona t'isfel).

Huwa importanti li nitgħallmu naħżnu kwalunkwe oġġett b'mod indipendenti biex niffrankawhom bid-dimensjonijiet li għandhom u b'mod preċiż. Kwalunkwe żball, minkejja kemm jista 'jkun, jista' jinfluwenza l-elementi kollha li huma parti mill-websajt tiegħek. Żomm f'moħħok li se jkunu relatati ma 'xulxin u għandu jkollhom dimensjonijiet perfetti sabiex ikunu jistgħu jiddaħħlu mill-HTML fil-web finali. F'dan il-każ, ikollna bżonn naqtgħu u nsalvaw b'mod indipendenti l-elementi li ġejjin:

  • Il-logo tagħna.
  • Il-buttuni kollha (dawk li huma parti mill-menu prinċipali u l-bqija).
  • L-istampi kollha.

Nistgħu nagħmluha f'ħafna modi u forsi ssib alternattiva li hija aktar effettiva għalik. Imma jekk hija l-ewwel darba li se tagħmel dan it-tip ta 'tqassim, nirrakkomanda li ssegwi l-pariri li ġejjin.

  • L-ewwel, trid tmur fil-folder fejn jinsab il-fajl PSD li fih il-wireframe tagħna u duplikah kemm-il darba daqs l-elementi li se tesporta. F'dan il-każ ħloqna 12-il kopja mill-oriġinal u ssejvjajnihom fl-istess folder. Sussegwentement, tibdel isem kull kopja u tassenja lil kull waħda minnhom l-isem tal-element li fih. It-12-il kopja tagħna se jingħataw isem ġdid: Logo, buttuna tal-menu 1, buttuna tal-menu 2, bar tat-tfittxija, buttuna ta ’fuq 1, buttuna ta’ fuq 2, buttuna ta ’fuq 3 u buttuna ta’ fuq 4. L-erbgħa li jifdal se jingħataw isem ġdid bħala: Immaġni 1, Immaġni 2, Immaġni 3 u Immaġni 4.
  • Ladarba dan isir niftħu l-fajl bl-isem tal-logo.
  • Se mmorru għall-paletta tas-saffi tagħna u nsibu s-saff li fih il-logo tagħna. Imbagħad se nagħfsu Ctrl / Cmd waqt li nikklikkjaw fuq il-minjatura tal-imsemmi saff. B'dan il-mod, il-logo ikun ġie magħżul awtomatikament.
  • Il-pass li jmiss se jkun li ngħidu lill-Photoshop li rridu li jaqta 'dak il-logo b'mod preċiż. Għal dan irridu nagħmlu biss sejħa lill-għodda tal-ħsad miċ-ċavetta jew il-kmand C.
  • Ladarba għamilna dan se nikklikkjaw fuq il-buttuna Enter tagħna biex nikkonfermaw il-qatgħa.
  • Issa se mmorru fil-menu File ta 'fuq biex nikklikkjaw fuq save kif Aħna nagħżlu l-isem, li f'dan il-każ ikun "Logo" u nassenjaw format lilu PNG, talli huwa l-fajl li joffri l-ogħla kwalità fuq il-web.
  • Se nirrepetu l-proċess bil-kopji u l-elementi kollha. Meta tkun mirqum, kun żgur li l-bqija tas-saffi fil-paletta tagħna huma inviżibbli jew eliminati. B'dan il-mod nistgħu nsalvaw kull element bi sfond trasparenti.

Buttuna1

F'dan il-każ qed nagħżlu l-buttuna tal-menu 2 tagħna mill-paletta tas-saffi. Tista 'tara fil-screenshot kif il-limiti tal-buttuna tagħna ġew magħżula awtomatikament.

buttuna2

Ladarba nagħżlu l-għodda tal-ħsad miċ-ċavetta C, il-kanvas tagħna jitnaqqas biss għad-dimensjonijiet tal-buttuna tagħna.

buttuna save

Issa huwa ż-żmien li niffrankaw wieħed wieħed l-elementi kollha li huma parti mill-websajt tagħna u ninkluduhom fil-folder tal-immaġini u li se nużaw aktar tard. Se nagħmlu telefonati mill-kodiċi tagħna u nkomplu bit-tqassim tagħna imma minn issa 'l quddiem mill-editur tal-kodiċi tagħna.

Għalkemm hemm ħafna għodod u alternattivi għat-tqassim ta 'paġna tal-web li jagħmlu l-proċess totalment intuwittiv, huwa importanti ħafna li nitgħallmu kif nagħmluh b'mod manwali. B'dan il-mod nitgħallmu x'inhuma l-prinċipji fundamentali wara d-disinn ta 'paġna tal-web.

Sommarju:

  1. Iddisinja struttura tal-websajt billi tagħti attenzjoni speċjali lill-kontenut li trid tittrasmetti u s-sezzjonijiet li trid toħloq fuq il-websajt tiegħek.
  2. Aħdem fuq l-iskeletru tiegħek jew wireframe mill-Adobe Photoshop li tindika f'liema oqsma se jidhru l-kontenuti u l-format tagħhom.
  3. Billi sserraħ fuq il-miżuri u l-marki li żviluppajt qabel, ibda disinn il-wiċċ tal-web. Jinkludi l-elementi kollha (kemm f'wiċċ l-ilma kif ukoll fissi). Tinsiex li tinkludi l-buttuni, il-logo u l-immaġini korrispondenti.
  4. Aqta 'wieħed wieħed l-elementi kollha li huma parti mill-proġett. Kun żgur li għandhom il-miżuri t-tajba u li ma jikkawżawlux problemi aktar tard.
  5. Issejvja l-elementi kollha fil-format PNG fil-folder tal-immaġini ġewwa l-folder tal-proġett HTML.
  6. Żomm f'moħħok li dan il-proġett se jkollu output għat-tieqa tal-web u għalhekk huwa importanti ħafna li tieħu kont tal-modalità tal-kulur u tapplika RGB.
  7. Kun ispirat minn websajts oħra li tammira qabel ma tibda taħdem, u tinsiex tiddiskuti dan mal-membri tat-tim tiegħek. Fil-każ li huwa proġett għal klijent, ipprova żomm mal- briefing kemm jista 'jkun.

 


Il-kontenut tal-artikolu jaderixxi mal-prinċipji tagħna ta ' etika editorjali. Biex tirrapporta żball ikklikkja hawn.

2 kummenti, ħalli tiegħek

Ħalli l-kumment tiegħek

Your email address mhux se jkun ippubblikat. oqsma meħtieġa huma mmarkati bl *

*

*

  1. Responsabbli għad-dejta: Miguel Ángel Gatón
  2. Għan tad-dejta: Kontroll SPAM, ġestjoni tal-kummenti.
  3. Leġittimazzjoni: Il-kunsens tiegħek
  4. Komunikazzjoni tad-dejta: Id-dejta ma tiġix ikkomunikata lil partijiet terzi ħlief b'obbligu legali.
  5. Ħażna tad-dejta: Bażi tad-dejta ospitata minn Occentus Networks (UE)
  6. Drittijiet: Fi kwalunkwe ħin tista 'tillimita, tirkupra u tħassar l-informazzjoni tiegħek.

  1. hahahahahahahaha u fit-tmiem ta 'dan kollu, tmur fil-buttuna tal-bidu, itfi t-tagħmir, u tmur għand professjonist tal-ħarġa li tagħmlek websajt li mhijiex xi ħaġa tal-ħmieġ;)

  2.   ronny qal

    It-tutorja tippreċiżani sew, imma forsi fil-wieħed li jmiss tagħmilha aktar dettaljata, għadni nibda f'dan id-disinn, u meta nara l-istampi bir-riżultat finali hemm xi passi li ma nafx kif nagħmel. Grazzi.