မင်္ဂလာပါ။ ဒီနေ့မှာတော့ Daily Dose of Design ဆိုတဲ့ခေါင်းစဉ်နဲ့ sharing လုပ်ပေးသွားမှာဖြစ်ပါတယ်။ ညီမကတော့ Spiceworks Myanmar မှာ Junior Web Developer အနေနဲ့တာဝန်ယူလုပ်ကိုင်နေတဲ့ ခိုင်သဉ္ဇာသွယ်ဖြစ်ပါတယ်။

daily dose of design ep1 အနေနဲ့ blur-glass effect ကို figma မှာ ဘယ်လို create လုပ်မလဲဆိုတာကို ပြောပြပေးသွားမှာပါ။

1. frame တစ်ခုယူလိုက်ပါ။ ကိုယ်ကြိုက်တဲ့ ratio ကိုရွေးချယ်နိုင်ပါတယ်။

select frame

2. background ကို gradient color (or) background image သုံးပေးပါ။ (သိသာစေဖို့ပါ။)

background gradient color

3. rectangle တစ်ခုယူပါ။

rectangle with background image

4. border radius ထည့်ပြီး background transparent လုပ်ပေးပါ။

border radius & bg transparent (for rectangle)

5. effects -> background blur ကိုရွေးပြီး uniform 30 လောက်ထားလိုက်ပါ။

background blur effect (for rectangle)

6. stroke -> white -> opacity 30% or 40%
7. effects -> drop shadow -> ကြိုက်နှစ်သက်ရာ setting

border & drop shadow effect (for rectangle)

နောက်ဆုံး result အနေနဲ့ အခုလိုပေါ်ပါမယ်။

figma final result

နောက်ထပ်တစ်ခုအနေနဲ့ canva မှာရော blur-glass effect ဘယ်လို create လုပ်ရတယ်ဆိုတာ ပြောပြပေးသွားပါမယ်။

1. ကြိုက်နှစ်သက်ရာ design တစ်ခုခုရွေးပေးပါ။

choose design layout

2. background gradient color (or) background image တစ်ခုခုသုံးပါ။
3. ဒါမှမဟုတ် gradient element တွေလည်းသုံးလို့ရပါတယ်။ gradient element သုံးထားတဲ့ပုံစံနဲ့ create လုပ်သွားပါမယ်။

choose gradient element

4. rounded rectangle တစ်ခုထည့်ပါ။
elements -> shapes -> basic shape -> rounded rectangle
5. background color ထည့်ပြီး transparent 15% or 25% လောက်လုပ်ပေးပါ။

background transparent

6. border နဲ့ drop shadow effect ထည့်ပြီး ကိုယ့်စိတ်ကြိုက် setting ချိန်လို့လည်း ရပါတယ်။

border & drop shadow effect

နောက်ဆုံး result အနေနဲ့ အခုလိုပေါ်ပါမယ်။

canva final result

ကျေးဇူးအများကြီးတင်ပါတယ်။

Stayed tuned for ep-2