Advertisement
  1. Design & Illustration
  2. Icon Design
Design

Android ရဲ့ သင်္ကေတ တစ်စုံကို Adobe Illustrator မှာ ဘယ်လို ဖန်တီးမလဲ။

by
Difficulty:BeginnerLength:LongLanguages:

Burmese (မြန်မာစာ) translation by Saw Aung Thinn (you can also view the original English article)

Final product image
What You'll Be Creating

ဒီနေ့ သင်ခန်းစာမှာ ကျွနိုပ်တို့ လုပ်နေကျ အစီအစဥ်တွေကို အပြောင်းလဲ အနည်းငယ် လုပ်ပါမယ်။ ရေရှည် လိုအပ်တဲ့ ပရောဂျက် ကို ကိုင်တွယ်ပါမယ်။ ကောင်းပြီ။ သင် ခေါင်းစဥ်ကို ပုံမဖော်ရသေးရင် ရိုးရှင်းတဲ့ သင်္ကေတ ၅ ခုကို ဖန်တီး လိုက်ပါမယ်။ ဒါတွေက သင်ကိုယ်တိုင် ဖန်တီးရမယ့် ဘယ် အနာဂတ် ဖုန်း အက်ပလီကေးရှင်း အတွက် ကိုမဆို Android သင်္ကေတ အဖြစ် ပြောင်းပေးနိုင်ပါတယ်။

လုပ်ဆောင်ချက် အနေနဲ့ ဂျီဩမေတြီ ပုံတွေရဲ့ အခြေခံ ရွေးချယ်မှု တွေကို Align panel၊ နေ့စဥ်သုံး တခြား ကိရိယာ တချို့ နဲ့ ပေါင်းစပ်ပြီး အသုံးပြုပါမယ်။

စလိုက်ကြပါစို့။

GraphicRiver ကိုသွားပြီး ပရောဂျက်ကို အမြဲ ကျယ်ပြန့် နိုင်စေတယ် ဆိုတာ ကို မမေ့ပါနဲ့။ လင့်ခ် ကို နှိပ်ပြီး လှပတဲ့ Android designed icon packs များစွာ ကို သင်တွေ့ရမဲ့ နေရာ တစ်ခု ဖြစ်ပါတယ်။

၁။ Document အသစ်တစ်ခု ဘယ်လို ဖန်တီး မလဲ။

သင့်မှာ Illustrator ရှိပြီးတော့ အဲဒါကို ဖွင့်ထားမယ် လို့ မှန်းဆထားတဲ့ အတွက်ကြောင့် အခု Document အသစ် တစ်ခု (File > New or Control-N) ကို အောက်က ပြင်ဆင်ချက် တွေကို သုံးပြီး တည်ဆောက် ကြရအောင်။

  • Number of Artboards: 1
  • Width: 800 px
  • Height: 600 px
  • Units: Pixels

Advanced tab မှ

  • Color Mode: RGB
  • Raster Effects: Screen (72ppi)
  • Preview Mode: Default
setting up a new document

အရိပ်အမြွက်။ Align New Objects to Pixel Grid ရွေးချယ်မှု ပျောက်နေတယ် ဆိုတာ ကို သင်တို့ သတိပြု မိမှာပါ။ ဒါ ဘာကြောင့်လဲ ဆိုတော့ အခုက ဆော့ဝ် ရဲ့  CC 2017 ဗားရှင်း အသစ်ကို အသုံးပြုထား လို့ပါ။ ဒီမှာ Pixel Grid ရဲ့ အသုံးပြုပုံ နည်းလမ်းတွေကို ကိုင်တွယ်ပေးတဲ့ Illustratorရဲ့ နည်းစနစ်ကို အပြောင်းအလဲ လုပ်ထားပါတယ်။

၂။ စိတ်ကြိုက် Grid တစ်ခု ကို ဘယ်လို တည်ဆောက်မလဲ။

pixel-perfectအလုပ်လုပ်ပုံကို အသုံးပြုပြီး သင်္ကေတ တွေကို ဖန်တီးမှာ ဖြစ်တဲ့ အတွက် ကျွနိုပ်တို့ ဆွဲထားတဲ့ ပုံကို ကောင်းကောင်း ထိန်းချုပ် နိုင်ဖို့ အသေးစိတ် Grid တစ်ခုကို တည်ဆောက်ဖို့ လိုပါလိမ့်မယ်။ ဆော့ဖ်ဝဲ ဗားရှင်း အဟောင်းအတိုင်း လုပ်ဆောင်မယ် လို့ ဆိုလိုတာပါ။

အဆင့် ၁

Edit > Preference > Guides & Grid submenu ကို သွားပြီး အောက်ပါ ပြင်ဆင်ချက်များ ကို ပြုလုပ်ပါ။

  • Gridline every: 1 px
  • Subdivisions: 1
setting up a custom grid

အရိပ်အမြွက်။ how Illustrator's Grid System works မှာ grids အကြောင်း အသေးစိတ် ဖတ်ပြီး လေ့လာနိုင် ပါတယ်။

အဆင့် ၂

