မဂၤလာပါခင္ဗ်ာ။
ကြၽန္ေတာ္ကေတာ့ Spiceworks Myanmar ကုမၸဏီတြင္ Web Designer အျဖစ္ ဝင္ေရာက္ လုပ္ကိုင္လ်က္ရွိေသာ စိုင္းေအာင္ႏိုင္ဦး ျဖစ္ပါတယ္။ ဒီတစ္ပတ္မွာေတာ့ Adobe Photoshop ျဖင့္ Diagonal Pattern နဲ႔ Create Pattern Design with PNG ျပဳလုပ္ပုံကို ေဝမွ်ေပးခ်င္ပါတယ္ခင္ဗ်။

ပထမဦးဆုံး Photoshop ကိုဖြင့္ၿပီး Artboard Width ႏွင့္ Height ကို 50px  ကေန 100px ထိ ကိုယ္အဆင္ေျပသလို သတ္မွတ္ေပးလို႔ရပါတယ္။ ကြၽန္ေတာ္ကေတာ့ 50px ယူပါမယ္။ ၿပီးလွ်င္ Create ကိုႏွိပ္ပါ။

IMG_01

(IMG_02) ပုံမွာျပထားသည့္အတိုင္း Artboard ရဲ႕ Properties ကိုႏွိပ္ၿပီး Background Color ကို Transparent ေ႐ြးေပးပါ။

IMG_02

ၿပီးလွ်င္ ပုံမွာျပထားသည့္အတိုင္း Line Tool ကို ေ႐ြးၿပီး Weight ကို 15px ေလာက္သတ္မွတ္ေပးပါ။

IMG_03

ၿပီးလွ်င္မ်ဥ္းေစာင္း တစ္ေၾကာင္းဆြဲေပးပါ။

IMG_04

မ်ဥ္းေစာင္းတစ္ေၾကာင္းဆြဲၿပီးလွ်င္ (IMG_05) ပုံတြင္ျပထားသည့္အတိုင္း Line Layer ေပၚကို Right-Click ႏွိပ္ၿပီး duplicate လုပ္ပါ။ မ်ဥ္းေစာင္း ၃ေၾကာင္း ယူရမွာျဖစ္သည့္အတြက္ ေနာက္ထပ္ duplicate လုပ္ပါ။

IMG_05

ထို႔ေနာက္ Layer ကို သူႏွင့္သက္ဆိုင္ရာ နာမည္ေပးၿပီး Ok ႏွိပ္ပါ။

IMG_06

Duplicate လုပ္ၿပီး ရလာတဲ့ မ်ဥ္းႏွစ္ေၾကာင္းကို Artboard ရဲ႕ ေထာင့္အစြန္းသို႔ (IMG_07 ) ပုံတြင္ျပထားသည့္အတိုင္း ညီညာစြာ ေ႐ႊ႕ေပးပါ။

IMG_07

ၿပီးလွ်င္ Edit ကို ႏွိပ္ၿပီး Define Pattern ကို ေ႐ြးေပးပါ။

IMG_08

(IMG_09) ပုံတြင္ ျပထားသည့္အတိုင္း Pattern Name ကို ကိုယ္ႀကိဳက္ႏွစ္သက္ရာနာမည္ေပးၿပီး OK ႏွိပ္ပါ။ ဒီအဆင့္ၿပီးလွ်င္ Diagonal Pattern တစ္ခုရပါၿပီ။

IMG_09

ၿပီးလွ်င္ File -> New ကို ႏွိပ္ၿပီး Artboard အသစ္ ယူေပးပါ။ Artboard Width ႏွင့္ Height ကို ကိုယ္လိုသလို သတ္မွတ္ေပးၿပီး Create ကိုႏွိပ္ပါ။ (IMG_10) ပုံတြင္ ျပထားသည့္ အတိုင္း Artboard အသစ္တစ္ခု ရလာမည္ျဖစ္ပါသည္။

