আপনার অ্যাপ্লিকেশন আইকন ডিজাইন এবং পূর্বরূপ

1. ভূমিকা

অনুসরণ

শেষ আপডেট: ০৮/০৪/২২

অ্যান্ড্রয়েড ১৩ থেকে শুরু করে, ব্যবহারকারীরা তাদের অ্যাডাপ্টিভ লঞ্চার আইকনগুলিকে থিম করতে পারেন। এই বৈশিষ্ট্যের সাহায্যে, সমর্থিত অ্যান্ড্রয়েড লঞ্চারগুলিতে অ্যাপ আইকনগুলিকে ব্যবহারকারীর পছন্দের ওয়ালপেপার এবং অন্যান্য থিমের রঙ উত্তরাধিকারসূত্রে রঙ করা হয়।

আপনার অ্যান্ড্রয়েড অ্যাপের জন্য প্রয়োজনীয় সমস্ত সিস্টেম অ্যাসেট সহজেই তৈরি করুন, যার মধ্যে নতুন অ্যাডাপ্টিভ কালার আইকনও রয়েছে।

তুমি কি শিখবে

  • বিভিন্ন ধরণের অ্যাপ আইকন সম্পর্কে ধারণা এবং সেগুলির জন্য ডিজাইনের টিপস।
  • অ্যান্ড্রয়েড লঞ্চার ফিগমা টেমপ্লেট কীভাবে ব্যবহার করবেন।
  • অ্যান্ড্রয়েড স্টুডিও অ্যাসেট জেনারেটর কীভাবে ব্যবহার করবেন।
  • অ্যান্ড্রয়েড স্টুডিও এমুলেটর ব্যবহার করে আপনার লঞ্চার আইকনটি কীভাবে প্রিভিউ করবেন।

পূর্বশর্ত

  • ফিগমার প্রাথমিক জ্ঞান
  • ঐচ্ছিক: অ্যাপ আইকন আর্টওয়ার্ক (ফোরগ্রাউন্ড, ব্যাকগ্রাউন্ড এবং একরঙা)

তোমার যা লাগবে

2. শুরু করুন

সেটআপ

শুরু করার জন্য, আপনাকে অ্যান্ড্রয়েড অ্যাপ আইকন ফিগমা ফাইলটি অ্যাক্সেস করতে হবে।

প্রথমে, ফিগমাতে সাইন ইন করুন অথবা একটি অ্যাকাউন্ট তৈরি করুন

ফিগমা কমিউনিটি থেকে ডুপ্লিকেট

অ্যান্ড্রয়েড লঞ্চার টেমপ্লেট ফাইলে নেভিগেট করুন অথবা ফিগমা কমিউনিটির মধ্যে মাইগ্রেটিং টু ভ্যারিয়েবল ফন্ট অনুসন্ধান করুন। আপনার ফাইলগুলিতে ফাইলটি অনুলিপি করতে উপরের ডানদিকের কোণায় Get a Copy এ ক্লিক করুন।

35022ce2efffc29c.png সম্পর্কে

টেমপ্লেট ব্যবহার করে

অ্যান্ড্রয়েড আইকন টেমপ্লেটটিতে দুটি পৃষ্ঠা রয়েছে:

  • কভার পৃষ্ঠাটি সংক্ষেপে প্রাসঙ্গিক ধারণা এবং টেমপ্লেটটি কীভাবে ব্যবহার করবেন তা কভার করে।
  • টেমপ্লেট পৃষ্ঠাটিতে আপনার প্রয়োজনীয় সম্পদ তৈরি করার জন্য প্রয়োজনীয় সবকিছু রয়েছে, যা তিনটি ফ্রেমে বিভক্ত (রঙ, আকৃতি, প্লে স্টোর)।

e0182922e07c80f5.png

দ্রষ্টব্য: বাম স্তর প্যানেলে, বেশিরভাগ স্তর এবং গোষ্ঠীগুলি লক করা আছে; এগুলি লক থাকা উচিত। (আপনি আনলক করা শিল্পকর্ম গোষ্ঠীর মধ্যে শিল্পকর্ম স্থাপন করতে সক্ষম হবেন।)

