স্ক্রিন বৈশিষ্ট্য জন্য Illustrator সিসি 2015 রপ্তানি ব্যবহার করুন

যদি Illustrator দিয়ে কাজ করার এক দিক থাকে যা আমি সত্যিই উপভোগ করি না তা হল লাইন শিল্পকে মোবাইল বা ওয়েবের জন্য svg চিত্র রূপান্তর করা। এক্সপোর্ট> এক্সপোর্ট মেনু হিসাবে ব্যবহার করা এবং, নিষ্ঠুরভাবে সৎ হতে, ওয়েব ফিচারের জন্য সংরক্ষণ - এক্সপোর্ট> ওয়েব সংরক্ষণ করুন - ব্যবহার করা ঠিক ছিল না।

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

স্ক্রিনের এক্সপোর্ট ফর এক্সপোর্ট প্যানেল - এবং অ্যাসেট এক্সপোর্ট প্যানেল, যা জুন 2016 এ ইলিটার্টার সি সি ২011 তে চালু করা হয়েছিল। এই "কিভাবে" আমি আপনাকে উভয় কিভাবে ব্যবহার করতে দেখব। বৈশিষ্ট্য। চল শুরু করি.

01 এর 04

কিভাবে Adobe Illustrator সিসি 2015 স্ক্রিনের জন্য রপ্তানি অ্যাক্সেস করতে

স্ক্রিনের জন্য রপ্তানি ডায়লগ বাক্স ব্যবহার করে আউটপুট আর্টবোর্ড।

Illustrator 88 থেকে একজন Illustrator ব্যবহারকারী হওয়ার পরে আমি মনে করি আপনি ওয়েব এবং মোবাইল ইন্টারফেস এবং প্রকল্পগুলির জন্য Illustrator কে একটি গুরুতর নকশা টুল হিসাবে বিবেচনা করতে আমার অনিচ্ছা বুঝতে পারেন।

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

মোবাইল প্রকল্পগুলির জন্য SVG ইমেজগুলির ডিজাইন এবং বৃদ্ধি নির্ভরতার জন্য মোবাইল-প্রথম পদ্ধতির আবির্ভাবের সাথে, ইলাস্ট্রেটর আমার SVG "টুল" -এ যান এবং UI ডিজাইন কর্মপ্রবাহে একটি গুরুত্বপূর্ণ স্টপ হয়ে ওঠে।

এখনও, মোবাইলের জন্য সম্পদ এক্সপোর্ট করতে হলে, স্কেচ 3 এবং ফটোশপ সিও ২013 আমার পছন্দের সরঞ্জাম। চিত্রশিল্পী স্ক্রিন মেনু জন্য সত্যিই নিফটি এক্সপোর্ট সঙ্গে জুন 2016 সালে তালিকা প্রবেশ করানো

উপরের উদাহরণে, আমি একটি আইফোন জন্য দুই পর্দার নির্ধারিত আছে এবং তারা "হোম" এবং "স্থান" নামে পৃথক আর্টবোর্ডে হয়। তাদের আউটপুট করার জন্য, আমি স্ক্রিনের জন্য File> Export> Export নির্বাচন করেছি স্ক্রিনের জন্য রপ্তানি ডায়ালগ বক্স খোলে।

02 এর 04

স্ক্রিন ডায়ালগ বাক্সের জন্য রপ্তানি কিভাবে ব্যবহার করবেন

স্ক্রিনের জন্য সংরক্ষণ করুন ডায়ালগ বাক্সে কিছু সহজ পছন্দগুলি তৈরি করে iOS এবং Android এর জন্য আউটপুট আর্টবোর্ড।

যখন ডায়লগ বাক্সটি প্রদর্শিত হবে, তখন নির্বাচিত প্রতিটি আর্টবোর্ডে ক্লিক করুন। এটি তারপর একটি চেক চিহ্ন খেলা হবে। আপনি এটি নির্বাচন করতে এবং এটি পরিবর্তন করতে একটি আর্টবোর্ডের নামটি ডাবল ক্লিক করতে পারেন। আপনার আর্টবোর্ডগুলি "আর্টবোর্ড 1" এবং "আর্টবোর্ড ২" নামকরণ করা হয়েছে কিনা তা জানতে এটি একটি ভাল জিনিস যা পরিষ্কারভাবে আপনাকে কিছুই বলে না।

নির্বাচন এলাকার আপনার তিনটি পছন্দ আছে:

রপ্তানি ক্ষেত্রটি আপনাকে আউটপুটের জন্য গন্তব্য ফোল্ডার নির্বাচন করতে দেয়। ডিফল্ট ফোল্ডারটি Illustrator নথির বর্তমান অবস্থান হবে।

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

একবার আপনি যখন iOS বা Android নির্বাচন করবেন তখন সেই প্ল্যাটফর্মে উপলব্ধ সমস্ত রেজুলেশন অন্তর্ভুক্ত করা হবে। আইওএসএর তালিকাটি রেটিনা ডিস্পেসের জন্য স্কেলিংয়ের কার্যাবলী দেখাবে এবং অ্যান্ড্রয়েড সিলেকশনটি হবে .75x থেকে 4x পর্যন্ত যেগুলি প্রতি অ্যান্ড্রয়েড ডিভাইসটি সেখানে সেখানে বসে থাকবে।

