Wednesday, April 4, 2018

UI/UX ডিজাইন দ্বারা কিভাবে মোবাইলের অ্যাপ স্ক্রিন ডিজাইন করা যায় অ্যাডবি ফটোশপ দিয়ে | এসো ডিজাইন শিখি

UI/UX  ডিজাইন দ্বারা  মোবাইলের অ্যাপ স্ক্রিন ডিজাইন
UI/UX  ডিজাইন, UI ডিজাইন,UX  ডিজাইন
UI/UX  ডিজাইন, UI ডিজাইন,UX  ডিজাইন
UI/UX ভিডিও

UI ডিজাইন কি?

UI  অর্থাৎ U= User এবং I=Interface তাহলে UI হচ্ছে User Interface.

এককথা,UI হচ্ছে  User Interface  ইউজার ইন্টারফেস যা কোন বস্তুর অবয়ব বা চেহারা!  অর্থাৎ কোন একটি ডিজাইনের যা প্রথম যে অভয়ব বা চেহারা নিয়ে আপনার সামনে আসে তাকে বলে UI ডিজাইন বা User Interface  ইউজার ইন্টারফেস বলে।




একেক মোবাইলের স্ক্রিন আর সাইজ একেক রকম হয়ে থাকে।যেমন নকিয়া স্মার্ট মোবাইলের সাইজ এবং আই-ফোনের  সাইজ এক না।আবার সেমসাং মোবাইলের সাইজ এবং হুয়াই মোবাইলের সাইজ এক রকম না।

আমি যে মোবাইল স্ক্রিন ডিজাইন করছি তার সাইজ হলঃ
১১২৫ পিক্সেল*২৪৩৬পিক্সেল
রেজুলেশন হচ্ছে ৭২ ও কালার মোড হচ্ছে RGB

ডিজাইনঃ

প্রথমে ফটোশপ ডুমুমেন্ট ওপেন করি (ctrl+N) দিয়ে।যা দেখতে একটু লম্বা সেইপের মত দেখতে লাগবে।




মোবাইলের ডিসপ্লে গুলো মোটা মোটি একটু লম্বা সেইপের মতই লাগে।কারনে আমদের মোবাইল দিসপ্লে গুলো লম্বা ভাবে ডিজাইন করা হয়।ডুকুমেন্টের মাঝ বরাবর একটি রেক্ট্যাংগল সেইপ নিয়ে লেয়ার স্তাইল থেকে গ্রেডিউয়ান্ট ব্যবহার করতে হবে।যা আমি নিচে দেখিয়ে দিয়েছি।




তারপর,আমাদের ভাবতে হবে,মোবাইলে স্ক্রিন ডিজাইন করার ক্ষেত্রে কি কি বিষয় রাখতে হয়।প্রথমে ডান পাশে পিকচার ও বাম পাশে ডাইলগ Taxt থাকতে পারে।আপনারা ইচ্ছে করলে চেঞ্জ করে দিতে পারেন।





তারপর,লোগো টি আপনি স্ক্রিনের উপরে ঠিক মাঝ বরাবর রাখতে হবে।যা আপনার মোবাইল স্ক্রিনটি দেখতে ভাল লাগবে।যা নিচের পিকচার টি লক্ষ্য করলে দেখতে পারবেন।




তারপর,স্ক্রিনের নিচে কিছু এরর চিহ্ন থাকতে পারে।যা আপনার স্ক্রিন টি পর ডান ও বামে দিকে যাবে এইরকম বুঝাতে হবে।যা নিচের পিকচার টি লক্ষ করুন।এবং next or skip লেখা দিতে পারেন।



তারপর,সর্বশেষ সবার উপর একটি ১১২৫*২৪৩৬ সাইজ নিয়ে রেক্ট্যাংগল সেইপ নিতে হবে এবং কালার হবে কাল।অপাসিটি হবে ১২% ।
সর্বশেষ দিজাইনটি একটি মোবাইল মোকাপ ব্যবহার করে তা প্রেজেন্ট করতে হবে।যাতে ক্লাইন্ট খুশি হয়।