কিন্তু সম্পদ তৈরিতে ঝাঁপিয়ে পড়ার আগে, আসুন দেখে নেওয়া যাক আমরা কী তৈরি করব...

৩. অ্যান্ড্রয়েড সিস্টেম আইকন

1b8d4ebe587e89a0.png সম্পর্কে

লঞ্চার আইকন

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

অভিযোজিত আকৃতি

একটি অ্যাডাপটিভ আইকন, অথবা AdaptiveIconDrawable , ডিভাইসের ক্ষমতা এবং ব্যবহারকারীর থিমের উপর নির্ভর করে ভিন্নভাবে প্রদর্শিত হতে পারে। অ্যাডাপটিভ আইকনগুলি প্রাথমিকভাবে হোমস্ক্রিনে লঞ্চার দ্বারা ব্যবহৃত হয়, তবে শর্টকাট, সেটিংস অ্যাপ, শেয়ারিং ডায়ালগ এবং ওভারভিউ স্ক্রিনেও ব্যবহার করা যেতে পারে।

8ae89f6ed03eaf57.png সম্পর্কে

একটি অ্যাডাপ্টিভ আইকন বিভিন্ন ডিভাইস মডেলে বিভিন্ন আকার প্রদর্শন করতে পারে। উদাহরণস্বরূপ, এটি একটি OEM ডিভাইসে একটি বৃত্তাকার আকৃতি প্রদর্শন করতে পারে এবং অন্য ডিভাইসে একটি স্কুইর্কেল প্রদর্শন করতে পারে। প্রতিটি ডিভাইস OEM-কে একটি মাস্ক প্রদান করতে হবে, যা সিস্টেমটি সমস্ত অ্যাডাপ্টিভ আইকনকে একই আকৃতিতে রেন্ডার করতে ব্যবহার করে।

আকৃতির সাথে খাপ খাইয়ে নেওয়ার ক্ষমতা সিস্টেমটিকে ব্যবহারকারীর মিথস্ক্রিয়ার সাথে বিভিন্ন অ্যানিমেশন প্রভাব প্রয়োগ করতে দেয়।

অভিযোজিত রঙ

অভিযোজিত আইকনগুলি এখন ব্যক্তিগতকৃত থিমযুক্ত অ্যাপ আইকনগুলিকে অনুমতি দেওয়ার জন্য গতিশীল রঙ ব্যবহার করতে পারে।

যদি কোনও ব্যবহারকারী থিমযুক্ত অ্যাপ আইকন সক্রিয় করে থাকেন (অন্য কথায়, সিস্টেম সেটিংসে থিমযুক্ত আইকন টগল চালু করে), এবং লঞ্চারটি এই বৈশিষ্ট্যটি সমর্থন করে, তাহলে সিস্টেমটি টিন্টের রঙ নির্ধারণ করতে ব্যবহারকারীর নির্বাচিত ওয়ালপেপার এবং থিমের রঙ ব্যবহার করে।

381ea3ee1c973b4c.png - [অনলাইন].

আকৃতির সাথে খাপ খাইয়ে নেওয়া আইকনগুলির মতো, অভিযোজিত রঙের আইকনগুলি একটি অগ্রভাগ এবং পটভূমি দিয়ে গঠিত, শুধুমাত্র একটি একরঙা অগ্রভাগ আইকন সম্পদ সরবরাহ করা প্রয়োজন, সিস্টেমটি এক্সট্র্যাক্ট করা রঙের স্কিম ব্যবহার করে পটভূমি এবং রঙ উভয়ের যত্ন নেবে।

আপনি নোটিফিকেশন আইকনের জন্য একই একরঙা আইকনটিও ব্যবহার করতে পারেন।

উত্তরাধিকার

পুরনো অ্যান্ড্রয়েড ভার্সন চালিত ডিভাইসগুলিকে সমর্থন করার জন্য অথবা অ্যাডাপ্টিভ বৈশিষ্ট্যগুলি (প্রাক-8.0) সমর্থন করে না এমন ডিভাইসগুলিকে সমর্থন করার জন্য লিগ্যাসি আইকনগুলি অন্তর্ভুক্ত করা উচিত।

