Saturday, December 4, 2010

Tutorial; Tab Menu


Ni la rupa tab menu yang aku wat! Buruk kan contoh aku wat :(


Finally, aku wat tutorial ni! ;) Susah gak nak wat kan.. As requested by Mar & Cute Mummy Fara, aku wat tutorial ni, err tengah wat.. dah abes wat jap lagi? Whateverla. Ni la kesan wat tutorial malam2 buta camni ==" Tak payah bebel lagi la kan. Tengok je step2 dia okay! ;D




Create Design for Tab Menu


Aku guna Adobe Photoshop CS2. Siapa de or nak guna selain dari ni, boleh je. Ni aku just tunjuk contoh je.. macam touching je bunyi, haha


Buka Adobe Photoshop CS2 > File > New



Width: 200pixels (ikut kesesuaian korang)
Height: 80pixels (ikut kesesuaian korang)
Color Mode: RGB Color; 16bit (amek bit yang paling besar)
Background Contents: Transparent (ikut kesesuaian korang)



Terhasil satu layer! :)


Duplicate layer tu supaya kalau salah wat ke senang korang nak edit. Just right click kat “Layer 1” & click “Okay”


1) Click Rounded Rectangle Tool
2) Radius: 30px (Ikut kesesuaian korang – untuk curve)
3) Color: #faf453
4) Click cursor kat tempat korang nak wat rectangle tu & just drag. Dia akan jadi rounded rectangle dengan sendirinya! ;D


Kalau nak resize just tekan ctrl+t. Kalu korang tak selesa dengan radius tu, just g tab history kat tepi & delete mana2 history yang korang nak delete, kira macam undo la.. Guna je tab tu bila mana korang nak undo ;) Bila dah ok, puas hati, dah resize, tekan ctrl+alt+enter untuk kasi gambar korang lawa & tak pecah!


Sekarang masukkan tulisan..
1) Wat new layer
2) Click Horizontal Type Tool
3) Tulis pe yang korang nak, eg; Tutorial

Editla pe yang patut; color, size, font… (semua kat tab atas). Then, ctrl+alt+enter


File > Save for Web > Okay


Ok, siap satu tab menu korang!! Go for the rest of the tab okay!




Letak Tab Menu ke Blog


First korang kena upload dulu tab menu yang korang wat tu kat Photobucket. Then copy HTML kod tab menu korang dalam HTML gadget.. HTML gadget mana nak cari? Mesti korang tau kan.. Takpelah, aku bagitau lagi k.. Dashboard > Design > Page Elements > Add a Gadget > HTML


Bila dah paste, tukar “Edit HTML” kat tepi tu ke “Rich Text”
1) Highlight satu2 tab & linkkan ke page yang korang nak.
2) Create Link ke page yang korang nak tu.
3) Masukkan url page.


Dah siap link kesemua tab menu? Check! Dah save? Check! Ok, you’re done! Congrats! ;D


p.s; Jadi tak korang wat?


Kasi komen sikit k?

Post a Comment
 
back to top Blacy Smiley - Haha Bucktooth