စိတ်ကြိုက် Grid ကို တည်ဆောက် ပြီးတဲ့ အခါမှာ ကျွနိုပ်တို့ရဲ့ ပုံကို ကြွရွ နေသလို ဖြစ်အောင် လုပ်ဖို့ လိုအပ်တာက View menu အောက်မှာ ရှိတဲ့ Snap to Grid ရွေးချယ်မှု ကို လုပ်ဆောင်ပါ။ ဒါက သင် Pixel Preview mode ကို ဝင်တဲ့ အခါမှာ Snap to Pixel အဖြစ် ပြောင်းပေးပါလိမ့်မယ်။

အခုမှ “pixel-perfect အလုပ်လုပ်ပုံ ” ကို စစမ်းနေတယ် ဆိုရင် how to create pixel-perfect artwork သင်ခန်းစာ ကိုသွားရောက် ပေးဖို့ အကြံပြု ပါတယ်။ ဒါက သင့်ရဲ့ နည်းပညာ ကျွမ်းကျင်မှု ကို အချိန်များများ လိုဘဲ ပိုကျယ်ပြန့် အောင် ကူညီပါလိမ့်မယ်။

၃။ အလွှာ တွေကို ဘယ်လို တည်ဆောက်မလဲ။

Document အသစ်ကို ဖန်တီး ပြီးတာနဲ့ အလွှာအတွဲ ကို သုံးပြီး ပရောဂျက်ကို ပုံစံချတာက ကောင်းတဲ့ အကြံဉာဏ် တစ်ခု ဖြစ်ပါလိမ့်မယ်။ ဘာကြောင့်လဲဆိုတော့ ဒီနည်းလမ်းမှာ တစ်ချိန်မှာ သင်္ကေတ တစ်ခုကိုပဲ အသားပေးထားတာကြောင့် ပုံမှန် အလုပ်လုပ်ပုံ ကို ထိန်းထားနိုင်ပါတယ်။

အလွှာတွေကို သုံးဖို့ Layers panel ကိုသွားပြီး စုစုပေါင်း အလွှာ ၆ခု ကို ဖန်တီးပါ။ အဲဒါတွေကို အောက်က အတိုင်း နာမည် ပြန်ပေးပါမယ်။

  • အလွှာ ၁။ reference grids
  • အလွှာ ၂။ battery
  • အလွှာ ၃။ settings
  • အလွှာ ၄။ messaging
  • အလွှာ ၅။ alarm
  • အလွှာ ၆။ photos
setting up the layers

၄။ ရည်ညွှန်း အကွက် ကို ဘယ်လို ဆွဲမလဲ။

ရည်ညွှန်းအကွက် ဒါမှမဟုတ် အခြေခံအကွက် ဆိုတာ ရည်ညွှန်း အသုံးပြုမယ့် ပုံတွေအတွက် တိတိကျကျ အနားဘောင်ခတ် ပေးထားတဲ့ အကွက်တွေပါ။ ဒါတွေက သင်္ကေတ တွေဆွဲတဲ့ အခါ အရွယ်အစား ကိုက်ညီမှု ရှိအောင် အသားပေးထားပါတယ်။

ပုံမှန်အနေနဲ့ အကွက်ရဲ့ အရွယ်အစားက သင်္ကေတ ရဲ့ အရွယ်အစား ပါပဲ။ ပြီးတော့ ဒါတွေက ပရောဂျက် အသစ်တစ်ခု စတဲ့အခါ ပထမဆုံး လုပ်ရမယ့် အရာတစ်ခု ဖြစ်သင့်ပါတယ်။ ဘယ်ကြောင့်လဲဆိုတော့ အငယ်ဆုံး အရွယ်အစား ကနေပြီးတော့ စဆွဲဖို့ လိုအပ် လို့ပဲ ဖြစ်ပါတယ်။

အခု Android OS မှာသုံးဖို့ ရည်ရွယ်ချက် နဲ့ သင်္ကေတ တွေကို ဖန်တီးမှာ မို့ သူတို့ရဲ့ အကြံပြု အရွယ်အစားနဲ့ ညွှန်ကြားချက် တွေကို လိုက်နာ ရပါမယ်။ ပြီးရင် ပတ်ပတ်လည် 4 px အထူရှိတဲ့ 96 x 96 px အကွက် တစ်ခုကို တည်ဆောက်ပါ။

အဆင့် ၁

