অ্যাডোব অভিজ্ঞতা ডিজাইন CC মধ্যে একটি উপাদান ডিজাইন কার্ড তৈরি করুন কিভাবে

গুগল থেকে উপাদান ডিজাইন স্পেসিফিকেশন মূলত এন্ড্রয়েড প্ল্যাটফর্মের মূল লক্ষ্য ছিল প্লাটফর্মের ডিজাইনের সুসংগততা সম্পর্কে একটি উপায় হিসাবে।

06 এর 01

অ্যাডোব অভিজ্ঞতা ডিজাইন CC মধ্যে একটি উপাদান ডিজাইন কার্ড তৈরি করুন কিভাবে

টম গ্রিন এর সৌজন্যে

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

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

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

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

চল শুরু করি.

06 এর 02

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

শুরু করতে আর্টবোর্ডের সরঞ্জাম এবং একটি আর্টবোর্ড টেমপ্লেট ব্যবহার করুন। টম গ্রিন এর সৌজন্যে

এক্সপেরিয়েন্স ডিজাইন সি.সি. (এক্সডি) এর স্টার্ট স্ক্রিন থেকে অ্যান্ড্রয়েড স্ক্রিন তৈরির কোন স্পষ্ট উপায় নেই। আমরা যখন এক্সডি খুলি তখন আমরা কি করতে পারি আইফোন 6 বিকল্পটি নির্বাচন করা এবং ইন্টারফেসটি খোলে যখন আমরা টুলবারের নীচের অংশে Artboard টুল নির্বাচন করি এবং প্রোপার্টি প্যানেলে নির্বাচনগুলি থেকে ডানদিকে অ্যান্ড্রয়েড মোবাইল নির্বাচন করি। তারপর আমরা নির্বাচন সরঞ্জামের উপর সুইচ, আইফোন আর্টবোর্ডের নাম একবার ক্লিক করুন এবং আর্টবোর্ড মুছে দিন। আর না.

XD এর বর্তমান সংস্করণে, আইফোন 6 এর পাশে একটি ছোট তীর আছে, যা ক্লিক করলে ড্রপ ডাউন মেনুটি খোলে। সেখানে থেকে আপনি অ্যান্ড্রয়েড মোবাইল সংস্করণ নির্বাচন করুন এবং অ্যানড্রইড মোবাইল আর্টবোর্ডটি ইন্টারফেসে খোলে।

কার্ডের জন্য আমাদের যথাযথ স্ক্রিনের খোলা আছে তা নিশ্চিত করার জন্য, আমরা সাধারণত স্কেচ 3 এর উপর মাথা তুলে থাকি এবং স্ট্যাটাস বার, এনওয়াই বার এবং এপ্লিকেশন বারটি উপকরণ ডিজাইন টেমপ্লেট থেকে আর্টবোর্ডের মধ্যে কপি ও পেস্ট করি। স্কেচ 3.2 এর মধ্যে রয়েছে একটি ম্যাট্রিকের ডিজাইন টেমপ্লেট ( ফাইল> টেমপ্লেট থেকে নতুন> উপাদান ডিজাইন ) এবং আরেকটি ভাল ফ্রি এক কাইল লেডব্যাটটার থেকে পাওয়া যায় যা আপনি এখানে পেতে পারেন। যদি আপনার স্কেচ না থাকে, তাহলে আপনি ফাইল> ওপেন UI কিট> Google সামগ্রীতে পাওয়া এক্সডি স্টিকারগুলি থেকে কপি এবং পেস্ট করতে পারেন। আপনি ফটোশপ, ইলাস্ট্রেটর, ইফেক্ট ও স্কেচ পরে ব্যবহারের জন্য Google থেকে তাদের ডাউনলোড করতে পারেন।

06 এর 03

একটি অ্যাডোবি এক্সডি সিসি আর্টবোর্ডে একটি উপাদান ডিজাইন কার্ড যোগ করা

