AbonohuSi të krijojm një webdizajn Grunge në Photoshop
Photoshop eshte zakonisht mjeti me i preferuar kur keni te beni me webdizajn, ku duhet te perdoren efekte te ndryshme, brusha, nje numer i konsideruar i fotografive. Ne kete tutorial ne se bashku do te mesojm se si te bejm nje webdizajn grunge komplet. Ne do te dizajnojm header, sidebar, body fotter dhe style te gjitha te shpjeguara.
Perfundimi:
Para se te fillojm do te ishte mire te shohim se si do te na del rezultati ne fund.
Hapi 1
Gjate kesaj kohe ne pretendojm te krijojm nje faqe te plote me stil grunge duke perdorur Photoshop dhe shume foto te ndryshme. Tash po fillojm me shpjegimin e avancuar. Se pari shkojm dhe krijojm nje dokument te ri 950 x 800 pixels si RGB 72dpi. Trego ruler (vizoret) dhe ndaj zonen ne 4 kufinj qe do ti quajm zonat optimale te arenes se dizajnit. Une po planifikoj qe te mbaj nje layot me gjeresi fikse.
Shko tek Image > Canvas Size per te rritur gjeresin dhe lartesine pak me shume, 1200px nga 1000 px eshte mire, ne kete menyre ne do te kemi mundesi qe te punojm ne nej hapesire me te gjere.
Le te imagjinojm se ky dizajn po punohet per nje wordpress theme, pra duhet te kete nje header, nje navigacion brenda header dhe nje sidebar te drejte. Hidhni një sy në fund të imazhit në vijim. Atëherë plotësoni një sfond me ngjyrë # 7A8173.
Hapi 2
Tash po shkojm te krijojm nje pattern per header qe eshte nje gje shume e thjeshte. Krijo një dokument të ri 50 px nga 300 px dhe tërheq diçka si imazhin më poshtë. Une po perdori nje guide qe te bej formen sa me simetrike te jete e mundur. Pastaj shkoni tek Edit > Define pattern dhe ruani formen si “pattern 1″.
Hapi 3
Ne nje layer te ri ne dosjen tone kryesore te projektimit, vizatoni nje lartesi 300 px duke përdorur Tool Rectangle. Shko tek Filters dhe shtoni nje Pattern Overlay, kerkoni per brandin e patternit te ri dhe aplikojeni ate. Per te bere te duken korrekt ju duhet te klikoni ne butonin Origin. Ndryshoni layerin ne 0% , krijoni nje blank layer mbi layer, dhe bashkoj te dyja ne menyre qe te kemi nje model te gatshem per te shtuar disa efekte ne te.
Hapi 4
Selektoni “Pattern 1″ layer dhe aplikoni ne te disa stile te layerave: Drop Shadow, nje Gradient Overlay, dhe nje Pattern Overlay. Perpiquni te beni diqka te ngjashme si ne foton e meposhtme duke perdorur vlera te njejta.
Hapi 5
Tani po shkojm te shtojm backgroundin e navigacionit. Vizatoni nje trekendesh te fshehur paksa “Pattern 1″ layeri. Apliko tek ky drejtkendesh nje Pattern overlay, nje gradient nga e zeza ne te kuqe dhe nje hije te leht Drop. Perdor fotot e meposhtme si reference. Tash shto nje Layer mask > Hide all (fsheh te gjitha) dhe vizatoni nje te zeze ne te bardhe mbi masken e layerit dhe do te fitoni diqka te ngjashme si ne imazhin e meposhtem.
Hapi 6
Tash vizatoni nje elips (#691E1B) mbi layerin “Pattern 1″ dhe quaje si “Light” dhe apliko nje Gaussian Blur ne te me rreze prej 50 pixelave. Une bera nje udhezues shtese per te bere ne qender te header nje drite. Fshi cdo gje poshte bar navigimit dhe ndrysho tek layeri Blending mode ne Color Dodge.
Hapi 7
Per te perfunduar te layot, ne do te shkojme per te nxjerr ne pah sidebar. Vizato disa udhezues shtese dhe gjithashtu edito udhezuesit shtese qe ekzistojn dhe bej qe te pershtaten me dizajnin aktual. Pastaj vizatoni disa drejtkendesha te kuq (#3D100B) dhe aplikoni keta stila: nje Drop Shadow, nje Color Overlay, dhe nje Pattern Overlay.
Ne kete pike ju duhet te merrni parasysh rrugen qe do te ndiqni kur ti preni per HTML/CSS; kjo eshte arsyeja pse une po perdor hijet Drop me 0 px nga distanca gjate shumices se kohes, dhe vetem horizontal dhe vertikal gradients. Textura ne kete rast ka shume linja horizontale. Duhet qe te jete e lehte qe kjo te convertohet ne nje background te riperseritur brenda shume arenave. Gjithashtu kjo eshte nje mundesi e mire qe te i organizoni layerat tuaj neper foldera dhe ti mbani gjerat e organizuara.
Hapi 8
Tash te fillojm me detalet, une dua qe emri i faqes te vendoset ne nje vend te veqant per kete arsye po e perdori kete etiket te bukur grunge qe gjeta. Natyrisht qe ju duhet ta vendosni etiketen ne maje te larte te projektimit tone. Mundohuni te krijoni diqka si ne imazhin e pare.Tash perdorim Magic Wand tool per te selektuar pak ngjyre kafe perreth rrethit dhe pastaj Command + Shift + I per te inversur selektimin. Rregullo nivelet dhe Hue/Saturation duke perdorur vlerat e treguara me posht.
Hapi 9
Tani duke perdorur Eraser tool dhe nje brushe te parregullt, fshini disa zona te etiketes. Per te shtuar nje efekt te prere ne leter zgjidhni Dodge tool dhe perdorni brusha te njejta.
Hapi 10
Tash shkojm duke shtuar nje hije ne emertimin tone te ardhshem. Per kete dupliko “Label” layer, ndrysho Hue/Saturation > Lightness to -100 dhe aplikoni nje Gaussian Blur me rreze prej 10 pixelave. Tash ndrysho Blending mode te “Label copy” ne Multiply dhe vendos Opacity ne 75%.
Hapi 11
Korigjimi i fundit i label,do të bëhet me ndryshimin e Saturation në
-40 për ta bërë atë më gri.
Hapi 12
Tani shtoni disa imazhe ndihmëse,provoni të gjeni imazhe që kanë të bëjnë me konceptin,
kini parasysh ky është një tutorial rreth teknikës, ne zgjedhëm një imazh të rastësishëm.
Kjo është një pikturë mahnitëse e një treni në tokën Boliviane.
Ekstraktoni formën e trenit në bazë të preferencave tuaja. Pastaj ndryshoni layerin e
“trenit” në më të errët.
Hapi 13
Tani shtoni tekstin, së pari emri i faqes. Shkruaj diqka duke përdorur grunge font;
për titullin përdorni tipin e shkronjave të zeza dhe ndryshoni layer blending mode në
Overlay, pastaj dyfishojeni atë layer dhe ndryshoni Opacity-n e kopjes në 75%.
Për të patur efektin më të vogël, lëvizni layerin e kopjuar një ose dy pixels djathtas ose majtas.
Shtoni më shumë tekst duke përdorur metodën e mëparshme,sikur një slogan apo diqka e
ngjashme. Gjithashtu, do ishte mirë të shtoni linqet e navigacionit.
Hapi 14
Tani shtoni më shumë material. Unë shkarkova disa brusha nga këtu,
duke përdorur këto brusha shtoni disa numra,shtoni këndet.
Vetëm rikujtoni të shtoni layers para “Label” dhe “Label Copy”.
Hapi 15
Tani të fillojmë të shtojmë sektionet e faqes. Së pari, në header nevoitet një
kuti kërkimi. Shtypni etiketën e kërkimit. Pastaj,vizatoni në të kuqe (#6A0400)
drejtëkëndëshin si hapsirë e kërkimit, mandej shtoni efektet si Stroke dhe Pattern.
Hapi 16
Tani të fillojmë të shtojme kontentin e dizajnit tonë. Së pari ne do të krijojmë
një hapsirë e cila do jetë e nevojshme të ketë tekst në të.Vizatoni drejtëkëndëhin
më gri të mbyllët (#0D0F0E) në layerin para sidebar. Unë krijova katër foldera për
ti organizuar gjërat: Një për “Header” që do ishe i nevojshëm për gjithcka,një për
“Sidebar” menjëher pas “Header,” një tjetër për “Content” pas “Header” dhe “Sidebar,”
dhe e fundit për “Footer.”
Mundeni ta shtoni këtë drejtëkendësh në layerin “Content”,gjithashtu ju mundeni të
shtoni shumë foldera nëse keni nevojë brenda këtyre katër folderave.
Sidoëqoftë ju duhet ta rivendosni drejtëkëndëshin në vendin e dëshiruar,
shtoni Drop shadow dhe Stroke effect duke përdorur
valutat më poshtë.
Hapi 17
Shkarkoni disa grunge kënde nga këtu, dhe ngjitni njërin mbi prapavijën gri.
Pastaj, shtoni Overlay effect në skaj me ngjyrën #171612.
Gjithashtu, shtoni një tjetër kënd mbi prapavijën e sidebar,por kjo gjë merr shumë kohë pra
është Opacity 25%.
Hapi 18
Të shtojmë tani tekstin. Mundeni të shtoni cfardo teksti, supozoni që është javascript
seksioni për postimet e fundit, ose për sektionin e postimeve të rastit, diq kësi lloji.
Unë do e përdor grunge për paraqitjen e këndit të navigimit me ngjyrat #4D0D0D dhe Arial
si dhe me ngjyrën 3F3F3F për tekst.
Shtoni efektin drop shadow në titull dhe shtoni edhe po këtë efekt për seksionin e navigimit
që të duken për mrekulli. Kur ju ta konvertoni këtë PSD në HTML + CSS file, ju do keni
neëojë ti konvertoni edhe këto titull-a të imazheve, pra është në rregull nëqoftëse
deshironi të shtoni edhe ndonje gjë.Përfundimisht,përdorni pak komandat për
shtoni tekst layerat në hapsirën e dëshiruar.
Hapi 19
Këndi i rastësishëm i yni duket shumë zbrazët,kështu që le ta përmirësojmë imazhin.
Në këtë rast, unë përdora polaroid shot.Ju mundeni ta shkarkoni piktorën polaroid nga këtu.here.
Ekstraktojeni polaroid, ngjiteni atë në layerin afër prapavijës gri dhe këndit gruder, për
tu dukur më e mbyllët shkoni në “Content” folder, pastaj ndryshoni Hue/Saturation për ta
bërë polaroid-in më të mbyllët.
Përdorni disa mënyra për skajin e Layer ” Label” (hapi 9). Fshini dhe shmangni skajet
e pikturës Polaroid.Finalisht,shtojeni dhe lëvizni duke përdorur mënyrën që bëmë në
hapin 10 të këtij tutoriali.
Hapi 20
Unë kam këtë pikturë të mbyllët kështu që do e shtoj në dizajn.
Shtoni ndonjë imazh në neë layer afër “Polaroid” layer,
selektoni rrethin e zezë të polaroid, dhe jepni komandat+ Shift + I .
Zgjidhni layerin e pikturës dhe fshini të gjitha.Pastaj,ju mund të shtoni më shumë
detaje të grunge, si disa maskime mbi pikturë,siq paraqitet në imazhin më poshtë.
Unë shtova efektin 1px Drop Shadoë.
Hapi 21
Eshte nje moment i mire per te vendosur ikonen e RSS ne sidebar. Vizato nje Rounded Corner Rectangle (#99917E) dhe pastaj apliko keto efekte aty: nje Inner Glow, nje Pattern Overlay, dhe nje Drop Shadow duke u bazuar ne imazhet e meposhtme.
Hapi 22
Tash vendosni ikonen e RSS ne anen e majte te sidebar. Shto paksa tekst si “RSS FEED” bej nje pjese maskimi dhe shkruani numrin e personave qe marrin njoftime nga ju. Mos harroni per momentin jemi duke punuar ne sidebar.
Hapi 23
Eshte koha te shkruajm nje post te ne themen tone. Vetem shkruani nje titull, nje date kur eshte shkruajtur artikullin si dhe emrin e autorit. Gjithashtu shkruani edhe disa fjale ne artikullin.Tipografia eshte me e rendesishmja ne kete hap. Une parapelqej te perdore fontet Serif per tituj dhe per trupin Sans-Serif, kjo vlen vetem per mua 
. Vendosni se cka ndjeni per dizajnin tuaj.
Hapi 24
Per ti dhene me shume hijeshi postit tone ne do ti vendosim edhe nje fotografi, sikurse ne themet qe shkruajn tutoriale por ne kete rast ne po punojm ne nje grunge theme andaj edhe fotografia duhet te jete ne kete stil. Kjo eshte e thjesht vetem duhet shtuar lart dhe posht mbushje dhe pastaj te i perserisim fotografit.
Kjo fotografi do te jete 35mm film. Ekstrato dy vija te vogla nga filmi dhe ndrysho Hue/Saturation duke bazuar ne fotografine e meposhtme. Pastaj duke perdorur nje gome fshirese te parregullt fshini disa arena te jashtme te stripit. Ne fund shto nje hije ne te gjitha stripat me hijezim. Nqs keni perfunduar me film ateher vendosni nga nje fotografi ne secilin film. Une do te vendosi nje nga fotot e mia ne udhtime te ndryshme, dhe ne fund aplikoni nje Stroke Effect (#2F261D) tek ajo fotografi.
Hapi 25
Vizato nje vije te kuqe 2px posht postit dhe vendos ca tekst per komentet, eshte nje ide e mire qe te vendosesh te gjitha postet e ngjashme ne nje folder te quajtur “Post”. Pastaj rritni madhesin e dokumentit per pak, ju mund ta beni kete duke perdorur mjetit Crop. Bejeni kete per aryse qe te shihni se si do te dukej dizajni i juaj nqs do te kishte 3 apo me shume artikuj ne te. Duplikoni grupin “Post” dhe ndryshoni titullin dhe tekstin siq i kemi paraqitur me poshte.
Hapi 26
Per momentin po duket mrekullueshem, tash vendosni titujt ne sidebar. Tash ju mund te krijoni nje folder per secilin.
Hapi 27
Tash shtoni nje list te ikonave. Ju mund te perdorni nje Custom shape. Vendosni nje tekst te thjesht. Une po perdori Georgia si font. Duplikoni ikonat dhe editoni nje per te shfaqur shtetin perkates. Bej te njejten per secilen pjes te sidebar.
Hapi 28
Ne jemi gati ta perfundojm. Tash vendosni disa detale grunge duke vendosur disa grunge brusha, ne krye te tij dhe duke shtuar disa elemnte te tilla. Zgjedh ngjyren e layerit pastaj shko Layer > Layer Mask > Reveal all. Pastaj fsheh disa pjese te daluara duke perdorur nje brushe te zeze.
Hapi 29
Per fund selektoni backgroundin e Sidebar dhe kopjoni stilin e layerit. Vizatoni nje trekendesh ne folderin e quajtur “Footer” dhe pastaj vendosin stilin e layerit mbi te. Tash merreni dhe vendoseni kete imazh mbi background te footer-it.
Rregullo saturation per ta bere ate me pak gri. Gjithashtu ju mund te vendosni hije duke perdorur teknikat e perdorura ne hapin e 10. Vendosni ndonje tekst mbi faqen, ndoshta ndonje sllogan ose diqka te tille. Gjithashtu vendos ca tekst ne footer, si p.sh linqe te shpejta si dhe shkrimin per te drejtat e rezervuara.
Konkluzion
Webdizajni nuk eshte i leht per tu mesuar, por shpresoj se ky mesim do te ju ndihmoj juve ne ushtrimet tuaja. Tash ju keni psd te ketij webdizajni dhe mund te filloni te merreni edhe me kodimin e tij.
p.s Ky tutorial eshte marre nga nje faqe tjeter dhe perkthyer nga une per ArtiYt. Mund te kete gabime eventuale te leshuara nga une gjate perkthimit (asgje seshte perfekte) por shpresoj se ky mesim do te ju ndihmoj sado pak juve.
Most Commented Posts