reference grid အလွှာ ကလွဲရင် ကျန်တာအားလုံးကို lock လုပ်ပြီး စတင် လိုက်ပါ။ ပြီးလျှင် Rectangle Tool (M) ကို နှိပ်ပြီး 96 x 96 px လိမ္မော်ရောင် (#F15A24) စတုရန်း ကို ဖန်တီးပါ။ ဒါက သင်္ကေတ တွေရဲ့ အရွယ်အစား ကို ဖော်ပြပါတယ်။

creating the main shape for the reference grid

အဆင့် ၂

ပြီးလျှင် တခြား 88 x 88 px စတုရန်း အသေး (#FFFFFF) တစ်ခု ကို ထည့်ပေါင်းပါ။ ဒါက လက်ရှိဆွဲနေတဲ့ ဧရိယာမှာ ရှိနေပါလိမ့်မယ်။ ဒါကြောင့် ပတ်ပတ်လည် 4 px အထူ ရှိတဲ့ ပုံကို ရလာပါပြီ။

creating the main shape for the active drawing area

အဆင့် ၃

ရည်ညွှန်းအကွက် မှပါတဲ့ စတုရန်း ၂ ခုကို Control-G သုံးပြီး အုပ်စုဖွဲ့ပါ။ ပြီးရင် တစ်ခုနဲ့တစ်ခု 24 px အကွာမှာ ပုံတူ၃ခု ပွားပါ။ သူတို့ကို Artboard ရဲ့ အလယ်မှာ နေရာကျ အောင်လုပ်ထားပါ။

ပြီးတဲ့ အခါမှာ လက်ရှိ အလွှာကို lock လုပ်လိုက်ပြီး နောက်အလွှာ တစ်ခုဆီကို သွားပါ။ အဲ့ဒီ အလွှာမှာ သင်္ကေတပုံ ကို စဆွဲပါမယ်။

creating and positioning all the reference grids

၅။ ဘက်ထရီ သင်္ကေတ ကို ဘယ်လို ဖန်တီးမလဲ။

ဘက်ထရီ သင်္ကေတ ကို ဖန်တီးပြီး ပရောဂျက် ကို စပါမယ်။ ဒီ သင်္ကေတ ကို power saving အက်ပလီကေးရှင်း အတွက် သုံးနိုင်ပါတယ်။ ဒါမှ မဟုတ်ရင် တောင်မှ သူ့ပုံစံက လှတာကြောင့် လက်ရှိ အခြေအနေ ကို ညွှန်ပြတဲ့ နေရာ အတွက်ပါ သုံးနိုင်ပါတယ်။

ဘယ်လိုပဲ ဖြစ်ဖြစ် ညာဘက်အလွှာ ( ဒုတိယ အလွှာမှာ ဖြစ်နေပါမယ် )။ ပြီးရင် ရည်ညွှန်းကွက်မှာ စဆွဲလို့ရအောင် အရင်ဆုံး အကျယ်ချဲ့ထားပါ။

အဆင့် ၁

88 x 88 px ရှိတဲ့ စက်ဝိုင်းပုံ ကို သုံးပြီး သင်္ကေတ ရဲ့ နောက်ခံ ကို ဖန်တီးပြီး စလိုက်ပါ။ #00C853 အရောင်ကို သုံးပါမယ်။ လက်ရှိ ဆွဲနေတဲ့ ဧရိယာ ရဲ့ ဗဟို မှာ နေရာချ ထားပါ။

creating and positioning the main shape for the battery icons background

အရိပ်အမြွက်။ Google မှာ "အရောင်အတွက် ပုံဒီဇိုင်း ညွှန်ကြားချက် " တွေ ထည့်ထားတဲ့ အတွက် အဆင်ပြေတာကြောင့် နောက်ခံအရောင်တွေ ကို အရောင်တန်ဖိုးတွေ ရောပြီး၊ တွဲပြီး သုံးထားပါတယ်။

အဆင့် ၂

24 x 40 px ရှိတဲ့ ထောင့်မှန်စတုဂံ ပုံကို သုံးပြီး ဘက်ထရီရဲ့ အဓိက ကိုယ်ထည် ကို ဖန်တီးပါ။ အဖြူရောင် (#FFFFFF) ကို သုံးပါမယ်။ ပြီးရင် စက်ဝိုင်းရဲ့ အောက်ခြေ အနားကနေ 20 px အကွာ စက်ဝိုင်းကြီး ရဲ့ အလယ်မှာ နေရာချ ထားပါ။

creating and positioning the main shape for the battery icons body

အဆင့် ၃

ဆွဲပြီးတဲ့ ပုံကို Fill နဲ့ Stroke ဖလှယ်(Shift-X) ပြီး ပုံကို အနားသတ် မျဥ်း အဖြစ်ပြောင်းပါ။ ပြီးရင် Stroke panel ထဲမှာ Weight ကို 4 px၊  Corner ကို Round Join အနေနဲ့ သတ်မှတ်ထားပါ။

turning the battery icons body into an outline using the stroke panel

အဆင့် ၄

12 x 4 px ထောင့်မှန်စတုဂံ(#FFFFFF) ဒါမှမဟုတ် 12 px ကျယ်ပြီး 4px အထူ ရှိတဲ့ မျဥ်းဖြတ် (#FFFFFF) ကိုသုံးပြီး ဘက်ထရီ အညွှန်းဘား ကို အရင်ဆုံး ဖန်တီးပါမယ်။ အဲဒါကို ဘက်ထရီ ကိုယ်ထည် ထဲမှာ 4 px ပတ်လည် ချန်ထားပြီး အလယ်မှာ နေရာ ချထားပါမယ်။

creating and positioning the battery icons first state indicator bar

အဆင့် ၅

နောက်ထပ် အညွှန်းဘား နှစ်ခုကို ထပ်ထည့်ပါ။ ဒါတွေကို တစ်ခုကနေ တစ်ခု 4 px အကွာမှာ ဒေါင်လိုက် ဆင့်ထားပါမယ်။ ပြီးရင် သူတို့ကို (Control-G) နဲ့ အုပ်စု ဖွဲ့လိုက်ပါ။

adding the remaining state indicator bar to the battery icon

အဆင့် ၆

ဘက်ထရီ ရဲ့ ထိပ်အဖုံး ကို ထည့်ပြီး သင်္ကေတ ကို အဆုံးသတ်ပါမယ်။ ပိုသေးတဲ့ 8 x 4 px ထောင့်မှန်စတုဂံ (#FFFFFF) ကို သုံးပြီး ဖန်တီး ပါမယ်။ ဒါကို ဘက်ထရီ ကိုယ်ထည် ကနေ 6 px (ကြားကွက်လပ် 4 px + အနားသတ်မျဥ်းရဲ့ အပေါ် တစ်ဝက် 2 px ) အကွာ၊ အလယ်မှာ နေရာချ ထားပါမယ်။

ပြုလုပ်ပြီးသွားတဲ့ အခါ ဘက်ထရီ အစိတ်အပိုင်း ပုံအားလုံး ကို မှတ်ပြီး အုပ်စုဖွဲ့ (Control-G) လုပ်ဖို့ မမေ့ပါနဲ့။ သင်္ကေတ ရဲ့ အစိတ်အပိုင်း အားလုံးကို လုပ်ရင် ပိုကောင်းပါတယ်။

finishing off the battery icon

၆။ ပြင်ဆင်ချက် သင်္ကေတ ကို ဘယ်လို ဖန်တီး မလဲ။

ပထမဆုံး သင်္ကေတ ပုံကို အပြီးသတ် စီစဥ် ပြီးပြီ လို့ ယူဆထားတဲ့ အတွက် အဲဒီ ပုံရဲ့အလွှာ ကို lock လုပ်ပြီး နောက်ထပ်တစ်ခု (ဒါက တတိယ အလွှာ မှာ ဖြစ်နေပါမယ်) ဆီသွားပါ။ ပြီးရင် ပြင်ဆင်ချက် သင်္ကေတ ကို စဆွဲ လိုက်ရအောင်။

အဆင့် ၁

ရှေ့က သင်္ကေတ မှာ ဆွဲခဲ့ သလိုပဲ 88 x 88 px စက်ဝိုင်း ကို သုံးပြီး ပုံရဲ့ နောက်ခံ ကို ဆွဲပြီး စပါမယ်။ #2196F3 အရောင်ကို သုံးပါမယ်။ ပြီးရင် လက်ရှိ ဆွဲနေတဲ့ ဧရိယာရဲ့ အလယ်မှာ နေရာချ ထားပါမယ်။

creating and positioning the main shape for the settings icons background

အဆင့် ၂

4 x 32 px ထောင့်မှန်စတုဂံ ဒါမှမဟုတ် 32 px အမြင့်ရှိပြီး 4 px အထူ ရှိတဲ့ မျဥ်းဖြတ် တစ်ခုကို ဖန်တီးပြီး သင်္ကေတရဲ့ အလယ် ချိန်ညှိဘား ကို စ ဆွဲပါမယ်။ အဖြူရောင် (#FFFFFF) ကိုသုံးပါမယ်။ ပြီးရင် အပေါ်အနား ကနေ 18 px အကွာ၊ စက်ဝိုင်းရဲ့ အလယ်မှာ နေရာချ ထားပါမယ်။

creating and positionign the main shape for the settings icons center slider

အဆင့် ၃

12 x 4 px ထောင့်မှန်စတုဂံ (#FFFFFF) ကို သုံးပြီး ချိန်ညှိဘား အတွက် အတုံးတစ်တုံး ကို ဖန်တီးပါမယ်။ ဒါကို ခုနဆွဲထားတဲ့ ပုံရဲ့ အောက်အနားကနေ 4 px အကွာ၊ အလယ်မှာ နေရာချ ထားပါမယ်။

creating and positioning the main shape for the center sliders state indicator

အဆင့် ၄

4 x 12 px ထောင့်မှန်စတုဂံ (#FFFFFF) ကိုသုံးပြီး ချိန်ညှိဘားရဲ့ အောက် ဘက်ပိုင်း ကို ထပ်ထည့် ပါမယ်။ ဒါကို ချိန်ညှိဘား ရဲ့ အောက် တည့်တည့် မှာ နေရာချ ထားပါမယ်။ ပြီးရင် ပုံ၃ပုံလုံး ကို အတူတူမှတ်ပြီး အုပ်စုဖွဲ့ (Control-G) ပါ။

creating and positioning the main shape for the center sliders lower section

အဆင့် ၅

4 x 12 px ထောင့်မှန်စတုဂံ (#FFFFFF) ကိုသုံးပြီး ဘယ်ဘက် ချိန်ညှိဘား ရဲ့ အပေါ်ဘက် အပိုင်း ကို ဖန်တီးပါ။ အလယ် ချိန်ညှိဘား ရဲ့ ထိပ်နား ကနေ 12 px အကွာမှာ နေရာချ ထားပါမယ်။

creating and positioning the main shape for the left sliders upper section

အဆင့် ၆

12 x 4 px ထောင့်မှန်စတုဂံ (#FFFFFF) ကို ဖန်တီးပါ။ ချိန်ညှိဘား အတွက် အတုံးတစ်တုံးကို ထပ်ဆွဲပါ။ ဒါကို ခုနက ဆွဲခဲ့တဲ့ ပုံရဲ့ အောက်ဘက် 4px အကွာမှာ ထားပါမယ်။

creating and positioning the main shape for the left sliders state indicator

အဆင့် ၇

ဘယ်ဘက် ချိန်ညှိဘား ကို အပြီးသတ်ဖို့ အောက်ဘက်အပိုင်း ကို 4 x 32 px ထောင့်မှန်စတုဂံ (#FFFFFF) ကို သုံးပြီး ဖန်တီး ပါမယ်။ ဒါကို ချိန်ညှိဘား ရဲ့ အောက်ဘက်မှာ ထားပါမယ်။

ပြုလုပ်ပြီး သွားတဲ့အခါမှာ အလယ် ချိန်ညှိဘား ကို လုပ်ခဲ့ သလို ပုံ၃ပုံလုံး ကို မှတ်ပြီးအုပ်စုဖွဲ့ (Control-G) ပေးပါ။

finishing off the settings icons left slider

အဆင့် ၈

ဘယ်ဘက် ချိန်ညှိဘား ကို ပုံတူကူး (Control-C > Control-F) ပြီး စက်ဝိုင်း ရဲ့ ညာဘက်ခြမ်း၊ အလယ် ချိန်ညှိဘား ကနေ 4 px အကွာမှာ နေရာချပြီး သင်္ကေတပုံ တစ်ခုလုံး ကို အဆုံးသတ်လိုက်ပါ။

ပြီးတဲ့ အခါမှာ သင်္ကေတပုံ မှာ ပါတဲ့ အစိတ်အပိုင်းပုံတွေကို မတော်တဆ ကွဲထွက် မသွားအောင် သူတို့တွေကို မှတ်ပြီး အုပ်စုဖွဲ့ (Control-G) ဖို့ မမေ့ပါနဲ့။

finishing off the settings icon

၇။ မက်ဆေ့ချ် သင်္ကေတ ကို ဘယ်လို ဖန်တီး မလဲ။

နောက်ထပ် အလွှာတစ်ခု (စတုတ္ထ အလွှာဖြစ်နေ ပါလိမ့်မယ်) ကို ရွှေ့ပြီးပြီ လို့ ယူဆပါမယ်။ တတိယ ရည်ညွှန်းကွက် ကို အကျယ်ချဲ့ပြီး စလိုက်ကြရအောင်။

အဆင့် ၁

88 x 88 px ရှိတဲ့ စက်ဝိုင်းပုံ ကို သုံးပြီး သင်္ကေတ ရဲ့ နောက်ခံ ကို ဖန်တီးပါ။ #7C4DFF အရောင်ကို သုံးပါမယ်။ ပြီးရင် လက်ရှိ ဆွဲနေတဲ့ ဧရိယာ ရဲ့ ဗဟိုမှာ နေရာချ ထားမယ်။

creating and positioning the main shape for the messaging icons background

အဆင့် ၂

32 x 24 px ထောင့်မှန်စတုဂံ ကို သုံးပြီး ဘယ်ဘက် မက်ဆေ့ချ် အကွက်ရဲ့ အဓိကပုံ ကို ဖန်တီးပါမယ်။ အဖြူရောင် (#FFFFFF) ကို သုံးပါမယ်။ ပြီးရင် အခုလက်ရှိ ဆွဲနေတဲ့ ဧရိယာရဲ့ ဘယ်ဘက်နဲ့ အပေါ်ဘက် ကနေ 20 px အကွာမှာ နေရာချထားပါမယ်။

creating and positioning the main shape for the messaging icons left text box

အဆင့် ၃

ပထမဆုံး Pixel Preview mode (Alt-Control-Y) ကိုဖွင့်ပြီး ခုနက ဖန်တီးခဲ့တဲ့ ပုံကို စပြီး အနေအထား ပြင်ဆင်ပါမယ်။ ပြီးရင် Add Anchor Point Tool ကိုသုံးပြီး ပုံရဲ့ အောက်ခြေ၊ ဘယ်ဘက်ကနေ 10 px အကွာမှာ left click နှိပ်ပြီး အမှတ်တစ်ခု ထပ်ဆွဲပါမယ်။

ပြုလုပ်ပြီး တဲ့ အခါမှာ Alt-Control-Y keyboard shortcut ကို သုံးပြီး Pixel Preview mode ကို ထွက်ဖို့ မမေ့ပါနဲ့။

adding a new anchor point to the bottom edge of the messaging icons left text box

အဆင့် ၄

ထောင့်မှန်စတုဂံပုံ ရဲ့ အောက်ခြေ၊ ဘယ်ဘက် ထောင့်အစွန်းကို Direct Selection Tool (A) နဲ့ မှတ်ယူပါ။ ပြီးရင် Move tool ကိုသုံးပြီး အောက်ဘက် ကို 8 px တွန်းထုတ်ပါ။(right click > Transform > Move > Vertical > 8 px)

adjusting the shape of the messaging icons left text box

အဆင့် ၅

ပုံရဲ့ Fill နဲ့ Stroke ကို ဖလှယ်ပြီး (Shift-X) ပုံကို အနားသတ်မျဥ်း ပုံစံ ပြောင်းပါမယ်။ ပြီးရင် Weight ကို 4px Corner ကို Round Join ပေးထားပါ။

turning the messaging icons left text box into an outline

အဆင့် ၆

10 x 4 px ထောင့်မှန်စတုဂံ ကို ဆွဲပြီး စာတန်းမျဥ်းကြောင်း အတိုကို ထည့်ပါ။ ဒါကို အဖြူရောင်(#FFFFFF) သုံးပါမယ်။ ပြီးရင် ဒါကို မက်ဆေချ့် အကွက်ရဲ့ အတွင်းဘက်၊ အပေါ်ဘက် ဘယ်ဘက်ကနေ 4 px ဆီ အကွာအဝေးရှိတဲ့ နေရာမှာ နေရာချထားပါမယ်။

creating and positioning the first text line onto the messaging icons left text box

အဆင့် ၇

20 x 4 px ထောင့်မှန်စတုဂံ (#FFFFFF) ကိုသုံးပြီး ပိုရှည်တဲ့ စာသား မျဥ်းကြောင်း ကို ထည့်ဆွဲပါ။ ဒါကို ခုနက ဆွဲခဲ့တဲ့ စာသား မျဥ်းကြောင်း ရဲ့ အောက်ဘက် အနားကနေ 4 px အကွာမှာ ထားပါမယ်။

ပြုလုပ်ပြီးတဲ့ အခါမှာ text box ပုံအားလုံးကို မှတ်ပြီး Control-G keyboard shortcut ကို သုံးပြီး အုပ်စုဖွဲ့ပါ။

creating and positioning the second text line onto the messaging icons left text box

အဆင့် ၈

မက်ဆေ့ချ် အကွက်ရဲ့ အနားသတ်မျဥ်း ကို ကော်ပီကူးပါ (Control-C > Control-F)။ ပြီးရင် ဘက်ပြောင်းပါ (right click > Transform > Reflect > Vertical)။ ဒါကို လက်ရှိ ရှိနေတဲ့ စက်ဝိုင်းရဲ့ ညာဘက် နဲ့ အောက်ဘက် အနားကနေ 18 px အကွာ၊ စက်ဝိုင်းရဲ့ ညာဘက်ခြမ်းမှာ နေရာချထားပါ။

creating and positioning the messaging icons second text box

အဆင့် ၉

မက်ဆေ့ချ် အကွက်၂ခုရဲ့ ထပ်နေတဲ့ အပိုင်း (အနီရောင် နဲ့ ပြထားတယ်)  ကို ဖယ်ထုတ်ပြီး သင်္ကေတ ကို အဆုံးသတ် ပါမယ်။ သူတို့ ၂ခုကို 4 px စီ ကွာဟနေအောင် လုပ်ရပါမယ်။ ဒီလို လုပ်ဖို့ ဘယ်ဘက် မက်ဆေ့ချ် အကွက် ရဲ့ အပေါ် နဲ့ ဘယ်ဘက် အနားတွေ ပေါ်မှာ အမှတ်တစ်ခုစီ ထည့်ပြီး တခြားအပိုင်းတွေကို ဖယ်ထုတ်ပါမယ်။

ပြုလုပ်ပြီးတဲ့ အခါမှာ သင်္ကေတ ရဲ့ အစိတ်အပိုင်း ပုံအားလုံး ကို မှတ်ပြီး Control-G keyboard shortcut သုံးပြီး အုပ်စုဖွဲ့ပါ။

finishing off the messaging icon

၈။ အသိပေးစနစ် သင်္ကေတ ကို ဘယ်လို ဖန်တီးမလဲ။

ပုံမှန် လုပ်ရိုးလုပ်စဥ် အတိုင်းပဲ ခုနက အလွှာကို lock လုပ်ပြီး နောက်ထပ် အလွှာ တစ်ခု (ငါးခုမြောက် အလွှာ ဖြစ်နေပါမယ်) ဆီ ဆက်သွားပါ။ ပြီးရင် အသိပေးစနစ် သင်္ကေတ ကို စဆွဲလိုက်ကြရအောင်။

အဆင့် ၁

88 x 88 px ရှိတဲ့ စက်ဝိုင်းပုံ ကို ဖန်တီးပါ။ #FFC107 အရောင်ကို အသုံးပြု ပါမယ်။ လက်ရှိ ဆွဲနေတဲ့ ဧရိယာရဲ့ ဗဟို မှာ နေရာချ ထားပါ။

creating and positioning the main shape for the alarm icons background

အဆင့် ၂

40 x 40 px စက်ဝိုင်းပုံ ကို သုံးပြီး အသိပေးနာရီ ရဲ့ အဓိက ကိုယ်ထည် ကို ဖန်တီးပါ။ အဖြူရောင် (#FFFFFF) ကို အသုံးပြု ပါမယ်။ ပြီးရင် အောက်ခြေ အနားကနေ 20 px အကွာ၊ လက်ရှိ ဆွဲနေတဲ့ ဧရိယာရဲ့ ဗဟိုမှာ နေရာချထားပါ။

creating and positioning the main shape for the alarm icons body

အဆင့် ၃

ခုနက ဆွဲထားတဲ့ ပုံရဲ့ Fill နဲ့ Stroke ကို ဖလှယ်ပြီး အနားသတ်မျဥ်း ပုံစံ အနေအထား ပြောင်းပါမယ်။ Stroke panel ထဲကို နေပြီးတော့ Weight ကို 4 px သတ်မှတ်ပေးပါ။

turning the alarm icons main body into an outline

အဆင့် ၄

Pen Tool (P) ကို ရွေးပါ။ 4 px အနားထူထူ မျဥ်းကို သုံးပြီး နာရီ လက်တံ ကို ဆွဲပါမယ်။ အရောင်ကို အဖြူရောင် (#FFFFFF) ထားပြီး Corner ကို Round join ထားပါမယ်။ မျဥ်းရဲ့ အဆုံးမှတ် တွေက စက်ဝိုင်းကနေ 4 px ကွာနေပါစေ။

drawing in the little hands inside the alarm clocks main body

အဆင့် ၅

အပေါ်နား နည်းနည်းရွှေ့ပြီး 8 x 6 px ထောင့်မှန်စတုဂံ (#FFFFFF) တစ်ခုကို ဖန်တီး ပါမယ်။ ဒါကို စက်ဝိုင်းကြီးရဲ့ အပေါ်ဘက်ပိုင်း အလယ်နေရာမှာ နေရာ ချိန်ညှိထားပါမယ်။ ထပ်နေတဲ့ Stroke ရဲ့ အပေါ်တဝက် နေရာမှာ နေရာချထားပါမယ်။

creating and positioning the main shape for the alarm clocks upper section

အဆင့် ၆

ခုနက ဆွဲထားတဲ့ ပုံရဲ့ အပေါ်ဘက်မှာ 16 x 4 px ထောင့်မှန်စတုဂံ (#FFFFFF) တစ်ခုကို ထပ်ထည့်ပါ။ ပြီးရင် ထောင့်မှန်စတုဂံ ပုံ၂ခုကို မှတ်ပြီး အုပ်စုဖွဲ့ (Control-G) ပါမယ်။

finishing off the alarm clocks top section

အဆင့် ၇

သင်္ကေတ ကို အပြီးသတ်ဖို့ အဖြူရောင် (#FFFFFF) ရှိတဲ့ 4 px မျဥ်းပြတ် တစ်ခုကို သုံးပြီး ကန့်လန့်မျဥ်းပိုင်း နှစ်ခုကို ဆွဲပါ။ နာရီနဲ့ ပက်သတ်တဲ့ ပုံ အပိုင်း အားလုံးကို မှတ်ပြီး အုပ်စုဖွဲ့ (Control-G) ပါ။ ပြီးရင် သင်္ကေတ တစ်ခုလုံးကိုလည်း ဒီနည်း အတိုင်း အုပ်စုဖွဲ့ပါ။

finishing off the alarm clock icon

၉။ ဓာတ်ပုံ သင်္ကေတ ကို ဘယ်လို ဖန်တီးမလဲ။

အခု ခြောက်ခုမြောက် အလွှာ၊ နောက်ဆုံး အလွှာမှာ ရှိနေပါမယ်။ ဓာတ်ပုံ သင်္ကေတကို ဖန်တီးပြီး project ကို အဆုံးသတ်ရအောင်။

အဆင့် ၁

88 x 88 px ရှိတဲ့ စက်ဝိုင်းပုံ (#FF6F00) ကို သုံးပြီး သင်္ကေတရဲ့ နောက်ခံ ပုံကို ဖန်တီးပါ။ ဒါကို လက်ရှိဆွဲနေတဲ့ ဧရိယာ ရဲ့ ဗဟို မှာ နေရာချ ထားပါမယ်။

creating and positioning the main shape for the photos icons background

အဆင့် ၂

36 x 36 px ရှိတဲ့ ထောင့်မှန်စတုဂံ ပုံကို သုံးပြီး ဓာတ်ပုံရဲ့ အဓိက ကိုယ်ထည် ကို ဖန်တီးပါ။ ပုံကို အဖြူရောင် (#FFFFFF) သုံးပါမယ်။ ပြီးရင် အပေါ်အနား ကနေ 20 px အကွာ၊ လက်ရှိ ဆွဲနေတဲ့ ဧရိယာရဲ့ ဗဟိုမှာ နေရာချ ထားပါ။

creating and positioning the main shape for the photos icons body

အဆင့် ၃

ခုနက ဆွဲထားတဲ့ ပုံရဲ့ Fill နဲ့ Stroke ကို ဖလှယ် (Shift-X) ပြီးပုံကို အနားသတ်မျဥ်း ပုံစံ ပြောင်းပါ။ ပြီးရင် Stroke panel ထဲကနေ Weight ကို 4 px ၊သူ့ Corner ကို Round Join သတ်မှတ်ထားပါ။

turning the photos icons main body into an outline

အဆင့် ၄

Pen Tool (P) ကိုသုံးပြီးတော့ 4 px အထူ မျဥ်းပိုင်း (#FFFFFF) ကို သုံးပြီး ရေပြင်ညီ မျဥ်းပိုင်း တစ်ခုကို ဆွဲပါ။ ဒါကို ခုနဆွဲခဲ့တဲ့ ပုံရဲ့ အောက်ခြေ အနားကနေ 4 px အကွာ၊ ပုံရဲ့ အတွင်းဘက်မှာ နေရာချ ထားပါမယ်။

adding the horizontal divider line to the lower body of the photos icon

အဆင့် ၅

4 px အထူ ၊Round Join ဖြစ်တဲ့ မျဥ်းပိုင်း (#FFFFFF) ကိုသုံးပြီး တောင်ပုံ ကို စဆွဲပါမယ်။ တောင်ပုံကို ဆွဲဖို့ ရေပြင်ညီ မျဥ်းပိုင်း ရဲ့ အပေါ်ဘက် 10 px အကွာ၊ ဓာတ်ပုံ ရဲ့ ဘယ်ဘက် အစွန်းကနေ စမှတ် တစ်ခုကို နေရာချပါ။

ပထမ စမှတ်ရဲ့ ရေပြင်ညီ နဲ့ ဒေါင်လိုက် အနေအထားကနေ 10 px အကွာမှာ ဒုတိယ အမှတ်ကို ထည့်ပါ။ သုံးခုမြောက်နဲ့ နောက်ဆုံး တစ်ခုဖြစ်တဲ့ အမှတ်ကို ရေပြင်ညီ မျဥ်းပိုင်းထိ ထိအောင်ဆွဲပါမယ်။ Shift ကီးကို နှိပ်ထားခြင်းဖြင့် ပြီးပြည့်စုံတဲ့ ထောင့်ဖြတ်မျဥ်း ကို ရမှာပါ။

drawing the photos icons first mountain

အဆင့် ၆

4px အထူ မျဥ်းပိုင်း (#FFFFFF) ကိုသုံးပြီး ဒုတိယ တောင်ပုံ တစ်ခုကို ဆွဲပါမယ်။ ပြီးရင် ဓာတ်ပုံမှာ ပါတဲ့ အစိတ်အပိုင်း ပုံ အားလုံးကို မှတ်ပြီး အုပ်စုဖွဲ့ Control-G ပါ။

drawing the photos icons second mountain

အဆင့် ၇

28 x 6 px ရှိတဲ့ ထောင့်မှန်စတုဂံ ပုံကို သုံးပြီး သင်္ကေတရဲ့ အောက်ခြေ ကို ဖန်တီးပါ။ ပုံက အဖြူရောင် (#FFFFFF) ကို သုံးပါမယ်။ ပြီးရင် ဓာတ်ပုံရဲ့ အခြေ ကနေ 4 px အကွာ၊ အလယ်မှာ နေရာချ ထားမယ်။

creating and positioning the main shape for the lower section of the photos icon

အဆင့် ၈

အပေါ်က ဆွဲခဲ့တဲ့ ပုံကို 4 px အထူ၊ Round Join ရှိတဲ့ အနားသတ်မျဥ်း (#FFFFFF) ပုံစံအဖြစ် ပြောင်းပြီး သင်္ကေတ ဆွဲသားချက် ကို အပြီးသတ် ပါမယ်။ ပြီးရင် ပုံရဲ့ အပေါ် အနား အလယ်တည့်တည့် မှာ အမှတ်အသစ် တစ်ခုကို ထပ်ထည့်ပါ။ အပွင့် ပုံစံ ဖြစ်နေအောင် အပေါ်အနား (အနီရောင်နဲ့ ပြထားပါတယ်) ကို ဖယ်ထုတ်ပါမယ်။

ရလာတဲ့ ပုံနဲ့ ဓာတ်ပုံမှာ ပါတဲ့ ပုံအစိတ်အပိုင်း တွေကို မှတ်ပါ။ ပြီးရင် အုပ်စုဖွဲ့ (Control-G) ပါ။ ဓာတ်ပုံ သင်္ကေတ တစ်ခုလုံး ကိုလည်း ဒီနည်း အတိုင်း လုပ်ပါ။

finishing off the photos icon

ဒါက တော့ စုစည်းမှု တစ်ခုပါ။

ဒီ လုပ်ငန်းစဥ် ကို လုပ်နေတဲ့ အချိန်မှာ အရေးတကြီး လေ့လာစရာ အသစ်တွေ၊ အသုံးဝင်ပုံတွေ နဲ့ အဆင့်တိုင်းကို ကောင်းကောင်း လုပ်ဆောင် နိုင်မယ်လို့ မျှော်လင့်ပါတယ်။

Final Design
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.