এগুলিতে ফোরগ্রাউন্ড এবং ব্যাকগ্রাউন্ড রিসোর্স থাকবে না এবং একটি ফ্রিফর্ম আকৃতি থাকতে পারে। আপনি যদি প্রদত্ত টেমপ্লেটটি ব্যবহার করেন, তাহলে চূড়ান্ত অভিযোজিত আকৃতির শিল্পকর্মটি আপনার লিগ্যাসি আইকনের জন্য প্রয়োজনীয় আকারে রপ্তানি করা হবে।

d29acf3d7ec8207c.png সম্পর্কে

বিজ্ঞপ্তি আইকন

নোটিফিকেশন হলো এমন একটি বার্তা যা অ্যান্ড্রয়েড আপনার অ্যাপের UI এর বাইরে প্রদর্শন করে ব্যবহারকারীকে রিমাইন্ডার, অন্যদের কাছ থেকে যোগাযোগ বা আপনার অ্যাপ থেকে অন্যান্য সময়োপযোগী তথ্য প্রদান করে। সিস্টেমটি বিভিন্ন অবস্থান এবং ফর্ম্যাটে বিজ্ঞপ্তি দেখায়, যেমন স্ট্যাটাস বারে একটি আইকন, নোটিফিকেশন ড্রয়ারে আরও বিস্তারিত এন্ট্রি, অ্যাপের আইকনে ব্যাজ হিসাবে এবং জোড়াযুক্ত পরিধেয় ডিভাইসগুলিতে স্বয়ংক্রিয়ভাবে।

a7fad196a542c189.png সম্পর্কে

শিল্পকর্ম সংরক্ষণ করুন

গুগল প্লে এবং অন্যান্য গুগল প্রচারমূলক চ্যানেলে আপনার অ্যাপটি হাইলাইট এবং প্রচার করতে আপনি একটি ফিচার গ্রাফিক, স্ক্রিনশট, একটি সংক্ষিপ্ত বিবরণ এবং ভিডিও ব্যবহার করতে পারেন।

অ্যাপ আইকনটি আপনার অ্যাপের লঞ্চার আইকনটিকে প্রতিস্থাপন করবে না তবে এটি একটি উচ্চ-বিশ্বস্ততা, উচ্চ-রেজোলিউশন সংস্করণ হওয়া উচিত।

লঞ্চার আইকনের মতো, শিল্পকর্ম পুরো সম্পদ স্থান জুড়ে রাখতে পারে, অথবা আপনি কীলাইন গ্রিডে লোগোর মতো শিল্পকর্মের উপাদানগুলি ডিজাইন এবং স্থাপন করতে পারেন।

আপনার স্টোর তালিকা প্রকাশ করার জন্য আপনাকে অবশ্যই 512x512 px বর্গাকার অ্যাপ আইকন প্রদান করতে হবে। আপনি যদি অ্যান্ড্রয়েড অ্যাপ আইকন টেমপ্লেট ব্যবহার করেন, তাহলে এটি অ্যাডাপটিভ শেপ আর্টওয়ার্ক ব্যবহার করে এক্সপোর্টে প্রদান করা হবে।

৪. ডিজাইনের সেরা অনুশীলন

লঞ্চার আইকনগুলি ব্যবহারকারীর জন্য আপনার অ্যাপটি চালু করে। আপনার অ্যাপে প্রবেশের জন্য, এগুলি অবশ্যই চেনা এবং পঠনযোগ্য হতে হবে। আপনার লঞ্চার আইকনে এই গুণাবলী নিশ্চিত করার জন্য এখানে কিছু সেরা অনুশীলন রয়েছে।

শিল্পকর্ম সহজ রাখুন। একাধিক স্তর, অনেক প্রভাব এবং টেক্সট এড়িয়ে চলুন। ছোট আকারে এই বিবরণগুলি হারিয়ে যাবে অথবা দেখা কঠিন হবে। 6295287d18a6dc89.png সম্পর্কে

