Computer Graphic ႏွင့္ဆိုင္ေသာ ေဝါဟာရမ်ား (၁)

ဒီပို႔စ္မွာ Web Designer မ်ား ေတြ႕ၾကံဳ ရင္ဆိုင္ရသည့္ Graphic နဲ႔ ဆိုင္တဲ့ ေဝါဟာရမ်ားကို ေျပာျပသြားမွာ ျဖစ္ပါတယ္။ အဘိဓာန္ထဲကလို A to Z စီစဥ္ၿပီး ေျပာျပသြားမွာ မဟုတ္ဘဲ တူရာ ေဝါဟာရေတြကို စုစည္း ေျပာျပသြားမွာျဖစ္ပါတယ္။ English Terminology ေတြကို ျမန္မာလို ျပန္ဆိုသည့္အခါ စာမေခ်ာသည္မ်ား ရွိေကာင္းရွိႏိုင္မည္ျဖစ္၍ နမူနာပံုမ်ားႏွင့္ ယွဥ္တြဲေလ့လာၾကဖို႔လည္း အၾကံျပဳလိုပါသည္။

+++++++++++++

Transparency

Transparency ထည့္သြင္းထားေသာပံုမ်ားသည္ ေနာက္ခံ Background ကို ေဖာက္ထြင္း ျမင္ႏိုင္ေလသည္။ နမူနာပံုမ်ားကို ၾကည့္ပါ။

Transparency အသံုးျပဳျခင္းျဖင့္ ေနာက္ခံကို ျမင္ရပံု

+++++++++++++

Opacity

Opacity 100% ရွိေသာ ပံုတစ္ခုသည္ အလင္းမေဖာက္ႏိုင္ေသာ အရာဝတၳဳႏွင့္ အလားသ႑ာန္ တူေလသည္။ Opacity ေလွ်ာ့ခ်ထားေသာ ပံုတစ္ခုသည္ အလင္းေဖာက္ ဝတၳဳကဲ့သို႔ျဖစ္လာမည္ ျဖစ္သည္။ Opacity 0% ေပးလိုက္လွ်င္ မူလပံုသည္ Invisible object တစ္ခုကဲ့သို႔ ေပ်ာက္ဆံုးသြားမည္ ျဖစ္သည္။ ေအာက္တြင္ နမူနာ ၾကည့္ပါ။

Opacity ေလွ်ာ့ခ်ျခင္းျဖင့္ ေနာက္ခံကို ေဖာက္ျမင္ရပံု

Opacity ႏွင့္ Transparency ႏွစ္ခု စလံုးကို အသံုးျပဳထားေသာပံု

+++++++++++++

Alaising

Alaising ဆိုသည္မွာ Bitmap Image မ်ားတြင္ ၾကံဳေတြ႕ရေသာ ျပႆနာ ျဖစ္ေလသည္။ Bitmap Image မ်ားသည္ Resolution ေပၚ အေျခခံရသျဖင့္ Resolution နည္းလွ်င္ျဖစ္ေစ၊ ပံုကို အနီးကပ္ ခ်ဲ႕ၾကည့္သည့္ အခါတြင္ျဖစ္ေစ၊ Font မ်ားကို (ေဖာင့္အေနမွ ႐ုပ္ပံုအျဖစ္သို႔) Rasterize လုပ္သည့္ အခါတြင္ျဖစ္ေစ... မူလမွန္းထားသေလာက္ ညီညာေခ်ာေမြ႕မႈ မရွိဘဲ လိုင္းအထစ္အထစ္မ်ား ျဖစ္ေနျခင္းကို Alaising ဟု ဆိုေလသည္။

Alaising သည္ ေထာင့္မတ္က် ပံုမ်ားတြင္ ျပႆနာ မျဖစ္ေပၚေသာ္လည္း မ်ဥ္းေစာင္းမ်ား မ်ဥ္းေကြးမ်ားအတြက္ ျပႆနာ ရွိေလသည္။ ေအာက္မွ နမူနာပံုမ်ားကို ၾကည့္လွ်င္ Alaising ကို သေဘာေပါက္မည္ ျဖစ္ေလသည္။

ေထာင့္မတ္က် ပံုမ်ားတြင္ Aliaisng ျပႆနာ မျဖစ္ပါ

မ်ဥ္းေစာင္းမ်ားႏွင့္ မ်ဥ္းေကြးမ်ားရွိ Aliasing ျပႆနာ

