How-to, Web

Web 2.0 Flash Button

Web Site တစ်ခုတွင် User Interface သည်မရှိမဖြစ်အရေးပါလှတယ်။ Web Designer များသည် User Interface အတွက်အသစ်ဖြစ်သောတီထွင်မှုများဖြင့်ဆန်းသစ်နေကြပါတယ်။ ထို့ကြောင့် Web 2.0 ခေတ်ကြီးတွင် ကျွန်တော်တို့ သည် အသစ်ဖြစ်သော ဖန်တီးမှုများဖြင့် တီထွင်ဆန်းသစ်ကြပါစို့။ ဒီ tutorial လေးကတော့ Flash web site များမှာ အသုံးများလာတဲ့ အကြည်ရောင်လေးပြေးနေတဲ့ Web Button တစ်ခုပါ။ ရိုးရှင်းစွာနဲ့ပြုလုပ်နိုင်ပါတယ်။ ဒီ Tutorial ကိုလေ့လာရင်းနဲ့ Layer မှာ Style effect များထည့်သွင်းခြင်းနဲ့  Design Illustiation လုပ်တဲ့အခါမှာအသုံး၀င်တဲ့ Path တွေအကြောင်းကိုပါသေချာနားလည်သွားပါလိမယ်။ ရိုးရှင်း စွာနဲ့ ပြုလုပ်ထားတဲ့အတွက် beginner level များအတွက် ခက်ခဲမှုမရှိနိုင်ပါဘူး။

(၁)  File > New (Ctrl + N) ဖြင့် File အသစ်တစ်ခုယူပါ။
(Width = 500px, Height = 500 px, Resolution =72, Color mode = RGB)

(၂)  Ellipe Tool (U)      ကိုယူ၍  Tool Option Bar တွင် Shape ကိုရွေးထားပါ။
ထို့နောက် ( widht=345px, height=345px ) ဖြင့် Circle တစ်ခုဆွဲပါမည်။  အတိအကျဖြစ်စေရန် Shift key ကိုဖိ၍ဆွဲပါ။
(Shape ရွေးခြယ်၍ အသုံးပြုသောကြောင့် မိမိလိုအပ်သော အချိန်တွင် ပုံ၏ Resolution ကို၀ါးမသွားစေပဲ ချုံ့ နိုင်ချဲ့ နိုင်ပါတယ်။
Illustrator ကဲ့သို့ အသုံးချနိုင်ပါတယ်။)

1

(၃)  Circle Shape ဖြစ်သွားသော Layer ကို  Style Effect များထည့်သွင်းရန် အတွက် Right Click နှိပ်၍ Blending Option ကိုကိုရွေးပါ။
(Width = 500px, Height = 500 px, Resolution =72, Color mode = RGB)
2
(၄)  အောက်ပါ Stlyle Effect များကိုထည့်ပါ။
3

(၅)  ထို့နောက် ၄င်း Layer ကို Duplicate လုပ်ပါ။  Right Click > Duplicate Layer (Ctrl + J)

(၆)  Duplicate လုပ်ပြီး Layer ကို Transform လုပ်ပါ။  Edit> Free Tranform (Ctrl +T) အတွင်းသို့ချုံ့ပါ။

4
(၇)  Trasform ပြုလုပ်၍ ချုံ့ထားသော Layer ကို Style များထည့်သွင်းရန် Shape 1 copy Layer ကို Right Click နှိပ်၍ Blending Option
ကိုရွေးပါ။
5
(၈)   အောက်ပါ Stlyle Effectများကိုထည့်ပါ။
6
7
8
9
(၉)  ထို့နောက် Text Tool (T) ကိုရွေး၍ Home ဟုရိုက်ပါမယ်။ (Shape Layer နှစ်ခု၏အပေါ်ဆုံးတွင် ရိုက်ရပါမည်။)
10
(၁၀)  ထို့နောက် Text Layer ကို Style effect များထည့်ပါမယ်။ Home Text Layer ကို Right Click နိပ်၍ Blending Option ကို ရွေး၍ အောက်ပါ Style Effect များကို ထည့်ပါမည်။
11
12
13
(၁၁)  ဒီအဆင့်မှာတော့ Buton ရဲ့အောက်ခြေမှာအရိပ်ကျနေသကဲ့သို့ဖန်တီးရပါမယ်။ ကျွန်တော်တို့ Style Effect များထည့်ခဲ့သော Layer ၏အောက်တွင်  Magquee Tool (M)  ဖြင့် Slection ပြုလုပ်ပါမည်။
14
(၁၂)  ထို့နောက် Slection ထဲတွင် အနက်ရောင်ဖြည့်ပါမယ်။
(အရောင်ဖြည့်တဲ့နေရာမှာ မြန်ဆန်စေရန် ရှင်းပြပါမည်။ အနက်ရောင်ဖြည့်မှာဖြစ်တဲ့အတွက် Keybord ကနေ (D) Key ကိုနှိပ်ပါမယ်။ (D) Key နှိပ်လိုက်သည့်အတွက် Tool Box ၏အောက်ခြေတွင်ရှိသော Color Picker တွင် Foreground သည် အဖြူရောင်ဖြစ် ၍ Background Color သည် အနက်ရောင်ဖြစ်သွားသည်ကိုသတိပြုပါ။ ထို့နောက် Foreground Color Shortcut ဖြစ်သည့် Alt+ Backspace  ကိုသုံးပါမည်။ အကယ်၍ Background Color ကိုဖြည့်လိုပါက Short Cut ဖြစ်သည့် Ctrl + Backspace ကိုသုံးနိုင်ပါသည်။ )
15
(၁၃)  နောက်ဆုံးအဆင့်အနေဖြင့် အရိပ်ပြုလုပ်ရန် အနက်ရောင်ဖြည့်ထားသော Layer ကို Blur ပြုလုပ်ပါမည်။  (Filter > Blur > Gausian Blur)  ကိုသွားပါ။ Gussian Blur Box ထဲက Radius ထဲမှာ စိတ်ကြိုက်အတိုးအလျှော့လုပ်၍ ကစားနိုင်ပါတယ်။ နောက်ဆုံး Result ကိုအောက်ပါအတိုင်းမြင်ရမှာဖြစ်ပါတယ်။
16

Related Posts

Leave a Reply

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