জটিল আকার এড়িয়ে চলুন। এর মধ্যে লোগোও অন্তর্ভুক্ত। সম্ভব হলে একটি সরলীকৃত লোগো ব্যবহার করুন, অথবা আপনার ব্যবহারকারীদের আপনার অ্যাপের সাথে সংযুক্ত করার জন্য প্রতীকীকরণ বিবেচনা করুন। একটি পঠনযোগ্য এবং স্বতন্ত্র আকৃতি ব্যবহারকারীদের জন্য ঐক্য তৈরি করতে সাহায্য করে যাতে তারা বিভিন্ন প্রেক্ষাপট থেকে (অভিযোজিত রঙ এবং বিজ্ঞপ্তি) সহজেই আপনার অ্যাপটি চিনতে পারে। 3084a344b34b47f0.png সম্পর্কে

একটি গ্রিড ব্যবহার করুন। ফুল ব্লিড ইলাস্ট্রেশন আর্টওয়ার্ক সহ, ক্রপ করার সময় ফোরগ্রাউন্ড আর্টওয়ার্কটি কাজ করবে কিনা তা নিশ্চিত করতে একটি গ্রিড বা কীলাইন ব্যবহার করুন। e99f2fabd60e52d9.png

কন্ট্রাস্ট বিবেচনা করুন । অভিযোজিত আকৃতি এবং লিগ্যাসি আইকনের জন্য, নিশ্চিত করুন যে আইকনের অগ্রভাগ এবং পটভূমিতে স্পষ্ট কন্ট্রাস্ট আছে। ভারী ড্রপ শ্যাডো ব্যবহার করা এড়িয়ে চলুন, যা সিস্টেম শ্যাডো বলে ভুল হতে পারে। bd62aae6d5414f2e.png সম্পর্কে

শিল্পকর্ম নিরাপদ অঞ্চলে রাখুন। ফোরগ্রাউন্ড অ্যাসেটগুলি 72x72 px এর মধ্যে রাখুন (যদি না আপনি ফুল ব্লিড করতে চান)। ব্যাকগ্রাউন্ড 108x108 px এ রাখুন। দ্রষ্টব্য: আইকন টেমপ্লেট আর্টওয়ার্ক ফ্রেমটি 72x72 px এর চেয়ে বড় যাতে আপনি আইকন আর্টওয়ার্ক তৈরি করতে পারেন। স্পেসিফিকেশন অনুসারে সম্পদগুলির আকার পরিবর্তন করা হবে। 78c8a6d59f9320bc.png সম্পর্কে

ভেক্টর ফর্ম্যাট। রাস্টার ফর্ম্যাটের (যেমন PNG, JPG, এবং GIF ফাইল) পরিবর্তে ভেক্টর ফর্ম্যাটে (যেমন SVG, AI, PDF, এবং EPS ফাইল) শিল্পকর্ম ব্যবহার করার চেষ্টা করুন। এটি নিশ্চিত করে যে আপনার শিল্পকর্ম নতুন বৈশিষ্ট্যের সাথে সামঞ্জস্যপূর্ণ এবং সম্পাদনা করা সহজ। 4c6aae783bb5e415.png সম্পর্কে

৫. অভিযোজিত রঙ এবং বিজ্ঞপ্তি আইকন

