U ovom tutorijalu ćete vidjeti jedan primjer izrade tabova za vašu web stranicu. Dok čitate i učite probajte što dublje razumijeti ovaj način izrade jer nije bit u tome da vi naučite kopirati ove tabove iz tutorijala nego da ovu tehniku možete sami upotrijebiti za razne menu-e, navigacije i sl. time kreirajući vlastita djela.

Ovo je završni rezultat tutorijala:



Pa počnimo !

Korak 1

Napravite novi dokument možete većih dimenzija tako da imate prostora za rad. Ovdje je korišteno 600x150 px

Korak 2

Napravite novi layer i nacrtajte tanki pravokutnik kao što je pokazano na slici. Možete koristiti Rectangular marquee tool za selektiranje oblika te Fill tool za ispunjavanje bojom

Korak 3

Da bi zaoblili rubove tog pravokutnika koristit ćemo jednostavan način koji ja osobno često koristim samo u malo kompliciranijoj varijanti. Zoomirajte maksimalno na neki rub pravokutnika.

Ovdje je prikazan gornji lijevi rub pravokutnika. Kričavim bojama sam označio 5 piksela koje treba ukloniti. To je najbolje tako da uzmete gumicu. Stavite je na "Mode:Block" te samostalno obrišete rubove. Time osiguravate točnost.

Ponovite ovaj postupak i za ostala 3 ruba. Ovako bi trebao izgledati pravokutnik sa zaobljenim rubovima nakon što ste to napravili.

Korak 4

Napravite novi layer, na njemu također nacrtajte pravokutnik ali manji i svjetlije boje tj. uvelike boje pozadine koja okružuje crni pravokutnik. Ukoliko imate bijelu boju okolo tog glavnog pravokutnika, ispunite ovaj manji pravokutnik bijelom bojom. Ovo će biti naš aktivni tab.

Korak 5

Sličan postupak zaobljenja rubova kao kod glavnog pravokutnika, samo ovdje skinite 1 piksel. tj glavni rub gore-lijevo i gore-desno.

Korak 6

Zumirajte na tab, te sa Rectangular marquee tool-om obilježite prostor unutar njega ali odmaknite 1 piksel od rubova.

Korak 7

Napravite novi layer. Uzmite Gradient tool te ispunite tu selekciju crnom bojom odozgora.

Korak 8

Smanjite opacity tom layeru na 15%

Korak 9

Vratite normalni zoom. Uzmite Horizontal type tool te napišite neki naziv linka. Ovdje je korišten font Verdana, bold, 10px. Boju nemojte stavljati jakog kontrasta, ublažite je nekom svijetlijom varijantom.

Korak 10

Završni korak je dodavanje inaktivnih tabova. Ovaj korak prepuštam vama na volju jer ovisi o puno faktora. Bit svega je da duplicirate postojeca 3 layera taba (tab background, tab gradient i text) te pomaknete desno. Gradient možete ukloniti kod inaktivnih tabova, ili pak ako je neka varijanta u boji možete mu staviti "Blend Mode:Overlay".



Jednom kad ste zadovoljni inaktivnim tabom, njega također duplicirajte i samo mijenjate tekst po potrebi. Ovo je završni rezultat sa par varijacija boje.