Kjo është guida ime e parë në Feniksi.com. Ideja të shkruaj këtë tutorial më erdhi sepse tek Feniksi mungojnë guidat për grafikën, prandaj bëra një mësim sadopak të nevojshëm për një dizajner që kërkon të ndërtojë faqe webi. Unë këtë web-dizajn e quajta “Web-dizajn i pastër” sepse nuk ka shumë ngarkesa apo shumë ngjyra dhe gjithashtu u mundova ta bëj sa më të qartë mësimin.
Për ta bërë më të lehtë bëra ndarjen e dizajnit:
Klikoni tek imazhi për ta zmadhuar atë
Si fillim hapim nje dokument të ri përmes File>New dhe i vendosim permasat si në figurën e mëposhtme.
Pas kësaj na nevojiten disa vija qe do të na ndihmojnë shumë ne pozicionimin e dizajnit, të cilat ndryshe quhen edhe “Guide lines”. Dizajni ynë ka përmasa 1000 x 1200px (gjerësi x gjatësi). Atëherë veprojmë: View>New guide 50px Vertical, si në figurën më poshtë.
Kjo është vija jonë e parë ndihmëse. E përsërisim këtë edhe një herë: View>New guide 950px Vertical dhe do të shohim dy vija me ngjyrë të kaltër te çelur (aqua) që do të paraqiten aty ku bëjmë punën.
Tani pa humbur shumë kohë veprojmë edhe dy herë të tjera si më lartë: View>New guide 450px Vertical (kjo eshte vija jonë e tretë ndihmëse) dhe View>New guide 550px Vertical.
Dokumenti me 4 vijat ndihmëse u rregullua dhe tani nuk na mbetet gjë vetëm se të vazhdojmë me dizenjimin.
Koka
Si ç’e dimë, një faqe duhet të ketë kokën, informacionet e ndryshme, menunë dhe këmbët. Unë nuk kam bërë ndonjë dizajn shumë të komplikuar, kam punuar një të thjeshtë dhe nuk është ndonjë filozofi e madhe ta dizenjojmë atë.
Së pari e hapim një grup me emrin Koka që të vendosim të gjitha elementet e kokës, pastaj marrim Rectangular Marquee Tool me përmasa si në figurë.
Kliko për ta zmadhuar
Bëjmë një lloj koke ku asaj hapësire i japim ngjyrë #f7f7f7. Në kokë kemi të vendosur menunë dhe logon. Për logo kam vendosur vetëm një shkrim Feniksi.com me një lloj fonti që quhet Ballpark me madhësi 48 pt dhe me ngjyrë #f6a328. Tregohuni të kujdesshëm që shkrimin ta vendosni të ngjitur me vijën e parë ndihmëse, dmth me vijën 50px (shiko imazhin më poshtë).
Menuja
Tek menuja nuk kam bërë dicka shumë të gjerë, prandaj marrim fontin me llojin Myriad Pro 16 pt dhe i bëjmë disa lidhje si Fillimi, Projektet, Kontaktet, Për ne, Mbështetje etj. Gjithashtu kam përdorur edhe në mes të tyre Line Tool 1px që ta bëj një ndarje. Veproni edhe ju sikur unë dhe vendosni ato si më poshtë.
Mos harroni që të mos ju perzihen Shtresat (Layers). Të gjithë menunë bëjeni në nën grupin e kokës me emrin “menuja”. Grupimin ja u rekomandoj sepse i ndani shtresat e ndryshme dhe mund ti aksesoni apo lëvizni më lehtë.
Për Feniksin
Kështu ja dhashë emrin grupit unë, por ju mund të përdorni çfarëdo lloj emri tjetër; nuk është me rëndësi. Tani marrim Rectangular Marquee Tool me përmasa si në figurë.
Kliko për ta zmadhuar
Si për fillim e mbushim me ngjyrë #e7e7e7 dhe pastaj po këtij layeri i shtojmë disa efekte në Blending Options.
Kliko për ta zmadhuar
Kliko për ta zmadhuar
Kliko për ta zmadhuar
Tani e përfunduam atë dhe na kanë mbetur vetëm shkrimet dhe logo. Për shkrimin në fillim me titull “Feniksi.com – Thesari i njohurive” kam vendosur këto përmasa:
Si po e shihni të gjitha tekstet janë të ngjitura pas vijës ndihmëse dhe japin një pamje shumë më të bukur. Në titull fjala “Thesari” është bërë me ngjyrë #f6a328. Asgjë tjetër nuk na mbetet përveç se të vendosim edhe logon e Feniksit, që mund t’a merrni direkt nga faqja Feniksi.com lart tek koka, dhe ta vendosni diku.
Feniksi Staf
Krijoni nje grup me emrin autorët dhe pas kësaj zgjidhni Brush dhe vendosni opsionet:
Lini pak hapësirë nga fusha e “Për feniksin” dhe mundohuni të jeni sa më të saktë dhe të tërhiqni një vijë horizontale nga vija e parë ndihmëse deri tek e dyta. Largohuni më poshtë dhe shkruani “Kush qëndron mbrapa Feniksit?” me Arial Regular, 18pt, #b0b0b0. Bëjeni një grup me emrin “Personat” që të mos na perzihen gjërat dhe pastaj merrni përsëri Rectangular Marquee Tool me përmasa Width: 86px dhe Height: 86 px. Katrorin vendoseni pak më poshtë vijës me pika dhe të ngjitur me vijën e parë ndihmëse. Këtë mbusheni me ngjyrë #cccccc dhe vendosni ndonjë foto te çfarëdoshme (unë mora si shembull 3 nga autorët e Feniksit). Bëni kujdes dhe mundohuni t’i vendosni fotot me madhësi sa katrori dhe të lini anash pak hapësirë që të shihet ngjyra e hirit.
Bëni nje tekst anash. Teksti duhet të jetë Arial Regular, 12pt, #7a7a7a dhe emrin e autorit bëjeni bold me një ngjyrë më të errët. Gjithashtu edhe shkrimin “Feniksi staf” bëjeni Arial Regular, 12pt, #f6a328.
Bëjeni Duplicate grupin dy herë vetëm se ndryshoni shkrimet dhe foton dhe mundohuni ti largoni nga njëra tjetra.
Pas këtyre, vijën e parë që krijuam (vijën me pika) bëjeni duplicate dhe bëjeni Edit>Transform>Rotate 90CW. Mundohuni t’a vendosni në mes të vijës së tretë dhe të katërt ndihmëse. Gjithashtu, një pjesë duhet të fshihet që të jetë më e vogël. Prapë vijën e parë bëjeni duplicate dhe këtë vendoseni pak përfundi Autorit të tretë.
Projektet e fundit
Thjesht bëjeni një grup me këtë emër, vendoseni nje titull psh si: “Kush qëndron mbrapa Feniksit?” ngjitur me vijën e dytë ndihmëse. Gjithashtu një foto dhe në Blending Options vendosjani 1, 0, 1 me ngjyre te zezë dhe opacity 75%. Për pak zbukurim vendosni edhe dy rrathë të vegjël, dy shigjeta dhe një shkrim me Myriad Pro 14 pt #7a7a7a.
Ofertat
Si perherë krijoni një grup me emrin ofertat. Kapni Rectangular Marquee Tool me përmasa Width: 250px dhe Height: 10 dhe bëjeni një hapësirë të cilën e mbushni me ngjyrën #949494.
Teksti si me poshtë:
Tani atë hapësirën që bëmë më lartë bëjeni duplicate dhe vendoseni pak më poshtë. Këtë bëjeni duplicate dy herë dhe vendosini me një hapësirë të vogël nga njëra-tjetra deri sa te përputhen me vijat ndihmëse 1 dhe 2.
Këmbët
Pak punë! Merrni atë vijën me pika që e krijuam më lartë, bëjeni duplicate dhe vendoseni pak para fundit. Në fund shtoni nje tekst copyright.
Përfundimi
Kjo ishte gjithçka rreth mësimit. Si guidë e parë, shpresoj të jem shpjeguar mirë dhe t’ju kem ndihmuar në hapat tuaj të parë në dizenjimin për web. Rezultati përfundimtar është i thjeshtë, por qëllimi i guidës është të mësojë fillestarët që nuk kanë shumë eksperiencë.
Komentet, kritikat dhe sygjerimet janë të mirë pritura.
Tutoriali ishte shum i thjeshtë, edhe dizajni gjithashtu por më pëlqeu shum web dizajni. Pres edhe tutorialin për kodimin e dizajnit!
Gjith te mirat, Valtoni!
Hi Valtoni.
Momentalisht nuk e kemi ndermend me e koduar kete template. Kjo sepse kemi nje tutorial tjeter si kodohet nje template edhe pak a shume e njejta metode ndiqet gjithandej. Megjithate do te shohim nese mund te behet edhe kjo gje.
Flm per sugjerimin.
Pershendetje Valtoni me vjen mire qe shpenzove kohen te lexosh te gjithe mesimin,u mundova ta thjeshtoja sa me shume qe te ishte me e lehte ta kuptonin te tjeret por mos u bej merak se kohe pas kohe do bej dhe te tjere dhe sigurisht se do jene me te komplikuar se ky.
Per sa i perket kodimit siq e tha edhe Romeo nuk kam ndermend ta kodoj do te isha shume i kenaqur me veten po te dija ta realizoja edhe kodimin tani ndjek mesime rreth css por ka vetem disa muaj qe mesoj dhe nuk e shoh veten time qe tani per tani ta kryej edhe kodimin,njehere do shkruaj guida vetem per Photoshop pastaj per me vone presim edhe per tjera gjera.:)
Falemnderit shume.:)
Flm per pergjigjet Romeo dhe Laurat!
Laurat po pres guida tjera per Photoshop. Shpresoj qe te mesosh sa me shpejte CSS!
Gjith te mirat,
Valtoni.
Neser besoj do te publikohet nje guide per kodim keshtu qe do kesh cfare te shofesh. Kemi nje surprize te vogel per lexuesit qe nuk duam ta zbulojme direkt keshtu qe me shume do marresh vesh ne ditet ne vazhdim. Keshtu qe edhe zgjidhja e kodimit tend u realizuar mbas nje bisede time me Fadionin. Per punen e Photoshop do te bejme maximumin por mos harroni qe jemi vetem pak veta edhe kerkohet goxha pune. Keshtu qe cdo ndihme qe do na vinte do na ndihmonte..
ckemi,pergezime per tutorialin.:D
Jam i interesuar ne publikimin e tutorialeve te mia te Photoshop te faqja juaj.Para se te filloja se beri tutorialet ne gjuhen standarte shqipe dhe duke ndjekur te gjitha rregullat e faqes,do te doja te isha pak me shume i informuar personalisht per kete ceshtje.Ju lutem me kontaktoni.
Me respekt,Kevin
Pershendetje une jam fillestar ne Photoshop (cung)
dhe nese mundeni te me tregoni ketu se si te vazhdoi
si te hapim ket grup me emrin koka?
nese mundeni te me tregoni hap pas hapi
Besoj se Laurati e ka pasur fjalen per ti grupuar shtresat . Nje grup te ri e krijon duke shtypur CTRL + G. Nese do te gruposh disa shtresa egzistuese, zgjidhi (duke mbajtur shtypur CTRL) dhe me pas shtyp CTRL + G. Grupin mund ta ri-emerosh duke klikuar 2 here mbi te.