January 2012

ယေန့အင္တာနက္ေပၚတြင္ အသံုးျပဳမ်ားေနေသာ ဖန္ျပားပံုသ႑ာန္ Glassy Button မ်ားကိုသင္ေတြ့ဖူးပါလိမ့္မည္။ လက္ေတြ့တြင္ ဖန္၊မွန္၊စတီး စေသာအရာမ်ား၏ ကြဲျပားခ်က္မွာ အေရာင္ႏွင့္ အလင္းအေမွာင္ ကြာျခားခ်က္ေပၚတြင္ အဓိကအေျခခံပါသည္။ ထို့ေၾကာင့္ ရိုးရိုးသာမန္ ဖန္ျပားတစ္ခုျပဳလုပ္ေသာအေျခခံ Idea ေလးကိုသိရွိေစရန္ေျပာျပပါမည္။

၁) New File တစ္ခုယူျပီး New Layer တစ္ခုေခၚထားပါ။ ထို Layer ေပၚတြင္ Tool Box ထဲမွ Custom Shape Tool (U) ကိုေရြးပါ။ ျပီးလွ်င္ Shade ထဲမွ Rounded Square Shape ကိုလိုအပ္ေသာ Color ကိုေရြးျပီးဆြဲပါ။ ပံုမွန္ေလးေထာင့္ကြက္ တစ္ခုကို အသံုးျပဳလွ်င္လည္းရပါသည္။


၂) ထို Layer ၏ Layer Style ကို Inner Glow ယူပါ (Layer Palette တြင္ Layer name ေနာက္မွေနရာလြတ္အား Double click ႏွိပ္လွ်င္ Layer Style Dialog box ေပၚလာပါသည္။ ၄င္း Box မွပံုတြင္ျပထားသည့္အတိုင္း Inner Glow ေနရာကို Click လုပ္ပါ)


ပံုတြင္ျပထားသည့္အတိုင္း Color ကို အမည္းေရာင္ေျပာင္းျပီး Blending Mode ကို Normal သို့ေျပာင္းပါ။ Element Size မွာ ပံ၏ Resolution ကိုလိုက္ျပီးအေျပာင္းအလဲရွိႏိုင္ပါသည္။ ျပီးလွ်င္ပံုအတိုင္းေတြ့ရမည္။


၃) Layer Palette တြင္ထို Layer ေပၚတြင္ Ctrl ကိုဖိျပီး Click လုပ္ပါ။ Layer ၏ Boundary အတိုင္း Marquee Selection တစ္ခုရပါမည္။ ျပီးလွ်င္ (Select>Modify>Contract) ကိုေရြးပါ။ ဒီပံုမွာေတာ့ Selection ကို 25 pixels ျဖင့္ Contract လုပ္ထားပါသည္။ ပံု၏ Resolution ကိုလိုက္ျပီး Pixel အေျပာင္းအလဲရွိႏိုင္ပါသည္။


၄) ျပီးလွ်င္ (Layer>New>Layer) သို့မဟုတ္ (Shift+Ctrl+N) ျဖင့္ New Layer တစ္ခုေခၚပါ။ Foreground Color အား white ေျပာင္းျပီးထို Layer ကို Foreground to Transparent ျဖင့္ Gradient Fill လုပ္ပါ။ ပံုအတိုင္းေတြ႔ရမည္။


၅) ထို Marquee Selection ကို Deselect လုပ္ပါ။ ျပီးလွ်င္ထို Layer ကို Opacity 75% မွာထားျပီးအေပၚဘက္သို့အနည္းငယ္ေရြ႔ပါ။ ပံုအတိုင္း GLassy Button ကိုေတြ႔ရမည္ျဖစ္သည္။


Circular Shape တစ္ခုကိုအထက္မွာေဖာ္ျပခဲ့ေသာ အဆင့္ ၂ မွ ၅ အတိုင္း စနစ္တက်ျပဳလုပ္လွ်င္ေအာက္ပါ Glassy Button ကိုရရွိမည္ ျဖစ္သည္။


