2:27 AM
strangemaskman
ဒီတစ္ခါ သင္ခန္းစာကေတာ့ website အတြက္ plastic navigation bar ေလးတစ္ခု ျပဳလုပ္ျခင္းပါ။
အဆင့္(၁)
ပထမဦးဆံုး ကၽြန္ေတာ္တို႔ navigation bar အတြက္ background အရင္ စလုပ္ပါမယ္။ photoshop မွာ 800x259px နဲ႔ background color ကို #8caab8 ေရြးၿပီး new document တစ္ခုယူပါ။ ၿပီးရင္ foreground color ကို #e1e8eb ထားပါ။ layer အသစ္ေခၚၿပီးေတာ့ gradient tool (G) ကိုေရြးပါ။ ၿပီးရင္ Gradient Editor ေခၚၿပီး Presets ထဲက Foreground to Transparent ကိုေရြးပါ။ ေရြးၿပီးရင္ canvas ရဲ႕ ထိပ္ကေန ေအာက္ကို gradient tool နဲ႔ ဆြဲေပးပါ။
အဆင့္(၂)
ကဲၿပီးရင္ navigation menu အတြက္ foundation ေလး လုပ္လိုက္ရေအာင္။ foreground color (#7fa1b3) ေရြးပါ။ ၿပီးရင္ rectangle tool မွာ rounded rectangle tool ကိုေရြးပါ။ ၿပီးရင္ width နဲ႔ height ကို 763x80px ေပးၿပီး canvas ရဲ႕ အလယ္မွာဆြဲပါ။ အဲဒီ layer ကို Shape လို႔ နာမည္ေပးပါ။ ၿပီးရင္ layer ကို double click ႏွိပ္ၿပီး inner shadow ထည့္ပါ။
အဆင့္(၃)
ေနာက္ layer အသစ္တစ္ခု ထပ္ယူၿပီးေတာ့ Shape layer ရဲ႕ ေအာက္ကိုေရြ႕ပါ။ အဲဒီ new layer မွာ active ျဖစ္ေနတုန္း Shape layer ရဲ႕ thumbnail အကြက္ေလးမွာ Ctrl+Click ႏွိပ္ပါ။ selection ေပၚလာရင္ color ျဖည့္ပါ။ color ကေတာ့ #86a6b5 ပါ။ ၿပီးရင္ Deselect (Ctrl+D) ႏွိပ္ပါ။ အဲဒီ layer ကို Filter>Blur ထဲက Gaussian Blur (1.8px) နဲ႔ Motion Blur (90deg,41px) ေပးပါမယ္။ Gaussian Blur (1.8px) ကို တစ္ႀကိမ္ထက္ ပိုေပးပါ။ ၿပီးရင္ opacity ကို 85% ထားပါ။
အဆင့္(၄)
New layer ေခၚပါ။ ၿပီးရင္ new layer active ျဖစ္ေနတုန္းမွာ Shape Layer ရဲ႕ thumb icon ေလးကို Ctrl+Click ႏွိပ္ပါ။ selection ေပၚလာရင္ color(#678a9f) ျဖည့္ပါ။ ၿပီးရင္ selection ျဖဳတ္ၿပီး Gaussian Blur (4.5px) ေပးပါ။
အဆင့္(၅)
ကဲ ေအာက္ေျခဘက္မွာ shade ေလးေတြ ထပ္ထည့္ရေအာင္။ New Layer ေခၚပါ။ New Layer active ျဖစ္ေနတုန္းမွာ Shape Layer ကို Ctrl+Click ႏွွိပ္ပါ။ Selection ေပၚလာရင္ M ကိုႏွိပ္ၿပီး down arrow နဲ႔ selection ကို ေအာက္ဘက္ကို 10px ေလာက္ ေရြ႕ပါ။ ၿပီးရင္ foreground color ကို #6d838f ထားပါ။ ၿပီးရင္ gradient tool (G) ကိုေရြးပါ။ ၿပီးရင္ Gradient Editor ေခၚၿပီး Presets ထဲက Foreground to Transparent ကိုေရြးပါ။ ၿပီးရင္ ေအာက္ကပံုမွာ ျမွားျပထားတဲ့အတုိင္း ပထမတစ္ခါ canvas ေအာက္ကေန selection အလယ္အထိဆြဲမယ္။ ဒုတိယနဲ႔ တတိယက ေဘးဘက္မွာ ျမွားျပထားတဲ့ အတုိင္း selection ရဲ႕ ဘယ္ဘက္နဲ႔ ညာဘက္ကို လိုက္ဆြဲပါ။ သတိထားရဖုိ႔က canvas ရဲ႕ေအာက္ေျခကေန selection အရဲ႕ အလယ္ေလာက္ အထိပဲ gradient ကိုဆြဲပါ။
အဆင့္(၆)
Deselect လုပ္ၿပီး Filter>Blur>Gaussian Blur (3.6px) ေပးပါ။
အဆင့္(၇)
အခု အေပၚကေနၿပီး inner glow ထည့္ပါမယ္။ new layer ေခၚပါ။ ၿပီးရင္ အဲဒီ Layer ကိုအေပၚဆံုးကို ေရႊ႕ပါ။ အဲဒီ new layer active ျဖစ္ေနတုန္းမွာပဲ Shape Layer ရဲ႕ thumb icon ေလးကို Ctrl+Click ႏွိပ္ပါ။ selection ေပၚလာရင္ Marquee Tool (M) ကိုေရြးၿပီး 1px ေလာက္ ေအာက္ကို ေရြ႕ေပးပါ။ ၿပီးရင္ foreground color ကို #92c2da ေျပာင္းၿပီး selection ရဲ႕ အေပၚဘက္ 10px ေလာက္ကေန selection ရဲ႕ေအာက္ဘက္ 10px ေလာက္အထိ gradient tool (G) နဲ႔ ဆြဲေပးပါ။
အဆင့္(၈)
ၿပီးရင္ အလင္းေရာင္ အစင္းေလးေတြကို menu foundation ရဲ႕ အေပၚမွာ ထည့္မယ္။ New Layer ေခၚပါ။ Shape Layer ရဲ႕ thumb icon ကို Ctrl+Click ႏွိပ္ပါ။ selection ကို 40px ေလာက္ အေပၚကို ေရြ႕ေပးပါ။ ၿပီးရင္ Shape layer ရဲ႕ thumb icon ေပၚကို Ctrl+Alt+Shift+Click ႏွိပ္ေပးပါ။ foreground color ကို #bcd2db ေျပာင္းၿပီး gradient tool (G) ကိုေရြးပါ။ ၿပီးရင္ Gradient Editor ေခၚၿပီး Presets ထဲက Foreground to Transparent ကိုေရြးပါ။ ေရြးၿပီးသြားရင္ menu bar ရဲ႕ ေအာက္ကေန အေပၚကို gradient ဆြဲပါ။ selection ျဖဳတ္ၿပီး Filter>Blur>Gaussian Blur (3.6px) ေပးပါ။
အဆင့္(၉)
Light color ေတြ ထည့္ပါမယ္။ New Layer ေခၚပါ။ foreground color ကို #b8c9d1 ေပးပါ။ brush tool (45px soft brush) ေရြးၿပီး menu bar ရဲ႕ဘယ္ဘက္အစြန္းကေန ညာဖက္အစြန္းနားအထိ အေရာင္ခ်ယ္ပါ။ ၿပီးရင္ Gaussian Blur ကို 4px ေပးၿပီး opacity ကို 50% ထားပါ။
အဆင့္(၁၀)
New Layer ေခၚပါ။ Shape Layer ကို Ctrl+Click ႏွိပ္ပါ။ foreground color ကို #dge7f1 ထားပါ။ 80px soft brush ကိုေရြးၿပီး menu ရဲ႕ အေပၚဘက္မွာ အေရာင္ျခယ္ပါ။ ဘယ္ဘက္ေထာင့္ကို ထူထူေလး ျခယ္ပါ။
အဆင့္(၁၁)
ကၽြန္ေတာ္တို႔ menu ရဲ႕ border ေတြမွာ sparkle ေတြထည့္မယ္။ New Layer ေခၚမယ္။ Shape Layer ရဲ႕ thumb icon ကို Ctrl+Click ႏွိပ္မယ္။ ၿပီးရင္ select>modify>contract ႏွိပ္ၿပီး contract selection မွာ 1px ထားပါ။ ok ႏွိပ္ပါ။ ၿပီးရင္ selection ကို inverse selection ေျပာင္းပါ။ shortcut ကေတာ့ Ctrl+ Alt+ I ပါ။ Shape Layer ကို Ctrl+ Alt+ Shift+ Click ႏွိပ္ပါ။ foreground color ကို #fbfcfd ေပးပါ။ ၿပီးရင္ gradient tool (foreground to transparent) ကိုေရြးၿပီး menu bar ဘယ္ဘက္အေပၚကေန ညာဖက္ေအာက္ေျခအထိ diagonal ဆြဲပါ။ Selection ျဖဳတ္ၿပီး ေအာက္ဘက္နဲ႔ ညာဘက္ကို Layer ကို 1px ေရြ႕ပါ။
ၿပီးရင္ အဆင့္(၁၀)ကအတုိင္းပဲ ညာဖက္ေထာင့္ကို ဆက္လုပ္ပါ။ အဆင့္(၁၁)အတုိင္း ထပ္လုပ္ၿပီး gradient ကို ညာဖက္အေပၚကေန ဘယ္ဘက္ ေအာက္ေျခအထိ ဆြဲေပးပါ။ ၿပီးရင္ selection ျဖဳတ္ၿပီး ေအာက္ဘက္နဲ႔ ဘယ္ဘက္ကို Layer ကို 1px ေရြ႕ပါ။
အဆင့္(၁၂)
New Layer ေခၚပါ။ Shape Layer ရဲ႕ thumb icon ကို Ctrl+Click ႏွိပ္ပါ။ ၿပီးရင္ brush ကို 50px soft ေလာက္ေရြးၿပီးေတာ့ menu bar ရဲ႔ ဘယ္ဘက္နဲ႔ ညာဖက္ ကိုေအာက္ပါပံုအတုိင္း ျခယ္ပါ။
အဆင့္(၁၃)
ဒါဆိုရင္ေတာ့ navigation menu ရဲ႕ foundation ကေတာ့ ၿပီးပါၿပီ။ Link စာသားေတြပဲ ထည့္ဖို႔ က်န္ပါေတာ့တယ္။ About ဆိုတဲ့ စာရိုက္ပါမယ္။ font setting ေတြကိုေတာ့ ေအာက္ကပံုအတုိင္း ေပးပါ။
အဆင့္(၁၄)
US ဆိုတဲ့ စာရုိက္မယ္။ color က #000000။ ၿပီးရင္ ေအာက္ပံုအတိုင္း setting ေပးမယ္။
အဆင့္(၁၅)
ေအာက္ဖက္ကေန COMPANY OVERVIEW ဆိုတဲ့စာ ထပ္ထည့္မယ္။ setting ကေတာ့ ေအာက္က ပံုအတုိင္းေပးမယ္။
အဆင့္(၁၆)
ၿပီးရင္ က်န္တဲ့ “Our Works - Completed Projects”, “Our Clients – Professional Support”, “Mail & Links – Linkage & Address” ဆိုတဲ့ စာသားေတြ အတြက္ကေတာ့ ေရွ႕က စာေတြကို copy ပြားၿပီးေတာ့ စာခ်ိန္းလိုက္ရင္ ရပါၿပီ။