এবার আপনার নিজস্ব অ্যান্ড্রয়েড সিস্টেম আইকন তৈরি করার পালা।

  1. অ্যান্ড্রয়েড অ্যাপ আইকন ফিগমা ফাইলটি খুঁজুন।
  2. ফাইলের মধ্যে, অ্যাডাপ্টিভ কালার ফ্রেমটি খুঁজে বের করুন। বাম লেয়ার প্যানেলে অ্যাডাপ্টিভ কালার > কম্পোনেন্টস > আর্ট > আইকন আর্টওয়ার্ক এরিয়া > থিমড আইকন আর্ট <আপনার আইকন যোগ করুন > খুঁজে বের করুন। যদি আপনার একটি একরঙা আইকন প্রস্তুত থাকে, তাহলে নমুনা বাগড্রয়েড আইকনটি প্রতিস্থাপন করতে এটি এখানে কপি করুন এবং ধাপ 6 এ যান। 4249cd4ed81cc44b.png সম্পর্কে
  3. যদি আপনার একরঙা আইকন না থাকে, তাহলে আপনার অ্যাপের সাথে সম্পর্কিত একটি লোগো বা আইকন দিয়ে শুরু করুন। আপনার আইকনটি আপডেট করার জন্য ডিজাইন টিপসগুলি দেখুন। প্রথমে জটিল আকারগুলি সরলীকরণ এবং এড়িয়ে চলুন। উদাহরণস্বরূপ, এখানে অ্যাপ-মধ্যস্থ ব্যবহৃত চিত্রগুলি কম জটিল পাতার আকার দিয়ে সরলীকৃত করা হয়েছে। ছায়া এবং রেখার বিবরণ সাদা স্থান দিয়ে সিমুলেটেড করা হয়েছে। 2c92cd6e441e7396.png সম্পর্কে
  4. এখন, কীলাইন গ্রিড ব্যবহার করে সাইজিং আপডেট করুন। এখানে আমরা resize কে Scale এ সেট করেছি এবং নিশ্চিত করেছি যে আর্টওয়ার্কটি ফোরগ্রাউন্ড সেফ জোনের মধ্যে আছে। টেমপ্লেটটি 4x এ আর্টওয়ার্কের সাথে সেট আপ করা হয়েছে এবং স্বয়ংক্রিয়ভাবে এক্সপোর্টের জন্য আকার পরিবর্তন করে, যাতে আপনি আপনার আইকনগুলিকে আরও বড় স্কেলে ডিজাইন করতে পারেন। 606367689d303633.png সম্পর্কে
  5. ফাইলটি মেটেরিয়াল থিম বিল্ডারের সাথে কাজ করার জন্য সেট আপ করা হয়েছে যাতে ডায়নামিক রঙের প্রিভিউ দেখা যায়। ফোরগ্রাউন্ড আইকন রঙের স্টাইলটি On-surface-variant এর সাথে সংযুক্ত করুন। f4a805802fc9b2f7.png সম্পর্কে
  6. এখন, প্লাগইন প্যানেল থেকে ম্যাটেরিয়াল থিম বিল্ডারটি খুলে, আপনি হয় সোর্স কালারটি এলোমেলো করতে পারেন অথবা এক্সট্রাক্ট করা সোর্স কালার ব্যবহার করে রঙগুলি আপডেট করার জন্য একটি ছবি যোগ করতে পারেন। b3a28c64e5488762.png সম্পর্কে
  7. বিভিন্ন রেজোলিউশনে অথবা হোম স্ক্রিনে এটি কেমন দেখাবে? টেমপ্লেটটি এমনভাবে সেট আপ করা হয়েছে যাতে আর্টওয়ার্ক ফ্রেমের মধ্যে রাখা আর্টওয়ার্ক বিভিন্ন প্রিভিউ প্রসঙ্গে প্রদর্শিত হয়।
  8. সিস্টেমটি নোটিফিকেশন হিসেবে একরঙা আইকন ব্যবহার করে এবং প্রিভিউতে সেভাবেই প্রদর্শিত হয়।

94e264c7bc7a881a.png সম্পর্কে

৬. অভিযোজিত আকৃতি এবং লিগ্যাসি আইকন

