আইকন ডিজাইনের জন্য সেরা কর্মপ্রবাহ: বড় শুরু করবেন, বা ছোট শুরু করবেন?


18

আইকনগুলি ডিজাইন করার সময় যা বিভিন্ন আকারে বিতরণ করা প্রয়োজন, আপনি কি আরও ছোট আকারে শুরু করেন, তারপরে বড় আকারগুলি পর্যন্ত স্কেল করেন? বা আপনি বড় শুরু এবং স্কেল ডাউন?

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

ওএস এক্সের জন্য, মানক অ্যাপ্লিকেশন আইকন মাপগুলি হ'ল :

  • 16 × 16, 32 × 32, 128 × 128, 256 × 256, 512 × 512 এবং 1024 × 1024।

উইন্ডোজ 7 এর জন্য স্ট্যান্ডার্ড অ্যাপ্লিকেশন আইকন আকারগুলি হ'ল :

  • 16x16, 32x32, 48x48, 64x64 এবং 256x256।

আইওএসের জন্য স্ট্যান্ডার্ড অ্যাপ্লিকেশন আইকন আকারগুলি হ'ল :

  • 29x29, 48x48, 57x57, 58x58, 72x72, 96x96, 114x114, 144x144, 512x512 এবং 1024x1024।

অ্যান্ড্রয়েডের জন্য স্ট্যান্ডার্ড অ্যাপ্লিকেশন আইকন আকারগুলি হ'ল :

  • 36x36, 48x48, 72x72, 96x96 এবং 512x512।

আইওএস এবং অ্যান্ড্রয়েডের জন্য, আইকন আকারগুলি আরও কিছুটা অবাস্তব এবং স্কেলগুলিও এর সাথে সম্পর্কিত নয়, তাই ডিজাইনের গ্রিড সম্পর্কে স্মার্ট হওয়াই কম গুরুত্বপূর্ণ কারণ আপনি একাধিক আকারের পিক্সেল সীমানা যুক্ত স্থানাঙ্ক খুঁজে পাওয়ার সম্ভাবনা কম।


পদ্ধতি 1: স্কেলিং ডাউন

  1. স্তরের শৈলীর মতো ভেক্টর এবং উত্পন্ন প্রভাবগুলি ব্যবহার করে আইকনটি বৃহত্তম আকারে (প্রায়শই 1024 × 1024) ডিজাইন করুন।

  2. আরও ছোট আকারগুলি তৈরি করতে নথিকে নকল করুন এবং স্কেল করুন।

  3. যে কোনও প্রয়োজনীয় টুইট তৈরি করুন এবং চূড়ান্ত চিত্রটি সংরক্ষণ করুন।

এটি দুর্দান্ত, তবে একাধিক মাপের জন্য কাজ করে এমন গ্রিডে সারিবদ্ধ হওয়ার জন্য উপাদানগুলির সুযোগগুলি মিস করে। একটি মোটা গ্রিড ব্যবহার করে স্ন্যাপ করার জন্য মনে হচ্ছে এটি কিছুটা সাহায্য করবে। উদাহরণস্বরূপ, একটি 16px গ্রিড সহ একটি 1024 × 1024 ডকুমেন্ট মানে স্নাপিং পয়েন্টগুলি আপনাকে 64৪ × size৪ আকারের পিক্সেলের স্নেপড প্রান্তগুলি দেবে। ধারণাটি বিশদ সহ ডিজাইন করা তবে ছোট আকারের গ্রিডগুলিতে স্ন্যাপ করা, যাতে আপনি এই গুরুত্বপূর্ণ অবস্থানগুলিকে আঘাত করেন।


পদ্ধতি 2: স্কেলিং আপ

  1. স্তরের শৈলীর মতো ভেক্টর এবং উত্পন্ন প্রভাবগুলি ব্যবহার করে সবচেয়ে ছোট বা আইকনটিকে সবচেয়ে ছোট আকারে (প্রায়শই 32 × 32 বা 64 × 64) ডিজাইন করুন। এটিকে প্রথম পয়েন্ট হিসাবে ব্যবহারের জন্য সাধারণত 16 × 16 তে পর্যাপ্ত বিবরণ নেই।

  2. বড় আকারগুলি তৈরি করতে, এবং ছোট আকারের জন্য নীচে নথিকে নকল করুন এবং স্কেল করুন।

  3. যে কোনও প্রয়োজনীয় টুইট তৈরি করুন এবং চূড়ান্ত চিত্রটি সংরক্ষণ করুন।

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


