High-Detailed Plastic Navigation Bar

ဒီတစ္ခါ သင္ခန္းစာကေတာ့ 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 ပြားၿပီးေတာ့ စာခ်ိန္းလိုက္ရင္ ရပါၿပီ။

Read more »

လိႈင္းတြန္႔ပံု (Ripple Effect) ျပဳလုပ္ျခင္း

အခုတစ္ခါေတာ့ photoshop မွာ လိႈင္းတြန္႔ပံုစံ (Ripple Effect) ေလး စမ္းလုပ္ၾကည့္ၾကရေအာင္

အဆင့္(၁)
Effect သြင္းခ်င္တဲ့ ပံုကို ဖြင့္ပါ။





အဆင့္(၂)
Filter> Distort> ZigZag ကိုသြားပါ။



အဆင့္(၃)
ZigZag ဆိုတဲ့ box ေလးေပၚလာရင္ Amount မွာ 19, Ridges မွာ 16 နဲ႔ Style မွာ Pond Ripples ေရြးပါ။ ZigZag box မွာ ျမင္ေနရတဲ့ ပံုေနရာကေန effect ေပၚခ်င္တဲ့ေနရာကို mouse နဲ႔ drag ဆြဲၿပီးေတာ့ ေရြးခ်ယ္ႏိုင္ပါတယ္။



ၿပီးရင္ OK ကိုႏွိပ္ပါ။

Read more »

ေရထဲမွ ေရာင္ျပန္ပံုရိပ္ ဖန္တီးျခင္း

ေဟာဒီျဖတ္လမ္းနည္းနဲ႔ ဘယ္လို photo မွာမဆို သဘာ၀က်တဲ့ ေရထဲမွ ေရာင္ျပန္ပံုရိပ္ေတြ လြယ္ကူစြာ ေပါင္းထည့္ႏိုင္တယ္။ ဓာတ္ပံုထဲ ေရပါၿပီးသား မဟုတ္တဲ့ ပံုရိပ္ေတြမွာ အေကာင္းဆံု ျဖစ္ေလ့ရွိတယ္။ ရိုးရွင္းတဲ့ filter, displacement map ေတြနဲ႔ လိႈင္းၾကက္ခြပ္ water ripple effect ေတြ ျပဳလုပ္ရမယ္။ Hue/Saturation adjustment layer နဲ႔ color သြင္းပါတယ္။

အဆင့္(၁)
Effect သြင္းခ်င္တဲ့ ဓာတ္ပံုကို ဖြင့္ပါ။ Ctrl+J ႏွိပ္ၿပီး background layer ကိုေကာ္ပီပြားပါ။





အဆင့္(၂)

ဒီရုပ္ပံုရဲ႕ ေအာက္မွာ ေရထဲက ေရာင္ျပန္ပံုရိပ္ ေပါင္းထည့္မွာပါ။ ဒီအတြက္ document ေအာက္ေျခမွာ canvas space အခ်ိဳ႕ ေပါင္းထည့္ရမယ္။ Image>Canvas Size သို႔သြားပါ။ ခုလုပ္ရမွာက မူလပံုရဲ႕ ႏွစ္ဆျမင့္ေအာင္ ေအာက္ဘက္သို႔ ခ်ဲ႕ရမယ္။ Height ေနရာမွာ 100, measurement အကြက္မွာ percent ထားပါ။ Width အကြက္မွာ 0 ပဲထားပါ။ Relative option ကုိ check အမွတ္ေပးထားတာ ေသခ်ာေစရန္ Anchor မွာေတာ့ အေပၚ အလယ္အကြက္မွာ ေပးပါ။

အဆင့္(၃)

ေရာင္ျပန္ပံုရိပ္ reflection ျပဳလုပ္ရမယ္။ Layers palette ၌အေပၚ layer ေရြးၿပီးသား ျဖစ္ပါေစ။ Edit> Transform> Flip Vertical သို႔သြားပါ။

အဆင့္(၄)

V ႏွိပ္ၿပီး Move tool ကုိေခၚ။ ေျပာင္းျပန္လွန္ထားတဲ့ ပံုရိပ္ကို မူလပံုရိပ္ ေအာက္တည့္တည့္ ေရာက္ေအာင္ ေရႊ႕ပါ။ Shift ႏွိပ္ထားရင္ ေအာက္တည့္တည့္ ဆင္းေအာင္ ထိန္းထားေပးမယ္။

အဆင့္(၅)

ေနာက္အဆင့္ေတြကေတာ့ လိႈင္းၾကပ္ခြပ္ water ripple effect လုပ္ဖို႔ပဲ။ Blank layer အသစ္လိုခ်င္တယ္။ အလြယ္ဆံုး အျမန္ဆံုးကေတာ့ Layers palette ေအာက္ေျခက New Layer icon ကုိ ႏွိပ္ဖို႔ပဲ။