IMG_10

Layers ထဲမွ Layer 1 ကို Select လုပ္ၿပီး Adjustment ကို ႏွိပ္ပါ။

IMG_11

ၿပီးလွ်င္ Pattern ကို ႏွိပ္ပါ။

IMG_12

Pattern Fill တြင္ Scale ကို မိမိလိုသေလာက္ Adjust လုပ္ၿပီး Ok ႏွိပ္ပါ။

IMG_13

Diagonal Pattern Background ရပါၿပီ။

Result -> IMG_14

ဒုတိယ တစ္ခုအေနနဲ႔ ကြၽန္ေတာ္ PNG images နဲ႔ Pattern ျပဳလုပ္ပုံကို ေဝမွ်ေပးခ်င္ပါတယ္။
အထက္ေဖာ္ျပပါ (IMG_01) နဲ႔ ပုံစံတူ ယူပါမယ္။ ဒါေပမယ့္ Artboard Width ႏွင့္ Height ကိုေတာ့ 100px သတ္မွတ္ပါမယ္။
ၿပီးလွ်င္ ကိုယ္ႀကိဳက္ႏွစ္သက္ရာ PNG ပုံတစ္ပုံ Download လုပ္ပါ။ Download ထားေသာ PNG ရဲ႕ background သည္ Transparent ျဖစ္ေနဖို႔ သတိထားရပါမယ္။
Download ထားေသာ PNG image ကို Artboard ထဲသို႔ ဆြဲထည့္ပါ။ ဆြဲထည့္လိုက္ေသာ ပုံကို Middle, Center က်ေအာင္ ခ်ိန္ေပးပါ။

IMG_15

မိမိဆြဲထည့္လိုက္ေသာ ပုံကို Duplicate လုပ္ပါ။
ၿပီးလွ်င္ Duplicate လုပ္ထားေသာပုံ ရဲ႕ Layer ကို Select လုပ္ၿပီး Filter -> Other -> Offset… ကို ေ႐ြးပါ။

IMG_16

Horizontal ႏွင့္ Vertical ကို Adjust လုပ္ရာတြင္ မိမိ Artboard Width တန္ဖိုးေပၚ မူတည္၍ ကြဲလြဲသြားပါမည္။ (IMG_17) ပုံတြင္ ျပထားသည့္အတိုင္း ခုကြၽန္ေတာ္တို႔ Artboard Width သည္ 100px ယူထားသည့္အတြက္ Horizontal ႏွင့္ Vertical ကို +50 သတ္မွတ္ေပးမွ PNG image သည္ Middle, Center က်မည္ ျဖစ္ပါသည္။

မွတ္ခ်က္။ ။ အကယ္၍ Artboard Width သည္ 50px ျဖစ္လွ်င္ Horizontal ႏွင့္ Vertical ကို +25 သတ္မွတ္ေပးရမည္ျဖစ္ပါသည္။ ဆိုလိုရင္းကေတာ့ Artboard Width ရဲ႕ တန္ဖိုးကို ထက္ဝက္ဝက္ၿပီး ရလာသည့္တန္ဖိုးကို Horizontal ႏွင့္ Vertical တန္ဖိုး ေပးရမည္ျဖစ္ပါသည္။

IMG_17

ၿပီးလွ်င္ Edit -> Define Pattern… ကို ႏွိပ္ပါ။ Create Pattern အဆင့္ၿပီးပါၿပီ။

IMG_18

ေနာက္ဆုံးအဆင့္အေနနဲ႔ Artboard အသစ္ယူၿပီး အထက္ပါေဖာ္ျပခဲ့ေသာ ( IMG_11, IMG_12 ) အတိုင္း ျပဳလုပ္ၿပီး မိမိ Create လုပ္ထားေသာ Pattern ကို သုံးၿပီး Background Image အျဖစ္ အသုံးျပဳလို႔ရပါၿပီ။
Result -> IMG_19

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