Posted by reezluv | Posted in tutorial | Posted on 16-10-2009
Sebelum aku gerak ke JB pada Jumaat malam nanti, aku nak kongsikan sesuatu ngan korang iaitu tutorial ringkas bagaimana korang boleh design order button yang cantik untuk sales page korang. Macam mana rupa nanti order button tu korang leh tengok sendiri kat gambar yang telah aku letakkan kat atas tu..
ok jom buat sama-sama ye..
1.Perkara pertama yang mesti dibuat adalah File-New. Iaitu buat satu file baru dan cuba untuk dapatkan setting seperti dibawah.
2.Kemudian, korang mestilah Add New layer dan bersedia untuk melukis tab yang berwarna kuning tu. Pilih Rounded Rectangle Tool (U). Setkan Radius kepada 15px
3.Klik dan drag sahaja untuk melukis pada layer tersebut sehingga korang dapat objek seperti di atas tu.
4.Tiba masa kita buatkan effect pada button tab tersebut. Rujuk rajah dibawah untuk setting effect tersebut.
5. Dah buat? Kalau dah bagus..Untuk mendapatkan perbezaan warna iaitu stripe putih glossy tersebut. Add New Layer dan pilih Rectangular Marquee Tool (M) dan lukiskan satu objek berbentuk rectangle di atas tab tersebut.
6. Pilih warna putih. Alt+Backspace untuk fill colour.
7.Pada layer tab button tersebut, Hold dan Klik pada Shape tersebut. Kemudian Ctrl+Shift+I untuk memotong objek rectangular tadi. Activekan layer rectangular tadi dan tekan Delete.
8.Kurangkan Opacity layer rectangular tadi kepada 24%.
9.Seterusnya adalah masukkan teks pada tab tersebut.Saya memilih hanya dua jenis font bagi tutorial kali ini iaitu bagi teks ‘Berminat?’ saya gunakan font jenis Handwriting. Anda boleh dapatkannya free di Google dan untuk teks Order Sekarang saya gunakan font Helvetica.
10.Pada teks “Berminat?” masukkan warna #403d3d dan untuk “Order Sekarang” pula adalah #095e85.
11.Letakkan layer teks tadi dibawah layer glossy rectangular tadi supaya teks tersebut lebih realistik.
12.Akhir sekali adalah memasukkan icon paypal, visa, mastercard dan juga icon-icon lain jika anda inginkan. Saya dapatkan icon-icon tersebut secara percuma sahaja di The Web Design Blog. Download dengan percuma untuk dapatkan kesemua icon tersebut.
13.Masukkan dan susun seperti di dalam rajah. File-Save As dan pilih sahaja file type yang anda inginkan.
Kalau korang rasa tutorial ni amat best bagi korang, jangan lupa bookmark blog ini dan juga subscribe blog ini dengan klik banner di sidebar blog ini.
Related posts:
good tutorial bro ! thanks!