အဆင့္(၆)

Layer အလြတ္မွာ အျဖဴေရာင္ ျဖည့္ရမယ္။ D ကိုႏွိပ္။ Ctrl+Backspace ကိုႏွိပ္။

အဆင့္(၇)

Filter> Sketch> Halftone Pattern ကိုေရြးပါ။ ကၽြန္ေတာ္တို႔က လိုင္းစင္းေလးေတြ လုပ္ခ်င္တာပါ။ Pattern Type မွာ Lines ကိုေရြးပါ။ Size ကိုခ်ိန္ညွိျခင္းအားျဖင့္ မ်ဥ္းလိုင္းအေရအတြက္ နည္းနည္းနဲ႔ လိုင္းထူထူယူမလား၊ လုိင္းပါးပါးနဲ႔ ခ်ဥ္းလိုင္းအေရအတြက္ မ်ားမ်ား ယူမလား ေရြးႏိုင္တယ္။ Contrast ကေတာ့ မ်ဥ္းအနားစြန္း ဘယ္ေလာက္မာလဲ၊ ေပ်ာ့လဲ ခ်ိန္ေပးတယ္။

အဆင့္(၈)

အျဖဴနဲ႔ အနက္လုိင္းစင္းေတြကို water ripples မျပဳလုပ္ခင္ ၄င္းတုိ႔အၾကား ေျပေျပျပစ္ျပစ္ ျဖစ္သြားဖို႔ ေခ်ာေမြ႔ေစဖုိ႔ရာ လိုတယ္။ Filter> Blur> Gaussianl Blur သို႔သြားပါ။ Radius slider ကိုဆြဲရင္း လုိင္းအနားစြန္းေတြ ေပ်ာ့သြားေအာင္ မ်က္ျမင္ ခ်ိန္ညွိပါ။ ယခု နမူနာအတြက္ တန္ဖိုးက 4:

အဆင့္(၉)

ဆက္၍ ျပဳလုပ္မယ့္ displacement map အတြက္က ယခု layer ကိုသီးျခား document ျဖစေအာင္ လုပ္ဖို႔လိုတယ္။ Screen ထိပ္စီးက Layer> Duplicate Layer သို႔သြားပါ။ Dialog box ထဲက Destination အကြက္ရဲ႕ Document option မွာ New ကုိေရြးပါ။

အဆင့္(၁၀)
ေပၚလာတဲ့ document အသစ္ကို save လုပ္ၿပီး ပိတ္ခဲ့ရံုပါပဲ။ Document ကို ပိတ္လိုက္တဲ့အခါ save လုပ္လိုသလား။ Save as dialog box နဲ႔ေမးမယ္။ Water-ripples စသည္ျဖင့္ မွတ္မိလြယ္ၿပီး ဆီေလ်ာ္တဲ့ အမည္ေပးကာ မွတ္ရလြယ္တဲ့ ေနရာမွာ save ထားခဲ့ပါ။ .psd ဖိုင္အျဖစ္ပဲ save ပါ။


အဆင့္(၁၁)
အျဖဴနဲ႔ အနက္လိုင္းစင္း layer က ဒီဖုိင္လုပ္ဖို႔ရာ အတြက္သာ ဆိုေတာ့ မလိုေတာ့ဘူး။ ဖ်က္ပစ္လိုက္ရံုပဲ။


အဆင့္(၁၂)

Displacement map ေပါင္းထည့္ျခင္း မျပဳခင္ image layers ႏွစ္ခုကို layer အသစ္တစ္ခုအျဖစ္ ၄င္းတို႔ အေပၚမွာ merge လုပ္ၿပီးသား လိုတယ္။ အေပၚ layer 1 ေရြးထားဆဲ Shift+ Ctrl+ Alt+ E ႏွိပ္ပါ။ ဘာမွ ျဖစ္ပံုမေပၚေပမယ့္ Layers palette ကိုၾကည့္ရင္ layer အသစ္အေပၚမွာ merged လုပ္ၿပီးသား ေတြ႕ရမယ္။

အဆင့္(၁၃)

Layers palette ၌ merged layer အသစ္ ေရြးၿပီးသား ျဖစ္ပါေစ။ Filter> Distort> Displace သို႔သြားပါ။ Dialog box ၌ ripple effect အျပင္းအေပ်ာ့ ဆံုးျဖတ္ရမယ္။ ယခု နမူနာမွာ Horizontal Scale မွာ 4, vertical scale မွာ 0 ထားထားတယ္။ Stretch To Fit နဲ႔ Repeat Edge Pixels ေတြလည္း ေရြးထားတယ္။

