Design

How to Export and Modified SVG in AI and PSD

မဂၤလာပါခင္ဗ်ာ။
ကြၽန္ေတာ္ကေတာ့ Spiceworks Myanmar ကုမၸဏီတြင္ Web Designer အျဖစ္ ဝင္ေရာက္ လုပ္ကိုင္လ်က္ရွိေသာ စိုင္းေအာင္ႏိုင္ဦး ျဖစ္ပါတယ္။ ဒီတစ္ပတ္မွာေတာ့ Allustrator နဲ႔ Photoshop မွာ SVG ကို Export လုပ္ပုံ၊ Modified လုပ္ပုံကို ေဝမွ်ေပးခ်င္ပါတယ္ခင္ဗ်။
ကြၽန္ေတာ္တို႔ SVG ရဲ႕ long term use ကေတာ့ Scalable Vector Graphics ျဖစ္ပါတယ္။ Website တစ္ခုမွာ ေတာ္ေတာ္မ်ားမ်ား အသုံးျပဳၾကတဲ့ အပိုင္းေတြကေတာ့ Website Logo, Icons နဲ႔ တခ်ိဳ႕ Text ေတြမွာျဖစ္ၿပီး Image ေတြကိုလည္း SVG format နဲ႔ သုံးရတဲ့ အေျခအေနလည္း ရွိပါတယ္။
ပထမဆုံးအေနနဲ႔ ကြၽန္ေတာ္ AI သုံးၿပီး Text ကို SVG Export လုပ္ပုံကို မွ်ေဝေပးခ်င္ပါတယ္။

(ပုံ-၁)

(ပုံ-၁) AI ကို ဖြင့္ၿပီး Artboard ေဆာက္ေပးပါ။ စာသား ေရးေပးပါ။

 

(ပုံ-၂)

(ပုံ-၂) စာသားကို Outlines ေျပာင္းေပးပါ။
Outlines ေျပာင္းလဲနည္း – ကိုယ္ေျပာင္းခ်င္တဲ့ စာသားကို layer select မွတ္ေပးပါ။ ၿပီးလွ်င္ Type ထဲက Create Outlines ကို ႏွိပ္ပါ။
Outlines ေျပာင္းရျခင္း အေၾကာင္းရင္းမွာ မိမိ ဖြင့္လိုက္တဲ့ Design File ထဲမွာ Designer က သူသုံးထားတဲ့ Font-family က မိမိ PC ထဲမွာ Installed မလုပ္ရေသးဘူး၊ Font-family ကို Download လုပ္လို႔လည္း မရတဲ့အေျခအေနမ်ိဳးမွာဆိုရင္ Text ကို Outlines ထုတ္ေပးရျခင္း ျဖစ္ပါတယ္။ Outlines မေျပာင္းပဲ Text ကို SVG ထုတ္လွ်င္ Design ထဲက Font ပုံစံအတိုင္း ေပၚမည္မဟုတ္ပါ။

 

(ပုံ-၃)

(ပုံ-၃) Outlines ေျပာင္းၿပီးလွ်င္ ပုံမွာ ျပထားသည့္တဲ့အတိုင္း  စာသားေတြ တစ္လုံးခ်င္းဆီ ထြက္လာပါမယ္။

SVG ထုတ္လို႔ ရပါၿပီ။ Files ထဲက Export Selection ကို ႏွိပ္ပါ။

 

(ပုံ-၄)

(ပုံ-၄) ၿပီးလွ်င္ သက္ဆိုင္ရာ file name ေျပာင္းေပးပါ။

 

 

(ပုံ-၅)

(ပုံ-၅) SVG ေ႐ြးေပးပါ။

 

 

(ပုံ-၆)

(ပုံ-၆) Export Asset ကို ႏွိပ္ပါ။

 

 

(ပုံ-၇)

(ပုံ-၇) SVG ရပါၿပီ။

 

 

(ပုံ-၈)

 

(ပုံ-၈)Browser မွာ Run လို႔ ရပါၿပီ။

 

 

ေနာက္တစ္ခုကေတာ့ SVG ကို Modified ျပဳလုပ္ပုံကို ေဝမွ်ေပးခ်င္ပါတယ္။

(ပုံ-၉)

(ပုံ-၉) ဒီပုံသည္ SVG ကို Modified မလုပ္ရေသးခင္အေျခအေန ျဖစ္ပါတယ္။ အဲ့လို Size အႀကီးႀကီး မေပၚခ်င္ဘူး၊ width ခ်ဳံ႕ခ်င္တယ္ဆိုရင္ ေအာက္မွာ ဆက္ၿပီး ေဖာ္ျပေပးထားပါတယ္။

 

 