এখন, আমরা আইকনের ব্যাপক সমর্থন নিশ্চিত করার জন্য অভিযোজিত আকৃতি এবং লিগ্যাসি আইকন তৈরি করব।

  1. ফাইলের মধ্যে, Shape ফ্রেমটি খুঁজে বের করুন। বাম স্তর প্যানেলে Icon background <add your icon * খুঁজে বের করুন। যদি আপনার কাছে একটি আইকন প্রস্তুত থাকে, তাহলে নমুনা bugdroid আইকনটি প্রতিস্থাপন করতে এটি এখানে অনুলিপি করুন এবং ধাপ 5 এ যান।* যদি আপনার কাছে কোনও আইকন না থাকে, তাহলে আপনার অ্যাপের সাথে সম্পর্কিত একটি লোগো বা আইকন দিয়ে শুরু করুন অথবা একরঙা আইকনটি পুনরায় ব্যবহার করুন। 4249cd4ed81cc44b.png সম্পর্কে
  2. আইকনের সেরা অনুশীলনগুলি মাথায় রেখে ফোরগ্রাউন্ড আইকন আপডেট করুন। এখানে আমি মূল চিত্রের রঙগুলি ফিরিয়ে এনেছি, তবে বিবরণগুলি ন্যূনতম রেখেছি। 245853d7421f0f41.png সম্পর্কে
  3. এখন, কীলাইন গ্রিড ব্যবহার করে সাইজিং আপডেট করুন। এখানে আমরা resize কে Scale এ সেট করেছি এবং নিশ্চিত করেছি যে আর্টওয়ার্কটি ফোরগ্রাউন্ড সেফ জোনের মধ্যে আছে। 8e877043477b5fff.png সম্পর্কে
  4. অ্যাডাপ্টিভ শেপ অ্যাপ আইকনগুলির একটি স্বতন্ত্র ব্যাকগ্রাউন্ডও থাকতে পারে। এটি আইকনের স্তরগুলিকে নিরাপদে ক্রপ করতে এবং মিথস্ক্রিয়ায় সূক্ষ্ম নড়াচড়ার প্রভাব প্রদান করতে দেয়। আপনি অ্যান্ড্রয়েড স্টুডিওতে একটি কঠিন রঙের ব্যাকগ্রাউন্ড ব্যবহার এবং সংজ্ঞায়িত করতে পারেন। 2e3513c3cf827f52.png সম্পর্কে
  5. প্রিভিউ আপডেটের মাধ্যমে ফোরগ্রাউন্ড এবং ব্যাকগ্রাউন্ড একসাথে কেমন দেখায়, হোমস্ক্রিনে, বিভিন্ন ক্রপ করা আকারে এবং একটি লিগ্যাসি আইকন হিসেবে দেখানো হয়।

e933e6a6dba859a6.png সম্পর্কে

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

৭. রপ্তানি

দারুন, তুমি এখন তোমার অ্যাপ আইকন সহ টেমপ্লেটটি আপডেট করেছো! চলুন বাস্তবায়নের জন্য সেগুলো রপ্তানি করি..

  1. নিশ্চিত করুন যে ক্যানভাসে কিছুই নির্বাচিত নেই।
  2. ফিগমা মেনু > ফাইল > এক্সপোর্ট ( Shift + Cmd + E ) এ যান।
  3. এক্সপোর্ট মেনুতে, এক্সপোর্ট নিশ্চিত করুন। এটি টেমপ্লেট থেকে সম্পদগুলি ডাউনলোড করবে।

f510263d7cf38b80.png সম্পর্কে

রপ্তানিতে কী আছে?

এক্সপোর্ট করা সম্পদগুলিতে আপনার অ্যাপ আইকনটি বাস্তবায়নের জন্য প্রয়োজনীয় সমস্ত ফাইল রয়েছে, যা নিম্নরূপ:

  • ফিগমা অভিযোজিত রঙের জন্য একরঙা অগ্রভাগ আইকনটি একটি SVG ফাইল হিসেবে রপ্তানি করে, পাশাপাশি অভিযোজিত আকৃতির আইকনগুলির জন্য অগ্রভাগ এবং পটভূমি উভয়ই রপ্তানি করে।
  • ফিগমা রেজোলিউশন অনুসারে সংগঠিত বিভিন্ন মিপম্যাপ ডিরেক্টরিতে লিগ্যাসি আইকনও সরবরাহ করে।

f98accd8c1ce99fc.png সম্পর্কে

ব্যস! আপনার আইকনটি ডেভেলপমেন্টে পাঠানোর জন্য প্রস্তুত।