+++++++++++++

Anti-alaising

အထက္တြင္ သင္ေတြ႕ခဲ့ေသာ ေခ်ာေမြ႕မႈ မရွိေသာ ပံုမ်ားကို ေခ်ာေမြ႕ေစရန္ ဖန္တီးေပးေသာ Graphic Feature တစ္ရပ္ကို Anti-Alaising ဟု ေခၚေလသည္။

Anti-alaising သည္ ပံုကို ေခ်ာေမြ႕ေစသည္

+++++++++++++

Halo Effect

Halo Effect ဆိုသည္မွာ ပံုမ်ားကို Transparent လုပ္ေသာ္လည္း ပံု၏ အနားပတ္လည္တြင္ ေရာင္ျခည္ဝန္း သ႑န္၊ Outline မ်ား က်န္ရစ္ခဲ့ျခင္းကို ဆိုလိုပါသည္။ Halo Effect သည္ 16.7 Million Colors အသံုးျပဳေသာ Jpeg စသည့္ ဖိုင္မ်ားကို 256 Colors သာ အသံုးျပဳေသာ GIF ဖိုင္သို႔ ေျပာင္းၿပီး ေနာက္ခံကို Transparent လုပ္သည့္အခါတြင္ အျဖစ္မ်ားေလသည္။ အဲဒီအခါမွာ အၾကည့္ရဆိုးတဲ့ ပံုေတြကို ေပးပါတယ္။ နမူနာပံုတြင္ ၾကည့္ပါ။

Halo Effect ေၾကာင့္ ျဖစ္လာေသာ GIF ပံုတစ္ခု

+++++++++++++

Halo Effect ကို ေလွ်ာ့ခ်မည္ဆိုလွ်င္

- GIF မ်ားသည္ 256 Colors သာ လက္ခံႏိုင္ေလသျဖင့္ အကယ္၍ သင္၏ ႐ုပ္ပံုကို Transparency ထည့္မည္ ဆိုလွ်င္ မူလပံုကို Photoshop စသည္တို႔တြင္ ဖန္တီးသည့္အခါ... ပံုမ်ား Text မ်ား၏ Anti-alaising Feature ကို ပိတ္ထားရမည္ ျဖစ္သည္။ သို႔မဟုတ္လွ်င္ Halo Effect သက္ေရာက္ႏိုင္ေလသည္။

- တကယ္လို႔ သင္ဟာ Layer ေတြ ခြဲၿပီး ဖန္တီးလို႔ရတဲ့ Photoshop စတဲ့ Software ေတြ အသံုးျပဳမယ္ဆိုရင္ Background ကို Layer တစ္ခုအေနနဲ႔ ထားျခင္းက အေကာင္းဆံုးျဖစ္ပါတယ္။ သင့္ရဲ႕ ပံုကို Transparency လုပ္ခ်င္တယ္ဆိုရင္ ထို Background Layer ကို ပိတ္ထားလိုက္ရင္ Halo Effect ျဖစ္လာဖို႔ နည္းပါလိမ့္မယ္။

- ေနာက္တစ္ခ်က္က Photoshop မွာ ဖိုင္ကို သိမ္းတဲ့အခါ ျဖစ္ပါတယ္။ File > Save for Web and Devices ဆိုတဲ့ေနရာမွာ GIF ဖိုင္ကို သိမ္းတဲ့အခါ Matte Color ကို ေရြးေပးလို႔ ရပါတယ္။ အဲဒီမွာ ေနာက္ခံ အျဖဴအစား တျခားလိုက္ဖက္တဲ့ အေရာင္ေတြကို ေရြးေပးျခင္းကလည္း ေျပလည္ေစပါမယ္။

Photoshop မွာ Matte Color ကို ေျပာင္းၿပီး သိမ္းမယ္ဆိုရင္

Matte Color ေျပာင္းလဲၿပီး Halo Effect ကို ေပ်ာက္ေစျခင္း

အလ်ဥ္းသင့္တဲ့အခါ Web မွာ အသံုးမ်ားတဲ့ ဖိုင္အမ်ိဳးအစားေတြ ျဖစ္တဲ့ GIF, JPG, PNG တို႔ရဲ႕ ကြာျခားပံုနဲ႔ အသံုးျပဳပံုေတြကို ေျပာျပသြားပါမယ္။