Blend Tutorial - Vista Glossy Effect

Assalamulaikum wbt..

em k, lame dh nk wat tutorial nie..tp bru skag dpt idea cmane nk stat..hehe..so, pd member aku y dh berjinak2 (xksah laa liar mane pun) ngn programming, aku perkenalkan :

the power of Expression Blend

utk tutorial 1, aku akan dedahkan (correct word i think) cmane nk wat glossy effect utk any application (apps) y akn kite wat. Aper itu glossy effect? FYI, byk tmpat korag leh jmpe effect nie, especially kat OS pling sopan kat dnia, Vista by Microsoft. kat task bar, start menu, sumer button2 die, sumer nyer dorag design ngn glossy effect. n somehow "musangBerapi" pun dh ikut jejak lgkah y same (most of sftware nowadays actualy)..therefore, aku assume design style cmnie sgt popular kat abad 21..



ok.first of all, we need visual studio as a main compiler, n Microsoft Expression Blend SP2.

Bukak Expression Studio, n create new project. oleh kerana tutorial ni bkn utk memperkenalkan ape itu Blend, so i'm not focus on it for now. wat mase ni, ini screenshot y akan korag tgk:


Misi kite skg nie adalah Glossy Effect.Korag leh bsarkan workspace ngn tekan Ctrl+mouse scroll.Then wat 1 rectangle kat tgh2 grid (saiz ikut kehendak nafsu korang). then kite akan dapat cmnie gmbar nie:


thniah kalu dh berjaya dptkan rectangle tue. lepas tue, pg kat property panel sebelah kanan, klik kat "Fill". Utk dptkan glossy effect y superb, aku cdagkan gne fill dri jenis gradient. Pade sesape pnah gne Photoshop, u should familiar with this. Plih a[er2 kaler y korag suke. Tapi utk glossy effect, we exactly need 3 colour. Sedikit panduan, biasenye UI designer akn wat 1st kaler y gelap, 2nd kaler amik y terang n 3rd kaler same ngn 1st kaler td .Stakat nie, property korag sepatut nye cmnie :

ok, nice to c rite?..now, Oleh kerana rectangle tersebut bakal dijadikan button style, aku tmbah kn sdikit curve kat every bucu (edge) rectangle nie. Caranye, klik kat edge rectangle tue sampai korag dapat some sort of bntuk empat segi kecik, then tarik bnde tue inwards smpai jd bntuk curve tue. Keistimewaan rectangle nie, ia adalah 1 element cntrol dlm .NET y mpunyai edge y reflect each other, thats means korag trik 1 bucu, every bucu len akan tertarik same (xsame cam element Border)
.




Next step, pg kat Tools kat belah atas (sebaris ngn File, Edit,View etc) n klik kat "make button". Kat popup y kuar tue, korang leh bg name kat style y korag wat nie. Aku namekan die style_btnBiru. FYI, bleh plih sma ada style nie utk whole application or utk window nie shj (this document). Pilih Define in Application kalu korang nk aplly style y same utk window2 y len (jika ada) or plih This Document kalu style nie hanya utk Window nie shj. Dun wory, kalu xphm, leh bg feedback n aku akn terangkan smampu y mugkin. erm korag ptutnye akn dpt cmni:

Then, pg kat Object & Timeline panel, rite klik kat btn y korag wat td n cri Edit Control Template. Korag akan ke workspace utk edit data template bagi button control y korag wat td.










Pastu, korang rite click kat rectangle (kat object & timeline panel) n wat copy n past. kat rectangle y bru tue, tukar kaler die jd cm y aku tnjuk kat sebelah nie.

Kat sini, wat dua kaler. 1st kaler adalah wane putih n tukar level Alpha kpd 30%. 2nd kaler waner putih gak, tp tukat level Alpha kpd 0%.








em ckit lgi nk abih..hehe..Klik kat main window button kat belah atas tue, cm kat gmbar sebelah nie. then korag akan ke main workspace blik cm mase mula2 td..so..wallaaa!..dh ciap dh..Glossy Effect style from Microsoft craps..nie aku tmbah ckit effect background (sj bg nmpak real..ahaks..)






so, thats all my tutorial. nti aku akn tunjuk kn cmane nk wat button ngan Windows Media Player style lak..so..tunggu k..actually, when 1st time aku wat glossy effect nie, bru aku tw, upe2nye cmne jer microsoft design windows Vista..ek eleeeh!!..xcaye? korag tgk sndiri. sume style nie da blambak dlm Vista..tgk sndiri :

Kat My Computer n every folder y korang bkak

kat stat menu pun ade!! nandatozzz...

n kat task bar korag (kat bwah tue)..he,byk kn..so..gud luck!!