পদ্ধতি 3: স্কেলিং তারপর নীচে

  1. লেয়ার স্টাইলের মতো ভেক্টর এবং উত্পন্ন প্রভাবগুলি ব্যবহার করে একটি ছোট আকারে (প্রায়শই 32 × 32 বা 64 × 64) একটি রুক্ষ নকশা তৈরি করুন।

  2. সবচেয়ে বড় আকার পর্যন্ত নথিটি স্কেল করুন এবং বিশদ যুক্ত করুন। এটি সেই বিন্দু যেখানে আইকনটি পালিশ করা হয় এবং বেশিরভাগ বিশদ যুক্ত করা হয়।

  3. সমস্ত ছোট আকারের জন্য নথিকে নকল করুন এবং স্কেল করুন।

  4. যে কোনও প্রয়োজনীয় টুইট তৈরি করুন এবং চূড়ান্ত চিত্রটি সংরক্ষণ করুন।

এটি অন্যান্য পদ্ধতির উপকারিতা এবং বুদ্ধিমান সহ সেরা পদ্ধতি বলে মনে হয়। কিছুটা সম্পর্কিত পয়েন্ট হিসাবে, এর অর্থ এটিও আমি সাধারণত আইওস আইকনগুলি 912 × 912 এ নকশা করি কারণ এটি আইফোনটির নন-রেটিনা আইকন আকারের 57 × 57 এর 16 গুন বেশি।


আইকনগুলি ডিজাইনের জন্য আরও ভাল কোনও পদ্ধতি রয়েছে যা বিভিন্ন আকারে সরবরাহ করা প্রয়োজন?

লক্ষ্যটি হ'ল নূন্যতম প্রচেষ্টা দিয়ে সেরা সম্ভাব্য ফলাফল অর্জন করা।

উত্তর:


6

আপনার অনুমানগুলিতে সামান্য সংশোধন: উইন্ডোজ এবং ম্যাক 16 এর গুণক ব্যবহার করার সময়, তারা একই হারে স্কেল করে না। ভিস্তা / 7 মান মাপ 16 2 , 32 2 , 48 2 , 256 2 । ওএস এক্স 16 2 , 32 2 , 128 2 , 512 2 (+ হাইডিপিআই সংস্করণ)। আরও জটিল জিনিস, উইন্ডোজ ভিস্তা / 7 ডিফল্ট জুম স্তরের 16 হবে বলে মনে হচ্ছে 2 , 48 2 , 96 2 , 256 2 এবং সুখে 2px হিসাবে ছোট হিসাবে বাড়তি স্কেল হবে। এটি আপনার কার্যপ্রবাহে একটি বিশাল পার্থক্য করা উচিত নয় ব্যতীত এটি সমস্ত জুম স্তরে নির্দিষ্ট পিক্সেল গ্রিডের সাথে সম্পর্কিত হওয়ার প্রয়োজনকে বাধা দেয়।

আমার কাজের প্রবাহ আপনার চেয়ে আলাদা যে আমি খুব বেশি আকার পরিবর্তন করি না। প্রতিটি আকারের স্তরের জন্য একটি নতুন চিত্র তৈরি হয় এবং আমি ঠিক একই লেআউটটিকে পুনর্ব্যবহার করার চেষ্টা করি না।

আমি যে আকারটি দিয়ে শুরু করি তা প্ল্যাটফর্ম দ্বারা নির্ধারিত হয়। যদি উইন্ডোজের জন্য নকশা করা হয়, আমি 48x48 থেকে শুরু করি। (এর জন্য আমার কাছে কোনও বৈজ্ঞানিক ভিত্তি নেই তবে ডিফল্ট উইন্ডোজ z জুম স্তরটি "মিডিয়াম" যা 48x48। আরামপ্রদ.)

সম্পূর্ণ সমাপ্ত আইকনটি এই আকারে সম্পন্ন হয় এবং এটি পরিবারের অন্যান্য আইকনগুলির জন্য উল্লেখ। যদি কোনও ডেস্কটপ অ্যাপ্লিকেশন করে থাকে তবে আমি উইন্ডোজটির ডিফল্ট স্তরের সাথে ম্যাচ করার জন্য 16x, 96x এবং 256x এ ​​অন্যান্য সংস্করণগুলি তৈরি করব (যদি না এটি ম্যাকের পক্ষে হয় তবে প্রাকৃতিকভাবে)। 96x সাধারণত 48x এর সাথে খুব মিল থাকে।

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

16x সংস্করণটিও একটি নতুন সৃষ্টি। খুব কম বিশদ। বড় সংস্করণগুলির মতো একই রঙের প্যালেট সহ লোগো বা খুব সাধারণ আইকনোগ্রাফি সনাক্তকরণ। এই আকারে আমি কোনও কিছুই সুন্দর করার চেষ্টা করি না - কেবল তাত্ক্ষণিকভাবে সনাক্তযোগ্য।

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