ထိုနည္းတူ အျခားေသာ Shape မ်ားကိုလည္း Glassy Object မ်ားအျဖစ္သို့အလြယ္တကူေျပာင္းလဲႏိုင္ပါတယ္။ ထိုသို့ျပဳလုပ္ရာတြင္ ပံု၏ Resolution အျပင္ သက္ဆိုင္ရာ Layer ၏ Size ကိုလိုက္ျပီး အဆင့္ (၂) Inner Glow တြင္ Pixel အေျပာင္းအလဲကို ညွိေပးရန္လိုအပ္ပါသည္။


Text မ်ားကို Glassy object မ်ားအျဖစ္အလြယ္တကူဖန္တီးႏိုင္ပါေသးတယ္။


ဖိုတိုေရွာ့ပညာအတြက္ Cs4ynm ေလ့လာႏိုင္မဲ့ စာအုပ္ေလးကို ဆရာကိုညီေနမင္းဆိုက္ေလးကေန ေလ့လာၿပီးတင္ေပးလိုက္ပါတယ္ေနာ္
ဖိုတိုေရွာ့ပညာေလ့လာနည္းစာအုပ္ေလးပါ ကဲေလ့လာၾကည့္ရေအာင္ေနာ္
ဒီေနရာေလးမွာေဒါင္းယူႏိုင္ပါတယ္ေနာ္

အခုေဖာ္ျပမည့္ နည္းလမ္းေလးကေတာ့ လြယ္လြယ္ကူကူ ေရႊေရာင္စာလံုး ျပဳလုပ္နည္း ေလးပါ။

Photoshop အေျခခံမရွိသူမ်ားပင္ အလြယ္တစ္ကူလုပ္ေဆာင္ႏိုင္ပါတယ္။
အားလံုးအတြက္အသံုး၀င္မယ္ထင္လို႔ ရွာေဖြေတြ႔ရွိထားခ်က္ေလးကို ျပန္လည္မွ်ေ၀ေပးလိုက္ပါတယ္။

အဆင့္ - ၁
ပထမဦးဆံုး File > New...(Ctrl + N) ျဖင့္ စာမ်က္ႏွာအသစ္တစ္ခုယူပါ။
ယခုသင္ခန္းစာအတြက္
Width: 400 pixels
Height: 500 pixels
Resolution: 300 pixels/inch ကိုသံုးထားပါသည္။








အဆင့္ - ၂
ေရႊေရာင္စာလံုးထင္ရွားေစရန္အတြက္ ေအာင္ခံအေရာင္ကို ေမွာင္ေသာအေရာင္သံုးပါ။
ယခုပံုတြင္ အမဲေရာင္ေအာက္ခံသံုးထားပါသည္။ ထို႔ေနာက္ Type Tool (T) ျဖင့္ သင္စိတ္ၾကိဳက္ စာသားရိုက္ေပးပါ။
ထိုေနာက္စာသားအား Bold ျပဳလုပ္ေပးပါ။ စာသားထူမွ ေရႊေရာင္စာလံုးပိုမိုေပၚလြင္မည္ျဖစ္ပါသည္။



အကယ္၍ Font တြင္ Bold မရွိပါက ေအာက္ပါပံုရွိ အနီေရာင္၀ိုင္းျပထားေသာေနရာကို Click ႏွိပ္၍ ေရြးခ်ယ္ေပးပါ။



အဆင့္ - ၃

Window > Character ကိုဖြင့္ပါ။ Color ေနရာမွာ Click ႏွိပ္၍ စာသားအေရာင္ကို ပံုပါအတိုင္း ေျပာင္းေပးပါ။



၁။ ဤ Check Box ကို အမွန္ျခစ္ထားေပးပါက အေပၚက Color Picker ေနရာတြင္ Web Safe Color
    ကိုသာေဖာ္ျပေပးပါလိမ့္မည္။

၂။ Web အတြက္ အသံုးျပဳသည့္ အေရာင္နံပါတ္ပါ။ ၄င္းအေရာင္တန္ဖိုးကိုရိုက္ထည့္ေပးပါ။


အဆင့္ - ၄
Text Layer ေပၚတြင္ Double-Click ႏွိပ္၍ Layer Style Box ကိုဖြင့္ပါ။
သို႔မဟုတ္ Layer > Layer Style > Bevel and Emboss...ကိုေရြးပါ။



Gloss Countour ေနရာတြင္ အထက္ပါပံုအတိုင္း ေရြးခ်ယ္ေပးပါ။