ইউআই কিট অত্যন্ত উপকারী যে তারা উপাদান ডিজাইন স্পেসিফিকেশনের সাথে সামঞ্জস্যপূর্ণ। টম গ্রিনের সৌজন্যে

XD- এর সবচেয়ে দরকারী বৈশিষ্ট্য হল অ্যাপল আইওএস, গুগল ম্যাট্রিক্স এবং মাইক্রোসফট উইন্ডোজ এর জন্য UI কিটগুলির অন্তর্ভুক্তি। অনেকগুলি ক্ষেত্রে, তারা "র্যাপিড" শব্দটিকে "র্যাপিড প্রোটোটাইপিং" শব্দটি যুক্ত করে। পাশাপাশি তারা ডিজাইনারের কাজকে সহজ করে তোলে যে সাধারণ UI উপাদানে ক্রমাগতভাবে একটি ডিজাইন অ্যাপ্লিকেশন যেমন ফটোশপ, ইলাস্ট্রেটার বা স্কেচ।

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

আমরা এই সম্পর্কে কি ভালোবাসি তারা উপাদান ডিজাইন স্পেসিফিকেশন মেনে চলে যেমন বিষয়বস্তু ব্লক চশমা পাশাপাশি টেক্সট বিন্যাস এবং স্পেসিং স্পেকস টাইপোগ্রাফি বৈশিষ্ট মধ্যে প্রণীত।

আমরা চান কার্ড শৈলী নীচে বামে এক ছিল। আমরা কেবল আমাদের মাউস দিয়ে এটি marquee এবং ক্লিপবোর্ডে এটি অনুলিপি। দুর্ভাগ্যবশত, XD খোলা নথিগুলির জন্য একটি ট্যাবযুক্ত ইন্টারফেস ধারণ করে না। আমরা যা করছি তা খোলা ডকুমেন্ট উইন্ডোটি একটি বিট দ্বারা সরান যা আমরা কাজ করছি তা প্রকাশ করি, এটি নির্বাচন করুন এবং পেস্ট করুন দ্রুত খোলা এক্সডিডি ডকুমেন্টের মধ্যে স্যুইচ করার আরেকটি উপায় হলো কমান্ড-টিপুন

06 এর 04

অ্যাডোব অভিজ্ঞতা ডিজাইন CC মধ্যে একটি উপাদান ডিজাইন উপাদান সম্পাদনা কিভাবে

একটি XD প্রকল্প যুক্ত প্রতিটি UI উপাদান গোষ্ঠীভুক্ত করা হয়। সম্পাদনা করার পূর্বে বস্তুটি অনির্দিষ্টভাবে বন্ধ করতে ভুলবেন না। টম গ্রিন এর সৌজন্যে

যখন XD কার্ডটি ক্লিপবোর্ড থেকে আসে তখন এটির সাথে কাজ করা শুরু করে না। আপনি যা করতে চান তা প্রথম কার্ড কার্ডটি ভাগ করে নেওয়ার জন্য কারণ আপনি কার্ডটি রচনা করার জন্য বিট এবং টুকরাগুলির অ্যাক্সেস প্রয়োজন। এটি করার জন্য, কার্ড নির্বাচন করুন এবং বস্তু নির্বাচন করুন> Ungroup করুন অথবা Shift-Command-G চাপুন

আপনার কার্ড এখন তিনটি টুকরা গঠিত হয়:

প্রথম ধাপ হল হালকা ধূসর বাক্সটি মুছে ফেলা। এর একমাত্র উদ্দেশ্য হল ইমেজটির জন্য একটি স্থানধারক হিসেবে কাজ করা, যা আপনি যদি পছন্দ করেন তবে ঐচ্ছিক।

পাঠ্যটি সঙ্গে বাক্সটি আসলে 50% অপাসিটি সঙ্গে একটি গাঢ় ধূসর হয়। এই বক্সটি টেক্সট ব্যাকগ্রাউন্ড হিসাবে ব্যবহার করা যেতে পারে এবং আপনি রং এবং বক্সের অপাসিটি পরিবর্তন করতে পারেন।

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