UI/UX  ডিজাইন, UI ডিজাইন,UX  ডিজাইন
UI/UX  ডিজাইন, UI ডিজাইন,UX  ডিজাইন


এভাবে ই একটি সুন্দর মোবাইলের অ্যাপ স্ক্রিন ডিজাইন তৈরি করা হয়।যারা এই মোবাইলের অ্যাপ স্ক্রিন ডিজাইন টির মত অ্যাপ স্ক্রিন ডিজাইন করতে চান তারা উপরের সব গুলো নিয়ম ফলো করতে পারেন।



অথবা আমার এই কাজটির একটি টিউটোরিয়াল আছে আপনারা  সুন্দর মোবাইলের অ্যাপ স্ক্রিন ডিজাইন টিউটোরিয়াল টি দেখলে আরো সহজে এই ডিজাইন টি করতে পারবেন,আমি আশা করি।






আশা করি আপনারা  মোবাইলের অ্যাপ স্ক্রিন ডিজাইন ডিজাইন কিছুটা হলেও বুঝতে পেরেছেন। ভুল হলে কমেন্ট করে জানাবেন। কারন আমি নিজে এখন ও শিখি ভুল গুলো ধরে দিলে আমার জন্য খুব ভাল হবে। এবং বেশি খারাপ লাগলে ক্ষমার চোখে দেখবেন।

ভাল থাকবেন। দোয়া করবেন যেন সামনে আরো ভাল ভাল বিষয় আপনাদের সামনে নিয়ে আসতে পারি।

Tuesday, February 13, 2018