Size ေနရာရွိတန္ဖိုးကို အတိုးအေလ်ာ့လုပ္၍ သင့္စိတ္ႀကိဳက္ေရႊေရာင္စာလံုးပံုစံရသည္အထိ ခ်ိန္ညွိေပးပါ။

အကယ္၍ ေရႊေရာင္ကိုလင္းလက္၍ ျဖာထြက္ေနေသာပံုစံလိုခ်င္ပါက Outer Glow


ကိုသံုးႏိုင္ပါသည္။






အခု PhotoShop မွာ Background Layer ကိုအျဖဴထားျပီး Layer1 ကိုေတာ့ေအာက္မွာျမင္ရတဲ့ ပံုေလးထားလိုက္ပါတယ္။
Layer Palette ကိုသြားျပီး Layer1 ရဲ့ Blending mode ကို Dissolve လို႔ေျပာင္းလိုက္ပါမယ္၊ ပံုကိုအခုေနၾကည့္လိုက္ရင္ေတာ့ ဘာမွာမထူးေသး ပါဘူး၊ ဒါေပမယ့္ အဲဒီ Layer1 ရဲ့ Opacity ကို 50% ေလာက္ထားၾကည့္လိုက္ပါမယ္။
ဒါဆိုရင္ေတာ့ Layer1 ဟာၾကည္ၾကည္လင္လင္ ျမင္ရမွာမဟုတ္ေတာ့ပါဘူး တခ်ိဳ႔ေသာ Pixel ေတြဟာေပ်ာက္သြားျပီး Background Layer ရဲ့ အျဖဴေရာင္ၾကီးကိုေတြ႔ရမွာပါ၊ Layer1 ရဲ့ Opacity နဲေလေလ Background Layer ရဲ့ဧရိယာမ်ားမ်ားေပၚလာေလေလပါပဲ။ အဲဒီ Layer1 ရဲ့ Opacity ကိုကစားၾကည့္ပါ လြယ္လြယ္သေဘာေပါက္မွာပါ။
ဒီအေျခခံေလးကိုပဲ အသံုးျပဳျပီးေတာ့ ကြ်န္ေတာ္တို႔ Image Ready မွာ Animation လုပ္ၾကည့္ၾကမွာပါ။ အခုေပးထားတဲ့ Sample file ကို Download လုပ္ျပီး PhotoShop မွာဖြင့္လိုက္ရေအာင္။ Background နဲ႔ Layer1 ဆိုျပီး Layer ႏွစ္ခုပါတာကိုေတြရမွာပါ။ Layer1 ရဲ့ Blending mode ကို Dissolve ကိုေရြးလိုက္ပါမယ္၊ျပီးရင္ Image Ready ကိုသြားရေအာင္ ( Ctrl + Shift + M )။
Image Ready ရဲ့ Animation Palette မွာ Frame တစ္ခုကေတာ့ Default ရွိေနမွာပါ၊ အခု New Frame ႏွစ္ခုအသစ္ထပ္ယူပါမယ္၊ စုစုေပါင္း ၃ ခုျဖစ္သြားပါျပီ။ Layer1 ရဲ့ Opacity ေတြကိုေတာ့ Frame1 မွာ 0% Frame2 မွာ 100% နဲ႔ Frame3 မွာ 0% အသီးသီးထားလိုက္ပါမယ္။
ဒါဆိုရင္ Tween လုပ္ဖို႔ အဆင္သင့္ျဖစ္ေနပါျပီ၊ Frame2 ကို Select လုပ္ျပီး Animation Palette ေအာက္ေျခက Tweens animation frames ဆိုတဲ့ခလုပ္ေလးကိုႏွိပ္လိုက္ပါမယ္၊ Setting ေတြကေတာ့ ေအာက္ပါအတိုင္းပါပဲ။
ျပီးရင္ေနာက္ဆံုး Frame ျဖစ္တဲ့ Frame8 ကိုလဲ ဒီ Setting ေတြအတိုင္းပဲ Tween လုပ္ပါဦးမယ္၊ ေနာက္ထပ္လုပ္စရာတစ္ခုကေတာ့ Frame duration ပါပဲ။ Frame1 နဲ႔ Frame7 ကို 1 sec ထားျပီးက်န္တဲ့ Frame ေတြကိုေတာ့ 0 sec ပဲထားလိုက္ပါ။ ေနာက္ျပီးေတာ့ Frame7 က Layer1 ရဲ့ Blending mode ကို Normal ထားေပးလိုက္ပါမယ္၊ ( ပံုရဲ့ ေဘးနားက Pixel ေလးေတြ ထင္းသြားေအာင္လို႔ပါ)၊ က်န္တဲ့ Frame ေတြကေတာ့မေျပာင္းပါဘူး Dissolve ပါပဲ။ ေနာက္ဆံုးအဆင့္အေနနဲ႔ Optimize လုပ္လိုက္ရင္ ( File>Save Optimized ) ပံုေလးကို ဒီအတိုင္းျမင္ရမွာပါ။
ဒီ Tutorial မွာ Tween ကစားတာက Opacity ကိုကစားထားတာပါ၊ ဒါေပမယ့္ Blending mode မွာ Dissolve ဟာဆိုရင္ Opacity ကိုလိုက္ျပီး တုန္႔ျပန္မႈေပးပါတယ္။ Opacity မ်ားရင္ Layer ရဲ့ Pixel area နဲနဲဟာ ေပ်ာက္သြားျပီး ေအာက္မွာရွိတဲ့ Layer ေတြေပၚလာပါတယ္၊ Layer ရဲ့ Opacity နဲသြားရင္ေတာ့ Pixel ေတြဟာအမ်ားၾကီးေပ်ာက္သြားျပီး ေအာက္မွာရွိတဲ့ Layer ေတြကိုအမ်ားၾကီးျမင္လာရတာပါ။ ဒီ Opacity ကို Tween လုပ္လိုက္ေတာ့ Dissolve Transition တစ္ခုရလာပါေတာ့တယ္။
အခုဆိုရင္ Dissolve ကိုသံုးျပီး ေအာက္ပါပံုေလးကိုလည္း ဘယ္လိုဖန္တီးရမလဲဆိုတာကို သင္သိႏွင့္ေလာက္ပါျပီ။ သင္ကိုယ္တို္င္လည္း Try ၾကည့္ပါဦး။ MMphotoshop မွာ Animation သင္ခန္းစာ အေတာ္မ်ားမ်ားကို ေရးသားျပီးခဲ့ပါျပီ၊ ၾကံဳရင္လည္း ဆက္လက္ ေရးသားပါဦးမယ္၊ အခုဆိုရင္ သင့္ဖန္တီးမႈစြမ္းအား ေတြကို Animation ေတြအျဖစ္ ဒီသင္ခန္းစာေတြကိုသံုးျပီး အေကာင္အထည္ ေဖာ္ႏိုင္ေလာက္ပါျပီ။