অথবা, যদি আপনি অ্যান্ড্রয়েড স্টুডিওর মধ্যে আপনার আইকনগুলির প্রিভিউ দেখতে চান এবং সেই SVG গুলিকে তাদের চূড়ান্ত সম্পদ বিন্যাসে রূপান্তর করতে চান, তাহলে পরবর্তী ধাপে যান।

৮. ইমেজ অ্যাসেট স্টুডিও ব্যবহার করুন

অ্যান্ড্রয়েড স্টুডিও দিয়ে শুরু করুন

1c70e1d460e8be34.png সম্পর্কে

  1. অ্যান্ড্রয়েড স্টুডিও ডাউনলোড এবং ইনস্টল করুন ..
  2. অ্যান্ড্রয়েড স্টুডিও চালু করুন।

অ্যান্ড্রয়েড স্টুডিও আপনাকে একটি নতুন প্রকল্প শুরু করার বা বিদ্যমান প্রকল্পগুলি নির্বাচন করার বিকল্পগুলি সম্পর্কে জিজ্ঞাসা করে।

  1. আপাতত একটি নতুন প্রকল্প নির্বাচন করুন। নিম্নলিখিত স্ক্রিনগুলি আপনাকে আপনার নতুন প্রকল্প সেট আপ করার পদ্ধতি সম্পর্কে জানাবে। c3a666acd93b7b07.png সম্পর্কে
  2. স্টার্টার টেমপ্লেটগুলি থেকে যেকোনো টেমপ্লেট নির্বাচন করুন, কারণ আমরা কেবল লঞ্চ আইকনগুলি দেখব। অনুসরণ
  3. এরপর, আপনার নতুন প্রকল্পের নাম দিন এবং Finish নির্বাচন করুন। নতুন প্রকল্পটি তৈরি হতে কয়েক মিনিট সময় লাগবে।

ইমেজ অ্যাসেট স্টুডিও ব্যবহার করুন

এখন আমরা অ্যাসেট স্টুডিও নামে একটি সহায়ক টুল ব্যবহার করে আপনার আইকনগুলি প্রকল্পে যুক্ত করতে পারি।

  1. এই টুলটি অ্যাক্সেস করতে, File মেনু > New > Image Asset নির্বাচন করুন। 5d379aab7d1bab51.png সম্পর্কে
  2. Image Asset Studio খুললে, Path এ ফোল্ডার আইকনটি নির্বাচন করে ফোরগ্রাউন্ড লেয়ারটি যোগ করুন। এক্সপোর্ট করা SVG ফাইলটি drawable-anydpi/ic_launcher.svg হিসেবে বেছে নিন। 4864e066f02b8ad.png সম্পর্কে
  3. ব্যাকগ্রাউন্ড লেয়ার ট্যাবটি নির্বাচন করুন এবং একইভাবে এক্সপোর্ট করা ব্যাকগ্রাউন্ড লেয়ারটি নির্বাচন করুন। বিকল্পভাবে, একটি সলিড কালার লঞ্চার ব্যাকগ্রাউন্ড পেতে অ্যাসেট টাইপ: রঙ নির্বাচন করুন। 6cdc173881a1fda3.png সম্পর্কে
  4. ফোরগ্রাউন্ড লেয়ারে ফিরে যান এবং ছবিটি নিরাপদ জোনের মধ্যে আছে কিনা তা দুবার পরীক্ষা করুন। আইকনটির আকার পরিবর্তন করুন যা দৃশ্যত সবচেয়ে ভালো কাজ করে। অনুসরণ
  5. হয়ে গেলে, Next এ ক্লিক করুন। এটি আপনার প্রকল্পের মধ্যে আইকনগুলি কোথায় রাখা উচিত তা জিজ্ঞাসা করবে (এটি ডিফল্ট অবস্থায় ছেড়ে দিন অথবা Main এ স্যুইচ করুন)। তারপর Finish এ ক্লিক করুন। আপনি res > drawable এর অধীনে আপনার লঞ্চার সম্পদগুলি খুঁজে পেতে সক্ষম হবেন। ডাবল ক্লিক করলে চূড়ান্ত ভেক্টর ড্রয়েবলগুলির একটি পূর্বরূপ খুলবে।

