Oglasi  
     




  Prijatelji  
     


 PHOTOSHOP TUTORIJALI

Izrada web layouta


ZA SREDNJI STUPANJ


Logo

1. Prvo će vam trebati logo za site. Dakle, otvorite novi dokument veličine 750x100. Napravite Layer > New > Layer set i nazovite ga "Logo".

Napravite novi layer po imenu "gradient" i ispunite ga bijelom bojom. Odite pod njegove Blending options i unseite sljedeće postavke:



HINT: Kod podešavanja Gradienta "povucite" bijelu boju na tek maleni dio prostora.



2. Napravite novi layer i nazovite ga "scanlines". Odite na Fill > Pattern i izaberite kose crte. Stavite opacity layera na 20%.

3. Napravite novi layer i nazovite ga "little gradient". Sa Rectangular Marque Toolom označite gornji dio površine logoa (tako da iznad njega bude bijela, a ispod plava boja od pozadine) i ispunite ga bijelom bojom. Na blending options primjenite sljedeće postavke:







4. Napravite novi layer i imenujte ga "sign". Uzmite neki tech brush i dodajte neki cool znak u lijevi ugao. Layer smjestite ispod layera "little gradient". Za sada meni je ispalo ovako:



5. Uzmite font Arial, veličinu 12, stavite Strong i izaberite crnu boju. Napišite opis vašeg sitea na "little gradient" crtu.

Tada uzmite font Robo, veličinu 28, stavite Strong i izaberite bijelu boju (opcionalno možete staviti 1px outside black stroke u blending optionsima). Napišite ime vašeg sitea odmah pored "signa".

HINT: Text layeri bi trebali biti uvijek na vrhu!

I banner je gotov!



Ovako bi vam trebao izgledati poredak layer na kraju:




Layout

6. Napravite novi dokument veličine 750x1000. Prenesite Layer set "Header" iz prošlog tutoriala u taj novi dokument i namjestite ga na vrh.

Napravite novi Layer set i ovaj ga put nazovite "Layout". Stavite ga ispod "Header" seta.

7. Napravite novi layer imenom "menu". Napravite selekciju odmah ispod bannera i ispunite ju bijelom bojom. Kod Blending optionsa stavite Gradient Overlay i iste postavke kao i kod layera "little gradient". Također stavite 1px black outside stroke. Uzmite Arial font, veličine 14, stavite Strong i napišite dijelove menija.



8. Napravite novi layer sa imenom "middle spacer". Sa Rectangular Marque Toolom ispod bannera napravite malenu selekciju i ispunite ju sa bijelom bojom. U Blending Optionsima stavite 1px black outside stroke. Nemojte deselektirati!

Napravite novi layer imenom "scanlines" i stavite Fill > Pattern i izaberite kose crte. Layeru opacity stavite na 20%.



9. Napravite novi layer i nazovite ga "left menu". Napravite vodoravnu selekciju ispod menija i ispunite ju nekom svijetlom bojom. Ja sam upotrijebio #6BB1DB. U Blending optionsima stavite 1px black outside stroke.



10. Napravite novi layer i nazovite ga "left menu addon". Opet napravite vodoravnu selekciju, ali ovaj put puno užu i smjestite ju na lijevi kraj. Ispunite ju nekom tamnijom bojom. Ja sam uzeo # 1A73B5. Odite na Edit > Transform > Distort i malo se poigrajte.



11. Napravite novi layer imenom "button". Napravite malenu selekciju kao predložak za vaš gumb. Ispunite ju crnom bojom i unesite sljedeće postavke:



Smjestite gumb gdje vam paše i nekoliko ga puta Duplicateajte te posložite. Stavite text preko gumbova sa fontom Arial, bijele boje, veličine i stavite Strong.

Za sada bi vam ovako trebali biti posloženi layeri:



15. Napravite novi layer imenom "footer". Napravite malenu selekciju na dnu stranice i ispunite ju bijelom bojom.

Ne deselektirajte! Napravite novi layer imenom "scanlines" i tada opet Edit > Fill > Pattern i izaberite kose crte. Također stavite 1px black outside stroke.

Ovdje napišite malenim fontom svoj copyright. Ja sam uzeo font Visitor, veličine 12, crne boje te obavezno None.



16. E sada napravite novi Layer set imenom "Background" kojeg tebate staviti ipod svih ostalih Layer setova. Tada napravite layer u njemu imenom "background" i obojajte ga cijelog bijelom bojom.


Render

17. Napravite novi Layer set imenom "Render" iznad svih ostalih layera. Napravite novi layer u njemu imenom "duck" (ovo ime zamijenite imenom svoga rendera) i stavite neki render na njega. Render smjestite u skroz gornji desni kut. Duplicateajte taj layer i stavite ga iznad origininalnog layera. Stavite mu mode na Overlay i stavite Filter > Blur > Gaussain Blur. Radius neka bude 1.

Layer setovi bi sad trebali biti poredani ovako:




Final

Napokon je gotovo! Na kraju bi trebalo ispasti ovako:
FINALNI LAYOUT



_________________________

Autor ovog tutorijala: M3lkor

Copyright - Tutorijali.Net 2006 - 2012