Kjo guidë është e para e një serie [besoj] interesante që do të përfshijë proçesin e krijimit të një design-i për web nga fillimi deri në produktin përfundimtar. Kam zgjedhur ta nis me replikimin e design-it të Feniksi.com, por kuptohet me disa ndryshime të vogla për të krijuar variacion.
E gjithë çfarë ju duhet për krijimin e dizenjos është një program që besoj secili prej jush e njihni, pra është fjala për Adobe Photoshop (s’ka rëndësi versioni).
Tani ndiqni çdo hap me kujdes në mënyrë që të mësoni sa më tepër nga kjo guidë.
1. Hapim programin Adobe Photoshop dhe krijojmë një skedar të ri, si në foton më poshtë:
Hapi i parë
2. Krijojmë një sfond të lehtë që të përshtatet pastaj me të gjitha ngjyrat. Thjesht duhet të fusni një gradient me ngjyrat që janë në demonstrimin më poshtë:
Zgjedhja e Gradientëve
dhe sfondi ynë do të duket kështu:
Ngjyra Sfondit
3. Pa humbur kohë, vazhdojmë me ndërtimin e një headeri.
a) Së pari zgjedhim Rectangle Tool (U) për krijimin e një hapësire të mbushur. Shihni këtë fotografi për ta gjetur më lehtë:
b) Pastaj krijojmë një hapësirë në pjesën e sipërme të headerit, ku mund të vendosim disa lidhje. Pastaj e ngjyrosim atë duke i dhënë një Gradient të bukur si më poshtë:
Gradientët
Dhe do të duket kështu:
4. Po kështu veprojmë dhe në rastin e tanishëm, duke krijuar një hapësirë të mbushur dhe e ngjyrosim atë me një gradient të errët.
Dhe do të duket kështu:
5. Për krijimin e menu-së, përsëri me anë të Rectangle Tool (U) krijojmë hapësirën aq sa është e madhe gjerësia e dizajnit dhe e ngjyrosim me Gradient si në foton e më poshtme.
Dhe dizajni do marrë këtë pamje:
Kliko tek foto për ta zmadhuar
PS: Kemi bër një dekorim tjetër të menu-së të cilën mund ta merrni për veten tuaj, nga më poshte:
Kliko imazhin për ta zmadhuar
6.Në rast se dëshironi që të paraqitni një portofol tuajin në faqen kryesore, dhe të vendosni 2 apo më shumë foto, mund ta bëni lehtë duke ndjekur hapat më poshtë.
a) Krijojmë një katror (641×242) të mbushur me ngjyrë me anë të Rectangle Tool (U) në sfondin e dizajnit, si në foton më poshtë:
b) Pastaj merrni një demonstrim të ndonjë pune tuajën dhe vendoseni në kutinë që e krijuam ne. Kini parasysh që demonstrimi të jet 6px më i ngushtë dhe 6px më i shkurtër, që të duket më bukur në kufizimin e kutisë. Ja një pamje:
Klikoni figurën për ta zmadhuar
7. Sidebari i faqes tuaj është pjesë shumë e rëndësishme si në estetikë ashtu dhe në përdorim të faqes, ku mund të reklamoni partnerët apo ndonjë shërbim tuajin. Për ta formuar një të tillë, të thjeshtë dhe të bukur, shihni më poshtë:
1) Krijojmë 2 kuti si në hapin e 6-të mirëpo me dimensione më të vogëla. Dhe do të marrë këtë pamje:
Klikoni figurën për ta zmadhuar
2) Pastaj vendosim ikonën. Unë po e vendos një ikonë vetëm si shembull për shpjegim më të lehtë. Pasi të vendosim ikonat shkruajmë edhe një tekst. Dhe shikoni si do të duket tani:
Klikoni figurën për ta zmadhuar
8. Pasi t’i kemi përfunduar të gjitha udhëzimet deri në hapin e 7-të, na ka mbetur vetëm Footeri i cili është pjesa e dizajnit që vendoset në fund. Për të ndërtuar një footer të bukur, me estetikë dhe të përshtatshëm me dizajnin, thjesht ndiqni hapat si më poshtë:
a) Krijojmë përsëri një kuti si në hapin e 6/7 mirëpo me dimensione më të mëdha dhe e vendosim në fund, si në foton më poshtë:
Klikoni figurën për ta zmadhuar
2) Footerin mund ta përdorim për shumë qëllime, qoftë për lidhje të shpejta, informacione rreth faqes, të drejtat e autorit, etj. Këtu do të gjeni vetëm një shembull se si duket. Pasi të vendosim ikonat dhe tekstet aty, se çfarë dhe si ti vendosni, mund të zgjedheni vetë ju.
Dhe do duket kështu:
Klikoni figurën për ta zmadhuar
9. Vendosim dhe logon zyrtare të faqes dhe përfundimisht do të duket kështu:
Punimi përfundimtar
Për ta përmbledhur: Kemi krijuar një dizenjo të thjeshtë tërësisht nga zero duke u bazuar në dizenjon e Feniksi.com. Shpresoj që përmes kësaj guide të keni kuptuar bazat si një dizenjo krijohet dhe informacionet e marra ti përdorni për dizenjo faqesh më komplekse.
Komentet, pyetjet apo sygjerimet janë të mirëpritura dhe do tju përgjigjem sa më shpejt e mundur.
ei kjo o sen i thjesht po e rendesishme vazhdimi me tutjeshem si te konfigurojm me style.css ata kom arrit me bo po puna o si me bo me funksionu kjo si wordprees si me bo me dal postet e kto lidhet e senet tjera ma mer menaj qe me bo 1 theme tamon wordprees duhet shum po ta bojm kshtu me photoshop s hyn pun askujt kjo se edhe po ta paraqesesh si template.html shumica nuk din qe te bejne lkrijim e tabelav div tag ne dreamwever kjo o veq sa me knaq synin vetit pc po tjerve sun ja paraqet…
Pershendetje Shkelqim.
Krijimi i nje design-i ne Photoshop eshte pjese e rendesishme e krijimit te nje website-i dhe s’duhet anashkaluar. Nese ty nuk te intereson, jam i sigurt qe ka shume te tjere qe mund te mesojne nga kjo guide.
Si nje design kthehet ne html & css do shpjegohet hollesisht ne te ardhmen, prandaj kini pak durim.
…Pershendetje Rinor
e shikova kete tuto me kujdes..
besoj qe u ke ndihmuar shume njerzve te cilet jane te interesuar rreth kesaj lemie…
ke shpjeguar ne menyre mjafte te kthjellet…dhe e tera qfare mund te them
eshte suksese…
pressim ..tuto edhe me te miira nga ti
Faleminderit Teutë, per komentin tuaj e veqmas komplimentet ndaj punes sime dhe mua. Motivi per te vazhduar me tutje jeni vete ju, qe i lexoni guidat qe ne shkruajme. Dhe ju premtojme qe shume shpejte do te vijne shume guida te tjera me te avancuara. Por sic themi ne “shkalle –> shkalle” behesh profesionit. E per ate kjo ishte guide shume e thjeshte, mirepo avash avash e do mberrijme deri ne maje.
Respekt, Rinor Spahiu.
Tung Rinor , vertet me pelqen puna jote , kjo guide besoj qe do ti ndihmoj jashte mase te tjeret . Andi
Thjesht nje guid shum shum me vler per ata qe kan per qef dizajnin . Dhe thjesht mund te them ky mesim eshte profesional pasi eshte bere nga nje dizajner shum i mir . Te pergezoj per punen Rinor !
Faleminderit Andi. Shpresoj dhe une te jete ashtu
Dizajni është nje element kyq për krijimin e një websajti nuk mund te thuhet se nuk eshte i nevojshem.
Pershendetje!.
Urime dhe pergezime Rinor per tutorialin.
Ate shiritin e gjelber beje orange se ta vret syrin:P:) ishte vetem saqe te tjap ni sugjerim se krejt prefekt;)
Urime dhe suksese me faqen
Ju faleminderit te gjithve per kohen qe shpenzuat duke shikuar dhe komentuar guiden time. Ndihem vertete krenar.
@Tentim, e bera ashtu sepse portokalli ishte e Feniksit e doja paksa me ndryshe, por sidocofte flm per sugjerim.
Rinor Spahiu
Te lumt Rinor pom pelqen shum guida .
Shum tutorial i mire Rinor , vazhdo keshtu…
Mesim shum i mir shpresoj se do vazhdoni me kshu tutoriale t’mira.
Flm per fjalet Lavdrim
wowowowow, tutoriali i pare qe e shoh ne gjuhen Shqip per Photoshop
Sukses me faqen, dhe vashdo te shkrujsh artikuj. E abonova faqen me RSS.
Faleminderit për fjalët. Së shpejti guida të reja (pas rikthimit tim).
Vertete nje tuto i mire dhe ceshte e rendesishmja ne shqip . Krijimi i faqes me photoshop eshte vertete e rendesishme pasi te jep ide te qarta . Gjithmone kur nis nje projekt duhet ti kesh idete sa me te qarta . Cdo gje e ndare . Presim vertete tuto te tjera te ketij lloji . Personalisht me plq ti bej vete faqet nga fillimi gjer ne fund .