+1 এটি মারা গেছে। স্কেলিং কেবল এতদূর যায় এবং এটি সত্যিই খুব বেশি দূরে নয়। এমনকি মুদ্রণের জন্যও, বলুন এর বিভিন্ন সংস্করণ, প্রায়শই বিভিন্ন আকারের অ্যাপ্লিকেশনগুলির জন্য একটি লোগো প্রয়োজন হয় এবং এটি পর্দার জন্য আরও গুরুত্বপূর্ণ।
অ্যালান গিলবার্টসন

"প্রতিটি আকারের স্তরের জন্য একটি নতুন চিত্র তৈরি করা হয়" - আপনি ইতিমধ্যে সম্পন্ন কাজের জন্য অনেকগুলি প্রতিরূপ বলে মনে হচ্ছে। স্পষ্টতই অনেকগুলি টুইটের প্রয়োজন হবে, তবে আমি আপনাকে অবাক করে দিয়ে অবাক হয়েছি।
মার্ক এডওয়ার্ডস

অনেকগুলি অনুলিখনের মতো মনে হচ্ছে, কারণ কয়েকটি বিশিষ্ট আইকন দশক বা শত শত স্তর দ্বারা নির্মিত are আমি মনে করি অতিরিক্ত বিশদটি প্রায় 64x64 এর উপরে মাপের জন্য দরকারী। (পিএস: আমি ভোট দিয়েছি কারণ এটি একটি দুর্দান্ত জবাব যা সম্পূর্ণ তথ্যে পূর্ণ, তবে টিক দেয়নি, কারণ আমার মনে হয় না যে আমি যেভাবে যেতে চাইছি।)
মার্ক এডওয়ার্ডস

1
@ মার্ক পুরোপুরি বুঝতে পেরেছেন - এই পথটি হৃদয়ের হতাশার পক্ষে নয়। ;-) তবে আমি এটি পেয়েছি সেরা ফলাফল - এবং আপনি যদি সেই অনুযায়ী বিল দিতে পারেন তবে এটি মূল্যবান।
ফেরে

1

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


1

ঠিক আছে, আমি সবচেয়ে ছোট ঘনত্বের জন্য সবকিছু তৈরি করা পছন্দ করি এবং এটি বাড়িয়ে তুলি। আপনি যদি কোনও অ্যাপ্লিকেশনের জন্য পুরো বিন্যাসটি ডিজাইন করেন তবে গ্রিডের সাথে কাজ করা আরও সহজ এবং এটি আপনাকে প্রচুর মাথা ব্যাথার হাত থেকে বাঁচায়, কারণ আপনি ছোট ছোট গ্রিডে বস্তুগুলি সরিয়ে নিয়ে যাচ্ছেন।

সুতরাং আমার কর্মপ্রবাহটি দেখতে দেখতে: 1. আমি ফটোশপে একটি ক্ষুদ্রতম ডিপিআই স্কেলে একটি বিন্যাস তৈরি করি এবং ইলাস্ট্রেটারে আইকনগুলি বানাতে থাকি, কারণ ভেক্টর চিত্রগুলিকে স্কেলিংয়ের ক্ষেত্রে কোনও সমস্যা নেই। ২. আমি যখন প্রতিটি আইকন / অবজেক্ট ইত্যাদি বানাচ্ছি তখন আমি একই সময়ে সমস্ত ছোট আকারের সংস্করণ তৈরি করি (যখন আমি স্থির করি এটি অবশ্যই অবশ্যই বিন্যাসে ভাল দেখাচ্ছে) এবং চূড়ান্ত পিএনজি প্রোগ্রামারকে হস্তান্তর করি hand

আমি নোট করতে হবে যে আমি প্রথমে আইওএস দিয়ে শুরু করেছি।


আমি এই সমর্থন। ডিজাইনের জন্য প্রথমে মোবাইল, আইকনগুলির জন্য ছোট। ছোট আইকন প্রয়োজনীয় বিবরণগুলি ধরে; আপনি এটি সর্বদা আরও সজ্জা যোগ করতে পারেন। যখন ছোট সংস্করণগুলি উত্তরাধিকারী সিস্টেমগুলির জন্য পরিকল্পনা করা হয় তখন ব্যতিক্রম হবে। বলুন, আপনি যদি কম-রেসিড আইফোনগুলির জন্য পৃথক আইকন সংস্করণ প্রস্তুত করছেন (প্রাক আইফোন 4), আপনি একটি নতুন, মূলধারার সাথে শুরু করতে চাইতে পারেন। এছাড়াও, আমি কার্যত কিছু ভিন্ন কর্মপ্রবাহ দেখেছি। আমরা যখন মাইক্রোসফ্ট অফিসের জন্য আইকনগুলি পুনরায় ডিজাইন করি, তখন আমরা উভয়কেই ছোট আইকনকে ছোট এবং বড় আইকনগুলি ছোট করে দেখলাম seen
ইভান
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.