কিভাবে এই কার্ডের বিশ্রাম অবস্থা এটি একটি ছায়া প্রয়োজন এছাড়াও হিসাবে দেখতে। স্পিকার এটি পরিষ্কার করে দেয় যে ২ পিক্সেলের কার্ডের বিশ্রামের স্থান রয়েছে। এটি যোগ করতে, কালো পটভূমি আকৃতিটি নির্বাচন করুন এবং বৈশিষ্ট্য প্যানেলে Y এবং B (ব্লার) মানগুলিকে 2 সেট করুন।

06 এর 05

অ্যাডোবি এক্সডি সি-সি-তে উপাদান ডিজাইন কার্ডের একটি ছবি কিভাবে যোগ করবেন

ইমেজ সঙ্গে কাজ করার একটি উপায় আমদানি ইমেজ মাস্ক ব্যবহার করার জন্য স্থানধারক ব্যবহার করা হয়। টম গ্রিন এর সৌজন্যে

কার্ডটি জানতে 344 পিক্সেল চওড়া এবং ইমেজ এলাকাটি 150 পিক্সেল উচ্চ ( হালকা ধূসর বাক্সের অর্ধেক উচ্চতা ) আমরা ফটোশপের ছবিটি খুলি, এটি আকারের আকারে আটকিয়ে এবং ফটোশপের এক্সপোর্ট হিসাবে ডায়ালগে @ 2x বিকল্প ব্যবহার করে এটি সংরক্ষণ করে বাক্স। ছবিটি অ্যাডোব এক্সডিতে আমদানি করা হয়েছিল

তারপর আমরা পেস্টবোর্ডে ছবির উপর হালকা ধূসর বাক্সটি টেনে নিয়ে যান এবং অবজেক্ট> মাস্ক শেপের সাথে নির্বাচন করুন। ফলাফল আকার আকারের বৃত্তাকার কোণে আপ পিকিং ছিল। তারপর আমরা ছবিটি তার চূড়ান্ত অবস্থানে সরানো।

ছবিটির জায়গায়, আমরা তারপর মাঝারি ধূসর বাক্সের পটভূমির রঙ পরিবর্তন করে, টেক্সট এবং লিঙ্ক পাঠ্যের রঙ পরিবর্তন করেছি।

06 এর 06

অ্যাডোব এক্সডি সিসি গ্রিড বৈশিষ্ট্য ব্যবহার করে

উপাদানগুলির সুনির্দিষ্ট বসানো জন্য অ্যাডোব অভিজ্ঞতা ডিজাইন সী সী গ্রিড বৈশিষ্ট্য ব্যবহার করুন টম গ্রিন এর সৌজন্যে

কার্ড সম্পূর্ণ সঙ্গে এটি এখন উপাদান ডিজাইন বৈশিষ্ট অনুযায়ী সঠিকভাবে স্থাপন করা প্রয়োজন। এর মানে হল কার্ডের উভয় পাশে 8 পিক্সেল আছে এবং কার্ডটি অ্যাপ্লিকেশন বারের নীচের 8 পিক্সেল হতে হবে। এটি করার জন্য, আর্টবোর্ডের নামটি একবার ক্লিক করুন এবং, বৈশিষ্ট্যাবলী প্যানেলে, গ্রিড নির্বাচন করুন। গ্রিড আর্টবোর্ডের উপর প্রদর্শিত হয়

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

গ্রিড দৃশ্যমানের সাথে, কার্ডে ক্লিক করুন এবং এটি তার চূড়ান্ত অবস্থানে স্থানান্তর করুন।

শেষ করতে, আমরা কার্ডটি নির্বাচন করেছি, পুনরাবৃত্তি গ্রিড বোতামটি ক্লিক করেছি এবং কার্ডের মধ্যবর্তী দূরত্বটিও 8 পিক্সেল হিসাবে পরিবর্তিত করেছি।