Glossy Effect dan Media Player Style

Assalamulaikum wbt..

em last week aku dh tnjuk bberape step y korag sume perlu wat utk dptkn glossy effect ala2 Windows Vista style. Pada sapo2 yang terlepas tutorial tue leh refer blik kat cini k..Erm kali nie aku nk tnjukkn apa dan cmane cara nye kite nk wat media player style button cam y selalu korang sumer tgk kat Windows Media Player versi Vista punya. Hrap2 pade sesape y nk tw tips+tricks cmane Microsoft programmer design software dorag, meh follow+komen tutorial aku..hehe.



First step, cam bese, kiter bukak Microsoft Expression Blend SP2 n wat new project. Dont forget utk plih WPF application k (not silverlight). At this stage, korag sume akn dpt blank space kaler putih suci..then cari rectangle kat toolbox belah kiri, rite klik n plih Ellipse (utk wat bublatan)..so, lukis bulatan+tekan SHIFT utk dptkan ratio or nisbah y tepat (ngn kate laen, utk elakkan dpt bulatan y lonjong laa)..For now, mksure korag dpt smthing y cmnie k:





Then, g kat property die y kat belah kanan tue, kite ubah kaler die. Plih Gradient mode, then utk bahagian Fill, amik 3 jnis kaler. 1st biru , 2nd amik biru gelap n 3rd amik biru same cm 1st kaler td..Korag sepatut nye akn dpt 1 kaler y kat tengah2 lbih gelap dri 2 kaler y kat tepi2 die. Pastu, kat bahagian Stroke (utk border die), plih gradiant gak tp amik dua kaler jaa. 1 biru cm 1st kaler td n 2nd, wane biru laut+terang. StrokeThickness adjust pada 1 or 2, ikut kesesuaian..Korang mesti peningkn ngn pemilihan kaler2 nie. Coz mission kite skg nie adlah utk wat Windows Media Player nye style, so follow jer la erk..hehe..korag ptt dpt cmnie utk bhgian Fill (sebelah kiri) n Stroke (sebelah kanan):



Next step after dpt sumer kaler2 tue, kite Copy+Paste layer ellipse. Korang akn dpt dua layer Ellipse..Klik kat layer ellipse y belah bawah, kite tukar kaler die kpd kaler len lak..hehe..Utk bahagian Stroke, plih "No Stroke" (tanda palang tue). Untuk bahagian Fill plak, plih mode Gradiant cm td, tp plih Radial gradiant (gambar sebelah kanan). Amik 3 jnis kaler gak cam y aku wat nie.Kaler palig kanan adelah wane biru laut y kite gne td, n warne plig knan juga adalah warne biru gelap td, cume level Aplha diubah kpd 0%. then utk kaleR y tengah2, simply kaler biru laut td cume aku adjust skit level Alpha bg nmpak real..Tambah pening? haha, dun worry..property y korag patut dapat adalah cm nie (gmbar belah kiri):


skang, kite g kat toolbox kat belah kiri tue, amik Brush Transform (or simply press "G"). haa part nie agak best ckit. Main kat arrow die n adjust thap Radial Gradient y korang dh wat td. Adjust laa ikut sesedap rse, but mksure smpai dpt cm gmbar sebelah nie k. Agak2 kalu xclear, double click kat gmbar sebelah utk tgk ngn lebih jelas aku wat cmaner.







After setel ngn Brush Transform tue..kite Copy+paste lagi Ellipse y pertama td (y mula2 kite wat) utk wat die punye glossy effect plak. After dpt layer y ketiga, kite tukar property kaler die kepada warna putih utk dua2 kaler (Radial Gradient). 1 kaler level Alpha tukar pd 0% n 1 kaler lagi tukar pada about 83%. Property korag sepatutnye jd cm gmbar sebelah kiri nie k.

Then rite click kat ellipse tue n convert kepade "Path". Keistimewaan ngn path nie, every element bleh jd dlm bntuk vector. Apekah die vector? Vector nie editting format cm y dlm Adobe Illustrator. Ini memudahkn kite utk edit each "edges" dlm element tue. After convert to path, klik kat "point" y belah bawah n drag upwards, cm y aku ngah wat kat gmbar sebelah knan nie.


erm dh hmpir ciap dh nie..hehe..now, kite lukis 1 segi tiga kat atas layer tue. Cmane nk lukih? haa kite gune "Pen" kat toolbox kat tepi tue. Cara gune die, korag klik jaa kat mane2 dlm bntuk 3 penjuru n Blend akan automatik create 1 segi tiga based on tmpat y korang klok td tue. Snang kn..tue laa die Expression Blend, hik3..so, jd laa cm gambor kat belah kiri nie..
Pas dapat segi tiga tue, adjust ckit mane2 y ptut laa ea. Kaler dia kaa, kasi tuning ckit. Basicalli ape y aku tmbah kat aku nyer ialah rounded corner ckit, tp xnpk sgt pon..hehe. Hasil selepas tmbah segitiga cam gamba sebelah knan nie.


Ok, Tue laa die cara nye cmane nk wat button style Windows Media Player.hehe.. Pekate korang tgk button y aku wat nie ngn button kat Media Player, sama x? haa compare jgn xcompare..compare jgn xcompare...compare jgn xcompare..compare jgn xcompare..compare jgn xcompare..hee

Atas nie Windows Media Player punyer

Nie plak y aku bru design@wat td..amacam..sape tiru sape skang nie..muahahahaha!

erm before ending kn tutorial nie, aku tnjuk kn hasil kerja penuh kreativiti aku y baru ja 5 bulan kenal Microsoft Expression Blend nie. Y kat bawah nie after aku re-edit n tmbah design2 len+backgraound floating style..hehe, selamat mencuba!!!