OK ကုိႏွိပ္ၿပီး ထြက္လိုက္တဲ့အခါ ဘယ္ဖိုင္ကို displacement map အျဖစ္ သံုးလိုသလဲ photoshop က ေမးလိမ့္မယ္။ အဆင့္(၁၀)မွာ ျပဳလုပ္ခဲ့တဲ့ water-ripples.psd ကုိေရြးေပးလုိက္ပါ။

အဆင့္(၁၄)

ဒီေနရာမွာ ျပႆနာတစ္ခု ရွိတယ္။ Water ripple effect ကပံုရိပ္ တစ္ခုလံုးအေပၚ ေပါင္းထည့္တယ္။ ကၽြန္ေတာ္တို႔က ေအာက္တစ္၀က္ပဲ လိုခ်င္တာ။ Layer mask နဲ႔ လြယ္လြယ္ကူကူ ျပင္လို႔ ရပါတယ္။ ပထမဆံုး Layers palette ရဲ႕ ‘Layer 1’ thumbnail အကြက္အေပၚ Ctrl+Click ႏွိပ္ပါ။ ေျပာင္းျပန္လွန္ထားေသာ document ေအာက္ေျခတစ္၀က္ selection ေရြးၿပီးသား ေပၚလာမယ္။

အခု Merged layer (layer 2)ကို သက္၀င္ေအာင္ ေရြးထားလုိက္ပါ။ ေနာက္ layers palette ေအာက္ေျခက layer Mask icon ကိုကလစ္ႏွိပ္ပါ။ အေပၚပိုင္း တစ္၀က္ေဖ်ာက္ၿပီးသား ျဖစ္သြားမယ္။ ၿပီးခါနီပါၿပီ။ ေရထဲကို color အခ်ိဳ႕ သြင္းမယ္။

အဆင့္(၁၅)

Layer mask ရဲ႕ အနားစြန္းေတြ ေပ်ာ့သြားေစဖို႔ရာ လိုတယ္။ Gaussian Blur filter ကိုသံုးမယ္။ Layer mask အေပၚ သက္ေရာက္ေစလိုတာ ျဖစ္တဲ့အတြက္ layers palette က layer mask thumbnail ကြက္အေပၚ ကလစ္ႏွိပ္ရပါမယ္။ ၄င္းအကြက္ပတ္လည္ အျဖဴေရာင္ hilight box ေပၚလာမယ္။ Filter> Blur> Gaussian Blur သို႔သြားပါ။ Radius တန္ဖိုး ယခင္အတုိင္းပဲ ထားၿပီး OK ကုိကလစ္ႏွိပ္ပါ။

အဆင့္(၁၆)

ေရမွာ အျပာေရာင္ သန္းခ်င္တယ္။ Pro အဆင့္ Adjustment layer သံုးမယ္။ Alt ႏွိပ္ထားရင္း Layers palette ေအာက္ေျခက New Adjustment Layer icon ကိုႏွိပ္ပါ။ ၿပီးေတာ့ စာရင္းက Hue/Saturation ကိုေရြးပါ။ Use Previous layer to Create Clipping Mask ကုိလညး္ ေရြးခဲ့ပါ။

Hue/Saturation dialog box မွာေတာ့ ညာဘက္ ေအာက္ေျခေထာင့္က colorize ကို ေရြးပါ။ Hue Slider မွာ လိုခ်င္တဲ့ တန္ဖိုး ေရြးရတယ္။ ယခု နမူနာအတြက္ တန္ဖိုး 218.

အဆင့္(၁၇)
ေရျပင္သို႔ ေပါင္းထည့္ေပးလုိက္တဲ့ color ျပင္းအား ေလွ်ာ့ဖို႔ရာ Opacity တန္ဖိုးခ်ပါ။ ယခု နမူနာအတြက္ 25%.

အျခားပံုေတြမွာ variation လုပ္စရာဆိုလို႔ ထက္ေအာက္ symmetric မျဖစ္တာ၊ ေရာင္ျပန္ဟပ္တဲ့ လုိင္းအနားစြန္း တစ္ေျဖာင့္တည္း မရွိတာေတြ ရွိႏိုင္တယ္။ သိၿပီး Photoshop tricks မ်ားနဲ႔ ဥာဏ္ကစားၿပီး စမ္းၾကည့္ႏုိင္ပါတယ္။ ထိုအခ်က္ေတြက လြဲၿပီး က်န္တာေတြကို အထက္က နည္းအတုိင္း ျပဳလုပ္ခဲ့တဲ့ ေနာက္ထပ္ ပံုတစ္ပံုကို ျပထားေပးပါတယ္။

Ref: computer journal

Read more »