6c780144c7204425.png সম্পর্কে

  1. মনোক্রোম লেয়ার অ্যাসেটটি res/drawable অথবা res/drawable-v24- এ ম্যানুয়ালি কপি-পেস্ট করুন অথবা res ফোল্ডারে ডান-ক্লিক করে New > Vector Asset নির্বাচন করে ম্যানুয়ালি মনোক্রোম লেয়ারটি আমদানি করুন।
  2. res/mipmap-anydpi-v26/ic_launcher.xml এবং res/mipmap-anydpi-v26/ic_launcher_round.xml- এ বিদ্যমান android:monochrome="path/to/monochrome/asset যোগ করুন বা পরিবর্তন করুন যাতে সঠিক একরঙা সম্পদ নির্দেশ করা যায়।

৯. প্রিভিউ এবং রিসোর্স

এমুলেটরে প্রিভিউ করুন

আমরা এটি অ্যাপ প্রজেক্টে যুক্ত করার জন্য করেছি, যাতে আমরা একটি বাস্তব ডিভাইস বা এমুলেটরে প্রিভিউ দেখতে পারি! দেখা যাক আমাদের আইকনগুলি বাস্তবে কেমন দেখাবে।

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

চূড়ান্ত সম্পদ

দারুন, আপনি এমুলেটর ব্যবহার করে আপনার লঞ্চার আইকনটি ডিভাইসে কেমন দেখাবে তা পরীক্ষা করে দেখতে পেরেছেন এবং একটি অ্যাপ প্রজেক্টে যুক্ত করেছেন। এটি করার মাধ্যমে এগুলি তাদের চূড়ান্ত উৎপাদন আকারে রূপান্তরিত হয়েছে! কিন্তু তারা কোথায়?

একটি অ্যান্ড্রয়েড অ্যাপে সম্পদগুলি সম্পদ হিসেবে কাজ করে এবং রিসোর্স প্যানেল (সাধারণত বাম দিকে) খুলে তা খুঁজে পাওয়া যায়। অ্যাপটি গভীরভাবে অনুসন্ধান করুন, তারপর আপনার Res ফোল্ডারটি খুঁজুন। একটি মেনু খুলতে ডান ক্লিক করুন এবং Finder (Mac-এ) এ খুলুন নির্বাচন করুন, এটি একটি Finder উইন্ডো খুলবে। ঐচ্ছিকভাবে, আপনি একই প্রক্রিয়া ব্যবহার করে আপনার অ্যাপের বাকি সম্পদ রূপান্তর এবং পরীক্ষা করে কিছু উন্নয়ন এবং QA সময় বাঁচাতে পারেন। আপনি যদি আপনার অ্যাপের বাকি সম্পদ রূপান্তর করে থাকেন, তাহলে এই ফোল্ডারটি উন্নয়নের সাথে ভাগ করা যেতে পারে।

7a22d780b86d9713.png সম্পর্কে

১০. অভিনন্দন

দারুন কাজ, আপনি অ্যান্ড্রয়েড অ্যাপ তৈরি করতে প্রয়োজনীয় অ্যান্ড্রয়েড সিস্টেম আইকন সম্পর্কে শিখেছেন, নিজের আইকন ডিজাইন করেছেন, আইকন টেমপ্লেট রিসোর্স অন্বেষণ করেছেন, এবং সম্ভবত প্রোডাকশনের জন্য সম্পদের প্রিভিউ এবং রূপান্তর করতে অ্যান্ড্রয়েড স্টুডিওতে ডুব দিয়েছেন!

যদি আপনার কোন প্রশ্ন থাকে, তাহলে টুইটারে @MaterialDesign ব্যবহার করে যেকোনো সময় আমাদের জিজ্ঞাসা করতে দ্বিধা করবেন না।

আরও ডিজাইন কন্টেন্ট এবং টিউটোরিয়ালের জন্য youtube.com/MaterialDesign- এ আমাদের সাথেই থাকুন।