(ပုံ-၁၀)

(ပုံ-၁၀) မိမိ ျပင္ခ်င္တဲ့ SVG ကို right-click ေထာက္ၿပီး AI နဲ႔ ဖြင့္ပါ။

 

 

(ပုံ-၁၁)

(ပုံ-၁၁) File ဖြင့္ၿပီးလွ်င္ ပုံမွာ ျပထားသည့္အတိုင္း ေပၚပါမယ္။

 

 

(ပုံ-၁၂)

(ပုံ-၁၂) Layers ကို Select လုပ္ၿပီး မိမိလိုခ်င္တဲ့ size ကို ထည့္ေပးပါ။

 

 

(ပုံ-၁၃)

(ပုံ-၁၃) ၿပီးလွ်င္ File > Export > Export As ကို ႏွိပ္ပါ။

 

 

(ပုံ-၁၄)

(ပုံ-၁၄) ၿပီးလွ်င္ File Name ေျပာင္းေပးပါ။

 

 

(ပုံ-၁၅)

(ပုံ-၁၅) File Name ေျပာင္းၿပီး Export ႏွိပ္ၿပီးလွ်င္ ဒီလို Pop Up ေပၚလာပါမယ္။
Responsive ကို Check မလုပ္ပဲ Ok ကို ႏွိပ္ပါ။

 

 

(ပုံ-၁၆)

(ပုံ-၁၆) SVG ထုတ္ထားတဲ့ File ကို Run ပါ။ ပုံတြင္ျပထားသည့္အတိုင္း ကြၽန္ေတာ္တို႔ သတ္မွတ္ထားတဲ့ Size နဲ႔ ရပါၿပီဗ်။

 

 

ေနာက္ဆုံးအေနနဲ႔ Photoshop သုံးၿပီး SVG ထုတ္ပုံကို ေဝမွ်ေပးခ်င္ပါတယ္။
Photoshop နဲ႔ SVG ထုတ္တာကိုေတာ့ ကြၽန္ေတာ္ Recommand သိပ္မေပးခ်င္ပါဘူး။ ဘာလို႔လဲဆိုေတာ့ Photoshop နဲ႔ ထုတ္လွ်င္ ကြၽန္ေတာ္တို႔ SVG coding ပိုင္းမွာ Error တက္ႏိုင္သလို Browser မွာ Run ရင္လည္း Responsive မျဖစ္ဘဲ ဝါးေနတတ္ပါတယ္။
ဒါေပမယ့္ Photoshop နဲ႔ SVG ထုတ္လို႔ရေၾကာင္း ကြၽန္ေတာ္ အနည္းက်ဥ္း ေဝမွ်ေပးသြားပါမယ္။

(ပုံ-၁၇)

(ပုံ-၁၇) ပထမဦးဆုံး Artboard တစ္ခု ေဆာက္ပါ။

 

 

(ပုံ-၁၈)

(ပုံ-၁၈) ၿပီးလွ်င္ မိမိလိုသလို ပုံနဲ႔ စာေတြ ထည့္ပါ။

 

 

(ပုံ-၁၉)

(ပုံ-၁၉) ပုံတြင္ျပထားသည့္အတိုင္း Artboard ကို ႏွိပ္ပါ။

 

 

(ပုံ-၂၀)

(ပုံ-၂၀) Properties ကို ႏွိပ္ၿပီး Artboard Background Color ကို Transparent ေ႐ြးေပးပါ။

 

 

(ပုံ-၂၁)

(ပုံ-၂၁)Transparent ေ႐ြးၿပီးလွ်င္ ဒီလိုရလာပါမယ္။ SVG ထုတ္လို႔ ရပါၿပီ။

 

 

(ပုံ-၂၂)

(ပုံ-၂၂) SVG ထုတ္ဖို႔ အတြက္ File > Export > Export As… ကို ႏွိပ္ပါ။
ၿပီးလွ်င္ SVG ရပါၿပီ။

 

 

(ပုံ-၂၃)

(ပုံ-၂၃) File ကို Run လွ်င္ ပုံတြင္ျပထားသည့္အတိုင္း ေပၚပါမယ္။

အခ်ိန္ေပးၿပီး ဖတ္ရႈ႕ေပးသည့္အတြက္ ေက်းဇူးတင္ပါတယ္ခင္ဗ်။

 

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *