Advertisement
  1. Design & Illustration
  2. Patterns
Design

The Shining ရုပ်ရှင်ထဲမှ ကော်ဇော အကွက် ဒီဇိုင်းကို Adobe Illustrator မှာ ဘယ်လိုဆွဲမလဲ။

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Horror Movie Week.
How to Create a Freddy Krueger Inspired Text Effect in Adobe Photoshop
How to Create a Scream Mask in Adobe Illustrator

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

Final product image
What You'll Be Creating

ဒီနေ့ သင်ခန်းစာ မှာတော့ ထိတ်လန့်သည်းဖို ရုပ်ရှင် ဇာတ်လမ်းရဲ့ အထူးပြုလုပ်ချက် ကို လေ့လာပါမယ်။Stanley Kubrick's ရဲ့ The Shining ရုပ်ရှင်ထဲက ကော်ဇော အကွက် ဒီဇိုင်း ကို ဘယ်လို ဆွဲရမလဲ ဆိုတာ လေ့လာ ပါမယ်။

Rectangle Tool ကို Pixel Grid နဲ့ ပေါင်းစပ်ပြီး ရေးဆွဲမယ့် ရှေးရိုးနည်းကိုပဲ သုံးပြီး Adobe Illustrator မှာ ဖန်တီးပါမယ်။

ကယ် စလိုက်ကြရအောင်။

ပြီးတော့ Envato Market မှာ အံအားသင့်စရာ အကွက်ဒီဇိုင်း အသစ် များကို အမြဲ တွေ့နိုင်တယ် ဆိုတာမမေ့ပါနဲ့။  Theme အများကြီးထဲကနေ ရွေးချယ်နိုင်ပါတယ်။

၁။ ပရောဂျက် ဖိုင် အသစ် ကို တည်ဆောက်ပါ။

Document အသစ်တစ်ခု (File > New Document or Control-N) ကို တည်ဆောက်ပါ။ ပြီးလျှင် အောက်ပါပြင်ဆင်ချက်များ အတိုင်း လုပ်ဆောင်ပါ။

  • Number of Artboards - ၁ ခု
  • Width - ၆၀၂ px
  • Height - ၆၀၀ px
  • Units - Pixels

Advanced tab မှ

  • Color Mode: RGB
  • Raster Effects: Screen (72ppi)
  • Align New Objects to Pixel Grid: checked
setting up a new document

၂။ စိတ်ကြိုက် Grid တစ်ခု ကို တည်ဆောက်ပါ။

Pixel-perfect အလုပ်လုပ်ပုံ ကို သုံးပြီး အကွက်ဒီဇိုင်း (Pattern) ကို ဖန်တီးပြုလုပ် မှာမို့ ကျွန်ုပ်တို့ ဆွဲမယ့် ပုံကို ကောင်းကောင်း ထိန်းချုပ်နိုင် ဖို့ အကွက်စိတ် Grid ကို တည်ဆောက်ပါမယ်။

အဆင့် ၁

Edit > Preferences > Guides & Grid sub menu ကိုသွား၍ အောက်ပါ ပြင်ဆင်ချက် များအတိုင်း လုပ်ဆောင်ပါ။

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

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

အဆင့် ၂

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

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

၃။ Main Repeating Element ကို ဖန်တီးပါ။

ပထမဆုံး လုပ်ရမယ့် အရာက main repeating element ဒါမှမဟုတ် အကွက်ဒီဇိုင်းရဲ့ အစိတ်အပိုင်း တစ်ခုနဲ့ စပြီး ဆွဲရမှာပါ။ ဒီဇိုင်းအကြီးကြီး ဆွဲဖို့ ဒီ အစိတ်အပိုင်းကို သုံးရပါမယ်။

အဆင့် ၁

Rectangle Tool (M) ကိုနှိပ်၍ 86 x 106 px ရှိတဲ့ ပုံကို ဖန်တီးပါ။ ဒီပုံတွင် လိမ္မော်ရောင်တောက်တောက် (#DF5F18) ကိုသုံးပြီး အရောင် ခြယ်ပါမယ်။ ပြီးလျှင် Artboard ရဲ့ အလယ်တည့်တည့်တွင် နေရာချထားမယ်။

creating and positioning the main shape for the patterns repeating element

အဆင့် ၂

ဖန်တီးပြီးသားပုံကို အနီးကပ် ကြည့် ကြည့်ပါ။ ပြီးလျှင် Add Anchor Point Tool (+) ကိုသုံးပြီး anchor points အသစ်နှစ်ခုကို ထည့်ပါ။ တစ်ခုကို အပေါ်အနားရဲ့ အလယ်ကောင်မှာ ထည့်ပြီး နောက်တစ်ခုကို အောက်အနားရဲ့ အလယ်ကောင်မှာ ထည့်ပါ။

adding the top and bottom anchor points to the repeating elements main shape

အဆင့် ၃

Direct Selection Tool (A) ကိုသုံးပြီး အသစ်ထည့်ထားတဲ့ anchor points နှစ်ခုကို select မှတ် (ရွေးချယ်) ပါ။ ပြီးလျှင် right-click နှိပ်ပြီး Transform > Move ကို သွားပြီး Vertical တန်ဖိုးတွင် -26px ဖြည့်၊ Horizontal တန်ဖိုးတွင် 0 px ဖြည့်အားဖြင့် anchor points တွေကို အပေါ်ရွေ့လိုက်ပါ။

adjusting the repeating elements main shape

အဆင့် ၄

အခု အဓိက ပုံကို ရပါပြီ။ ပုံရဲ့ ထိပ်ကို outline ပေးဖို့ ပုံကို select မှတ်ပါ။ပြီးလျှင် Move Tool ကိုသုံးပြီး လက်ရှိပုံရဲ့  14 px အကွာမှာ ပုံတူပွား ( copy ကူး) မယ်။ (right click > Transform > Move > Horizontal: 0 px > Vertical: -14px > Copy).

creating the repeating elements top outline using the move tool

အဆင့် ၅

မူရင်းပုံကို copy ကူးပါ (Control-C)။ ပြီးရင် အောက်ဘက်ရွေ့ ထားပြီးသား ပုံပေါ် paste လုပ်ပါ(Control-F)Pathfinder’s Minus Front Shape Mode ကိုသုံးပြီး ပုံနှစ်ပုံရဲ့ မထပ်တဲ့ အပိုင်းကို ဖယ်ထုတ်ပါ။ ရလာတဲ့ ပုံကို အမည်းရောင် (#000000) ထားပေးပါ။

adjusting the repeating elements top outline

အဆင့် ၆

ဖန်တီးထားပြီးသောပုံကို (Control-C > Control-F) နှိပ်ပြီး copy ကူးကာ ပုံအတွက် အောက်ခြေ outlineတစ်ခု ထပ်ထည့်ပါ။ပုံက လိမ္မော်ရောင်ပုံရဲ့ အောက်မှာ ရှိပါလိမ့်မယ်။ပုံ၃ပုံ လုံးကို တစုတစည်းတည်း ဖြစ်အောင် selectမှတ်ပြီး group(Control-G) လုပ်ပါ။

creating and positioning the repeating elements bottom outline

အဆင့် ၇

Rectangle Tool (M) ကိုသုံးပြီး 26 x 14 px ရှိတဲ့ ပုံကို ဖန်တီးပါ။ #981F24 အရောင်ခြယ်ပါ။ ပြီးလျှင် ပုံရဲ့ ထိပ်ကနေ 50 px အကွာမှာ Horizontal Center Align လုပ်ထားပါ။

creating and positioning the main shape for the repeating elements top hexagon detail

အဆင့် ၈

အပေါ်အနားနဲ့ အောက်အနားမှာ anchor points အသစ်နှစ်ခုကို ထည့်ပေါင်းပါ။ anchor point တစ်ခုချင်းဆီကို Move Tool သုံးပြီး အပြင်ဘက်ကို 8 px ထုတ်လိုက်ပါ။ (right click > Transform > Move > Vertical > - 8 px အပေါ်အနားအတွက် နဲ့ + 8 px  အောက်အနားအတွက် ).

adjusting the repeating elements top hexagon detail

အဆင့် ၉

ဆဋ္ဌဂံပုံကို သင့်တော်တဲ့ အထူပေးဖို့ပုံကို select မှတ်ပါ၊ ပြီးလျှင် Object> Path > Offset Path ကိုသွားပြီး Offset တန်ဖိုးနေရာတွင် 12 px ထည့်ပါ။တခြားတန်ဖိုးတွေကို ဒီတိုင်းပဲ ထားလိုက်ပါ။

adding the outline to the repeating elements top hexagon detail

အဆင့် ၁၀

ပုံရဲ့ အတွင်းပိုင်းအရောင်နဲ့ကွဲပြားအောင် ပုံရဲ့ outline အရောင်ကို အမည်းရောင် (#000000)ပြောင်းပါ။ ပြီးလျှင် ပုံကို select မှတ်ပြီး Control-G keyboard shortcut သုံးပြီး group လုပ်လိုက်ပါ။

adjusting the color of the repeating elements top hexagon detail

အဆင့် ၁၁

ဆဋ္ဌဂံပုံနဲ့ သူ့ရဲ့ outline ကို copy ကူးပါ(Control-C > Control-F) ။ပြီးလျှင် repeating element ပုံရဲ့ ဘယ်ဘက်ခြမ်း၊ ပုံထိပ်ကနေ 74 px အကွာမှာ နေရာချထားပါ။ ဆဌဂံပုံရဲ့ ညာဘက်ခြမ်းသာ ထပ်နေအောင် လုပ်ပါ။

creating and positioning the second hexagon detail onto the repeating element

အဆင့် ၁၂

ဒုတိယ ဆဋ္ဌဂံပုံကို copy ကူးပါ(Control-C > Control-F) ။ပြီးလျှင် repeating element ပုံရဲ့ ညာဘက်ခြမ်းတွင် နေရာချထားပါ။ ဆဋ္ဌဂံပုံရဲ့ ဘယ်ဘက်ခြမ်းသာ ထပ်နေအောင် လုပ်ပါ။

creating and positioning the third hexagon detail onto the repeating detail

အဆင့် ၁၃

Rectangle Tool (M) ကိုသုံးပြီး 12 x 62 px ရှိတဲ့ ပုံကို ဖန်တီးပါ။ အမည်းရောင် (#000000) ကို သုံးပါမယ်။ ပြီးလျှင် အပေါ်ဆဋ္ဌဂံ ရဲ့အခြေ အလယ်မှာ နေရာချပါ။

creating and positioning the vertical rectangle onto the repeating elements top hexagon detail

အဆင့် ၁၄

12 x 62 px ရှိတဲ့ထောင့်မှန်စတုဂံ (#000000)ပုံ ကို တခြားဆဋ္ဌဂံပုံနှစ်ခု နားတွင် ထပ်ထည့်ပါ။ ဒီအချိန်မှာ ပုံရဲ့ အပေါ်ဘက်မှာပဲနေရာချပေးပါ။

ပြီးသွားရင် လုပ်လဲ့သမျှပုံအားလုံးကို select မှတ်ပါ။ Control-Gkeyboard shortcut သုံးပြီး group လုပ်ပါ။

adding the vertical rectangle to the second and third hexagon details

အဆင့် ၁၅

ဒီမှာ ကျွနိုပ်တို့ ပိုပြီးလှတဲ့ repeating element တစ်ခုကို ဖန်တီးပြီးပါပြီ။ အကွက်တွေကွက်တိဖြစ်နေမယ့် ပိုကြီးတဲ့ အကွက်ဒီဇိုင်းကို စတည်ဆောက်ဖို့ ကျွန်ုပ်တို့ အခုပုံကို mask လုပ်ဖို့လိုပါတယ်။

အဲ့လိုလုပ်ဖို့ 86 x 160 px ရှိတဲ့ ထောင့်မှန်စတုဂံကို ဖန်တီးပါ (လိမ္မော်ရောင် ဖြင့်အသားပေးထားပါတယ်)။ group လုပ်ထားတဲ့ ပုံရဲ့ အလယ်မှာ ထားပါမယ်။ ပြီးလျှင် Clipping Mask (right click > Make Clipping Mask). ကို သုံးပေးပါ။

masking the repeating element

အဆင့် ၁၆

repeating element ကို mask လုပ်ပြီးတဲ့အခါမှာ ကျွန်ုပ်တို့ လုပ်ငန်းရဲ့ နောက်ပိုင်းအဆင့်တွေမှာ အကွက်တူပုံတူ တွေလုပ်ဖို့ အတွက် repeating element ကို Artboard ရဲ့ ဘယ်ဘက်ခြမ်းမှာ ချိန်ညှိထားပါ။

positioning the masked repeating element onto the left side of the artboard

အကွက်ဒီဇိုင်းရဲ့ အဓိက အပိုင်းကိုဖန်တီးပါ။

ဒီအဆင့်ထိ ကျွနိုပ်တို့ လှပတဲ့ main repeating element ကို ဖန်တီးခဲ့ပြီးပါပြီ။ ဒါပေမဲ့ မှန်မှန်ကန်ကန် ရဖို့အတွက် အကွက်အတွဲ ထပ်ပေါင်းဖို့ လိုပါတယ်။

အဆင့် ၁

repeating element ကို Select မှတ်ပါ။ ပြီးလျှင် copy ၈ခုကူးပါ (Control-C > Control-F)။တစ်ခုက အခြားတစ်ခုကနေ 0 px မှာ နေရာချထားရမယ်။ မူလတစ်ခုကို မှတ်ပြီး Key Object အနေနဲ့ သတ်မှတ်ထားပေးပါ။

creating the patterns first row of repeating elements

အဆင့် ၂

repeating elements တွေကို select မှတ်ပြီး group (Control-G) လုပ်ထားပါ။ သူတို့ကို Align panel ထဲက Horizontal Align Center ကိုသုံးပြီး Artboard ရဲ့ အလယ်မှာ ထားပေးပါ။

aligning the row of repeating elements to the center of the artboard

အဆင့် ၃

ရှိတဲ့တစ်ခုကိုသုံးပြီး တန်း (rows) ၅ခုကျော်ကျော် ဖန်တီးပါ။ ပြီးလျှင် တခြားတစ်ခုပေါ်ကို ထပ်တင်ပါ။အပေါ် အောက် outline တွေ ထပ်နေအောင် သေချာလုပ်ပါ။ copy လုပ်ထားတာတွေကို opacity လျှော့ထားခြင်းဖြင့် ဒီအဆင့်ကို လွယ်လွယ်ကူကူ လုပ်နိုင်ပါတယ်။ ပုံတွေ ထပ်နေတာကို ကောင်းကောင်း ကြည့်နိုင်ပါတယ်။

creating the rest of the patterns repeating rows

အဆင့် ၄

တန်း (rows) တွေအားလုံးထည့်ပြီး တဲ့အခါမှာ သူတို့ရဲ့ Opacity ကို 100% ထားပါ။ ပြီးရင် group (Control-G) လုပ်ပါ။ Artboard ရဲ့ အလယ်ကို ရောက်အောင် ချိန်ညှိပါ။

grouping and positioning the patterns repeating rows to the center of the artboard

အဆင့် ၅

ရှိနေတဲ့ rows တွေကို 602 x 600 px ထောင့်မှန်စတုဂံပုံနဲ့ mask လုပ်ပါ။အပြင်ဘက် ထွက်နေတဲ့ အကွက်တွေကို တစ်ဝက်တိတိ ဖြတ်ထုတ်နိုင်စေဖို့ ဖြစ်ပါတယ်။

masking the main section of the pattern

အကွက်နမူနာ swatch pattern ကို ဖန်တီးပါ။

ကဲ ဒီအဆင့်မှာတော့ ကျွန်ုပ်တို့ အကွက်ဒီဇိုင်း ဖန်တီးဖို့ လိုတဲ့ အရာတွေကို လုပ်ပြီးပါပြီ။ ဆိုလိုတာက swatch library element အဖြစ် ပြောင်းနိုင်ပါပြီ။

အဆင့် ၁

Mask လုပ်ထားပြီးသား အကွက်ဒီဇိုင်းကို select မှတ်ပါ။ Object > Pattern ကို သွားပါ။ Make ကိုနှိပ်ပါ။ ကျွနိုပ်တို့ ချိန်ညှိဖို့ လိုမယ့် ရွေးချယ်မှုတွေ ပါတဲ့ window အသစ်ကို ပေါ်လာပါလိမ့်မယ်။ ဒါပေမဲ့အကွက်ဒီဇိုင်းကို အလွယ်တကူ သိမှတ်နိုင်ဖို့ ပထမဦးဆုံး သင့်တော်တဲ့ နာမည် ပေးပါ။

giving the pattern a custom name

အဆင့် ၂

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

choosing a tile type for the pattern

အဆင့် ၃

ပြီးရင် အကွက်ဒီဇိုင်းရဲ့ အရွယ်အစားကို (602 x 600 px) သတ်မှတ်ထားပေးလို့ရမဲ့ Width နဲ့ Height ရှိပါတယ်။

choosing a size for our pattern

အဆင့် ၄

Overlap နဲ့ Copies ပြင်ဆင်ချက်ကို ဒီအတိုင်း ထားထားလိုက်ပါ။ သူတို့ကောင်းကောင်း အလုပ်လုပ်ပါလိမ့်မယ်။ ပြီးလျှင် အကွက်ဒီဇိုင်းကို swatch library ထဲထည့်ဖို့ နောက်ဆုံး Done ကိုသာ နှိပ်လိုက်ပါ။

setting the overlap and copies settings for our pattern

အဆင့် ၅

Pattern ကိုသုံးဖို့ swatch ကနေ လွယ်လွယ်ကူကူ ရွေးယူနိုင်တယ်။ ပြီးလျှင် Rectangle Tool (M) (ဒါမှမဟုတ် တခြားပုံစံ) ကိုယူပြီး ပုံအသစ်ဆွဲလိုက်ပါ။ ရုပ်ရှင်ထဲမှာ ပါတဲ့ trippy brain-damaging effect ရှိတဲ့ ကော်ဇော အကွက်ဒီဇိုင်း နဲ့ တူတဲ့ ပုံကို တွေ့ရပါလိမ့်မယ်။

example of using the pattern

ဒါက စုစည်းခြင်း တစ်ခုပါ။

သင့်မှာ အခြေခံ ပုံတချို့ နဲ့ Illustrator ရဲ့ ပါပြီးသား Pattern options တွေကိုသုံးပြီး သင်ရဲ့ကိုယ်ပိုင် “Shining” ကောဇော ကို ဖန်တီးဖို့ လွယ်ကူတဲ့ နည်းတစ်ခုရှိပါပြီ။

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

final preview of the pattern
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.