Ndërtoni një Dizenjo Web të Pastër

Albforumi

Primus registratum
Ndërtoni një Dizenjo Web të Pastër

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>
<p style="text-align: center;">
shkarko-dizenjon.png
shiko-demon.png
</p>


Për ta bërë më të lehtë bëra ndarjen e dizajnit:</p>
image-9-262x300.jpg
<p class="wp-caption-text">Klikoni tek imazhi për ta zmadhuar atë</p>


Si fillim hapim nje dokument të ri përmes File&gt;New dhe japim permasat sikur në figurën e mëposhtme.</p>


image-11.png
</p>


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(gjerësia) x 1200(gjatësia). Atëherë veprojmë View&gt;New guide 50px vertical, sikur në figurën më poshtë.</p>


imag-0.png
</p>


Kjo është vija jonë e parë ndihmëse. E përsërisim këtë edhe njëherë View&gt;New guide 950px vertical dhe do të shohim dy vija me ngjyrë të kalter te celët (aqua) që do të paraqiten aty ku bëjmë punën.</p>


Tani pa humbur shumë kohë veprojme edhe dy herë të tjera si më lartë View&gt;New guide 450px vertical (kjo eshte vija jonë e tretë ndihmëse) dhe View&gt;New guide 550px vertical (kjo eshte vija jonë e katërt ndihmëse).</p>


Dokumenti me 4 vijat ndihmëse u rregullua dhe tani nuk na mbetet gjë vetëm se të vazhdojmë me dizenjimin.</p>
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ë.</p>


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ë.</p>
image-12-300x15.png
<p class="wp-caption-text">Kliko për ta zmadhuar</p>


Dhe 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 Ballpark me madhësi 48 pt dhe me ngjyrë #f6a328. Bëhuni 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ë).</p>


image-7.png
</p>
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ë.</p>


image-8.png
</p>


Mos harroni që të mos ju perzihen Shtresat (Layers). Të gjithë menunë bëjeni në një 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>
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. Shumë shpejtë marrim Rectangular Marquee Tool me përmasa si në figurë.</p>
image-121-300x15.png
<p class="wp-caption-text">Kliko për ta zmadhuar</p>


Si për fillim e mbushim me ngjyrë #e7e7e7 dhe pastaj po këtij layeri i shtojmë disa efekte në Blending Options.</p>
image-1-300x218.png
<p class="wp-caption-text">Kliko për ta zmadhuar</p>
image-2-300x218.png
<p class="wp-caption-text">Kliko për ta zmadhuar</p>
image-3-300x218.png
<p class="wp-caption-text">Kliko për ta zmadhuar</p>


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 keto permasa:</p>


image-13.png

Per me shume artikuj te ngjashem vizitoni: http://www.feniksi.com/?p=1563
 
Top