UI/UX ডিজাইনের মাধ্যমে একটি আইডি কার্ড(ID CARD ডিজাইন করা যায় অ্যাডবি ইলেস্ট্রেটর দিয়ে। (এসো ডিজাইন শিখি)

UI/UX ডিজাইনের মাধ্যমে  একটি আইডি কার্ড (ID CARD) ডিজাইন করা যায় অ্যাডবি ইলেস্ট্রেটর দিয়ে।
( এসো ডিজাইন শিখি )


হ্যালো বন্ধুরা,
কেমন  আছেন,আশা করি ভাল।

আজ আমি UI/UX ডিজাইনের মাধ্যমে  একটি আইডি কার্ড (ID CARD) কিভাবে অ্যাডবি ইলেস্ট্রেটরের মাধ্যমে ডিজাইন করতে হয় তা আপনাদের কে বলবো।


আইডি কার্ড (ID CARD) কি?
 ID CARD হচ্ছে কোন একটি কম্পানি বা কোন প্রতিঠানের কর্মিদের সহজে পরিচইয়ের জন্য একধরনের  ইনফর্মেশন যুক্ত কার্ড  দেওয়া হয় তাকে আইডি কার্ড(ID CARD) বলে। আইডি কার্ড(ID CARD)  মূলত কোন কম্পানির পরিচয় পত্র।



 আইডি কার্ডে কি কি ইনফর্মেশন থাকে?

উপরের আইডি কার্ড(ID CARD)  টি একটু খেয়াল করেন, এখানে আইডি কার্ডটিতে নিজের নাম, মোবাইল নাম্বার, ব্লাড গ্রুপ, ইমেইল,কার্ডটির মেয়াদ, ইত্যাদি এবং নিচে কম্পানির লোগো এবং নাম।

 আইডি কার্ডের সাইজ কত?


প্রথমে সাইজ নিয়ে কথা বলি আইডি কার্ড(ID CARD) এর সাইজ হল ৬০০*৯৭৫
প্রস্ত ৬০০পিক্সেল এবং উচ্চতা ৯৭৫ পিক্সেল হয়ে থাকে।


উপরের সাইজ দিয়ে একটি অ্যাডবি ইলেস্ট্রেটর সাহায্যে  ডুকমেন্ট তৈরি করি ।প্রথমে  file-new=new ducoment (ctrl+n) নিউ ডুকুমেন্ট  ওপেন হবে।যা দেখতে নিচের পিকটির মত।



তারপর,পেন টুলের সাহায্যে বাকা কার্ভ এর মত শেইপ ডিজাইন করি।কাল কালার ব্যবহার করতে হবে।
কালার কোড-0c2032।এবং পিছনে গ্রেডিয়ান কালার কোড-ec8143 ও f9e400, এই গ্রেডিয়ান কালার টি অ্যাডবি ইলেস্ট্রেটরে ডিফল দেয়া থাকে।



তারপর,আইডি কার্ড এর নিয়ম অনুযাই,একটি ছবি ব্যবহার করতে হয়।যা আমি একটি গোল শেইপের ভিতরে ক্লিপিং মাস্ক ব্যবহার করে ছবিটি ডিজাইন করেছি।
মাস্ক করার নিয়ম-

  1. একটি ছবি সিলেক্ট করুন
  2. একটি গোলার কার শেইপ (ellips tool) এর সাহায্যে তৈরি করুন
  3. গোলার কার শেইপটি কপি করুন
  4. একটা অন্যটার উপরে রাখুন
  5. নিচের টা উপরের টার থেকে একটু বড় রাখতে হবে
  6. ছবি টা অ্যাডবি ইলেস্ট্রেটরে নিয়ে আসেন
  7. ছবিটাকে enembed করে ফেলুন।
  8. তারপর ছবিটা উপরের গোলার কার শেইপের ওপর রাখুন
  9.  উপরের গোলার কার শেইপ ও ছবি টা সিলেক্ট করে মাউসের ডান বাটন ক্লিক করুন
  10. দেখবেন ক্লিপিং মাস্ক একটা অপশন আসছে,তাতে ক্লিক করে কাজ ওকে করুন।





তারপর,আইডি কার্ড এর নিয়ম অনুযাই,যার জন্য কার্ড তৈরি করা হচ্ছে তার নাম ও  ঠিকানা বা তার কনটাক্ট ইনফর্মেশন ব্যবহার করতে হয়।যার সাথে কিছু আইকন ব্যবহার করেছি।


যার কার্ড তার নাম উপরের পিকচার টিতে।নিচে তার ইনফর্মেশন -





শর্বশেষ যে কম্পানি বা প্রতিঠান কার্ড কার্ড প্রদান করবেন ঐ কম্পানি বা প্রতিঠানের নাম ও লোগো-





এভাবে ই আইডি কার্ড তৈরি করা হয়।যারা এই কার্ডটির মত কার্ড ডিজাইন করতে চান তারা উপরের সব গুলো নিয়ম ফলো করতে পারেন।

অথবা আমার এই কাজটির একটি টিউটোরিয়াল আছে আপনারা আইডি কার্ড ডিজাইন টিউটোরিয়াল টি দেখলে আরো সহজে এই ডিজাইন টি করতে পারবেন,আমি আশা করি।
নিচে আমি আইডি কার্ড ডিজাইন টিউটোরিয়াল ভিডিও লিংক দিয়ে দিচ্ছি-






আশা করি আপনারা আইডি কার্ড(ID CARD) ডিজাইন কিছুটা হলেও বুঝতে পেরেছেন। ভুল হলে কমেন্ট করে জানাবেন। কারন আমি নিজে এখন ও শিখি ভুল গুলো ধরে দিলে আমার জন্য খুব ভাল হবে। এবং বেশি খারাপ লাগলে ক্ষমার চোখে দেখবেন।
ভাল থাকবেন। দোয়া করবেন যেন সামনে আরো ভাল ভাল বিষয় আপনাদের সামনে নিয়ে আসতে পারি।