যদি আপনি এমন একটি বিন্যাস দেখান যা আপনি সরাতে চান, "এক্স" ক্লিক করুন। যদি আপনি একটি যোগ করতে চান + + স্কেল যোগ করুন বোতামটি ক্লিক করুন।

সমাপ্ত হলে, অ্যাস্ট্রোন্ট অ্যাস্টবোর্ড বোতামটি ক্লিক করুন এবং প্রসেস শেষ হলে একটি প্রগতির বার আপনাকে দেখাবে।

04 এর 03

Adobe Illustrator CC 2015 থেকে স্ক্রিন ফাইলগুলির জন্য এক্সপোর্ট ব্যবহার করে।

এডিটার এক্সপেরিয়েন্স ডিজাইনের মতো ফাইলটি যে কোনও প্রোটোটাইপিং অ্যাপ্লিকেশনগুলিতে সহজেই যোগ করা যায়।

স্ক্রিনের জন্য এক্সপোর্টের ফলাফলগুলি পরীক্ষা করার পরে, আপনি আবিষ্কার করবেন যে প্রতিটি স্ক্রিনের একটি ফ্ল্যাটেড সংস্করণে ইলাস্ট্রেটারের আউটপুট রয়েছে। পৃষ্ঠায়, এটি একটি বিট দুর্বল বলে মনে হতে পারে, বিশেষ করে যদি আপনি ছবির মত বিট এবং টুকরা সবগুলি রপ্তানি করার জন্য Illustrator আশা করেন।

আপনি যদি পিছনে যান এবং মুহূর্তের জন্য এটি মনে করেন, এটি আসলে আপনি ঠিক কি প্রয়োজন কারণ আপনি একটি প্রোটোটাইপিং অ্যাপ্লিকেশন যেমন অ্যাডোব অভিজ্ঞতা ডিজাইন , নীতিমালা, Atomic.io , UXPin বা অন্যান্য প্রোটোটাইপিং অ্যাপ্লিকেশন এই আউটপুট ব্যবহার করতে পারেন

এই উদাহরণে, আমি অ্যাডোব এক্সপেরিয়েন্স ডিজাইন (XD) ব্যবহার করছি একটি সহজ ক্লিক-থ্রু তৈরি করতে। প্রসেসের প্রথম ধাপ হল আইফোন 6 আকার নির্বাচন করা যা ইলাস্ট্রেটার ইন্টারফেসের আকারের সাথে মিলে যায়

ইন্টারফেস খুললে, আমি আর্টবোর্ডের সরঞ্জামটি নির্বাচন করে আরেকটি আর্টবোর্ড জুড়তে পেস্টবোর্ডে একবার ক্লিক করেছিলাম। এরপর আমি তাদের "হোম" এবং "প্লেস" নামকরণ করি, প্রতিটি আর্টবোর্ড নির্বাচন করে এবং PNG চিত্রটি অ্যালাস্ট্র্যাটর থেকে আর্টবোর্ডে আমদানি করে।

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

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

আমি এই পৃষ্ঠাটি হটস্পটের সাথে পুনরাবৃত্তি করে জায়গা পৃষ্ঠাতে। একমাত্র পার্থক্য ছিল ট্রানজিশনটি ডান দিকে ধাক্কা দেওয়া। আমি প্লে বোতাম ক্লিক করার পরে আমি আমার প্রোটোটাইপ পরীক্ষিত।

04 এর 04

Adobe Illustrator CC 2015 এ রপ্তানি সম্পদ প্যানেলে কিভাবে ব্যবহার করবেন

কাস্টম আইকন অ্যাসপিট এক্সপোর্ট প্যানেল ব্যবহার করে SVG ফাইল হিসাবে রপ্তানি করা যেতে পারে।

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

ব্যথা পয়েন্ট আইকন ছিল। Illustrator একটি মহান ভেক্টর অঙ্কন অ্যাপ্লিকেশন কিন্তু আউটপুট, আসুন 10 টি আইকন, 40 অথবা 50 টির মধ্যে একটি পৃষ্ঠায়, প্রতিটি SVG ইমেজ হিসাবে সংরক্ষণ করা প্রয়োজন। এই SVG প্যানেল থেকে ধারাবাহিক ভ্রমণের জন্য ধন্যবাদ স্বাভাবিকের চেয়ে আরো সময় প্রয়োজন। এই ব্যথা পয়েন্ট এখন অতীত একটি জিনিস।

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

প্রতিটি আইটেম নির্বাচন করুন রপ্তানি সেটিংস এলাকায়, বা Shift কী চেপে ধরে এবং প্রতিটি ক্লিক করে তাদের সব নির্বাচন করুন আপনার বিন্যাস নির্বাচন করুন - এই উদাহরণে, আমি SVG- চয়ন করেছি এবং রপ্তানি বোতামটি ক্লিক করুন। নির্বাচিত আইটেমগুলি একই অবস্থানে SVG ফাইলের মতো আউটপুট হবে যেমনটি Illustrator ফাইল হিসাবে।

কোথায় এই পুরো প্রক্রিয়া এমনকি neater এমনকি আপনি সম্পদ এক্সপোর্ট প্যানেল ব্যবহার করতে হবে না। যদি আপনি প্যানেলের নীচের অংশে Save for Screens বাটনে ক্লিক করেন তবে ডায়লগ বক্সটি খোলে।

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