ျမန္မာဖိုတိုေရွာ႔ဆိုဒ္မွ ကူယူေဖာ္ျပထာတာပါ

သူငယ္ခ်င္းတုိ့ေရ.....

အလင္းေရာင္စာလုံးေလးလုပ္ၾကည့္ရေအာင္......

အရင္ဆုံး က်ေနာ္တုိ့ New..ဖုိင္တခုဖြင့္လုိက္ပါမယ္ ျပိးရင္ background ကုိအမဲေရာင္

လုပ္လုိက္ပါမယ္ ဒါကုိ သူငယ္ခ်င္းေတာ္ေတာ္မ်ားမ်ားသိျပိးျပိဆုိေတာ့ ပုံနဲတကြမျပေတာ့ဘူးေနာ္

background အမဲေရာင္လုပ္ျပိးျပိ ဆုိရင္..

Filter ထဲက Blur ျပိးေတာ့ Lens Blur ကုိယူတာေနာက္တစ္ခါထက္လုပ္ပါ ဒီတစ္ခါေတာ့ ခုဏက 40 ထားတဲ့ေနရာမွာ 30 ထားလုိက္ပါ လုိခ်င္တဲ့ပုံေလးထြက္လာပါလိပ္မယ္ :)

သိပ္မရွင္းတဲ့ေနရာ ရွိရင္ျပန္ေမးပါေနာ္ လုိအပ္တဲ့ေနရာေလးမ်ားရွိရင္လဲ အၾကံေပးသြားပါအုံးေနာ္.........

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget