অ্যাফিনিটি ডিজাইনারের আইওএস আইকন আকার রফতানি করুন


10

যদিও অ্যাফিনিটি ডিজাইনারের অত্যন্ত কার্যকর @ 1x, @ 2x এবং @ 3x রফতানি রয়েছে তবে আমি ভাবছি যে আইওএস আইকনটির জন্য প্রয়োজনীয় বিভিন্ন আকারের রফতানি করার উপায় আছে কিনা?

আমি এখানে প্রয়োজনীয় আকারের একটি সংক্ষিপ্ত গ্রিড পেয়েছি , যা আমি তালিকা বিন্যাসে পুনরুত্পাদন করব:

  • 1024x1024
  • 180x180
  • 152x152
  • 120x120
  • 87x87
  • 80x80
  • 76x76
  • 58x58
  • 57x57
  • 40x40
  • 29x29

এটি 11 টি বিভিন্ন আইকন আকার!

স্লাইস কনফিগারেশন ধারণা সহ পুরো রফতান পার্সোনাকে আমি দুর্দান্ত বলে খুঁজে পেয়েছি, বিশেষত যেহেতু আপনি পৃথক স্তরগুলিতে স্লাইস প্রয়োগ করতে পারেন (বলুন, একটি বোতামের সাধারণ এবং চাপা সংস্করণের জন্য)। এই একই সরঞ্জামটি ব্যবহার করার কোনও উপায় আছে, সম্ভবত, নির্দিষ্ট আকারের রফতানি করার জন্য?

উত্তর:


8

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

আইওএস অ্যাপ আইকন টেম্পলেট পূর্বরূপ



এই দুর্দান্ত এবং দুর্দান্ত টেমপ্লেট, দুর্দান্ত কাজের জন্য আপনাকে ধন্যবাদ!
স্কাই

অসাধারণ! ধন্যবাদ! আপনার কি অ্যান্ড্রয়েডের জন্যও রয়েছে?
ইউনিফোনিক

4

এটিকে দেখতে বিশাল, জটিল তালিকার মতো মনে হচ্ছে, তবে আপনার তৈরি করার জন্য কেবলমাত্র 5 টি আকার রয়েছে:

  • 29pt
  • 49pt
  • 60pt
  • 76pt
  • 1024px

প্রথম চারটি মাপের (পয়েন্টগুলিতে তালিকাভুক্ত) 1 ডিগ্রি, 2 × এবং 3 × সংস্করণগুলির প্রয়োজন (যদি আপনি ভবিষ্যতের প্রমাণ হন, পাশাপাশি আইফোন 6 প্লাসও কভার করেন)।

নেট এবং অ্যাপলের সাইটে তালিকাভুক্ত কয়েকটি আকারের আইওএস 6 এবং নীচে (57 × 57 ইত্যাদি) জন্য রয়েছে। আপনি যদি আইওএস 7 বা তারপরের উপরে লক্ষ্য করে থাকেন তবে তাদের প্রয়োজন নেই।

আমি তৈরি ফটোশপ টেম্পলেট এখানে:

আইওএস আইকন টেম্পলেট

আমার প্রতিটি আইকন রফতানি করতে টুকরা সেট আপ করা হয়েছে এবং পুনরায় আকার এবং পুনঃবন্দর রপ্তানি করার জন্য একটি ক্রিয়া রয়েছে, তাই আমি এখানেই শেষ করব:

  • আইকন-29.png
  • icon-29@2x.png
  • icon-29@3x.png
  • আইকন-40.png
  • icon-40@2x.png
  • icon-40@3x.png
  • আইকন-60.png
  • icon-60@2x.png
  • icon-60@3x.png
  • আইকন-76.png
  • icon-76@2x.png
  • icon-76@3x.png

এই সমস্ত আকারের এখনও প্রয়োজন হয় না, তবে সম্ভবত ভবিষ্যতেও হবে। ৪ টি বেস মাপের সাহায্যে আইকনগুলি তৈরি করা আরও সহজ করে তোলে।

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

আপনি একই কাজ করতে পারেন, অ্যাফিনিটির স্লাইস বৈশিষ্ট্যটি ব্যবহার করে?


আপডেট: আমি অ্যাফিনিটি ডিজাইনার, স্কেচ, ফটোশপ এবং ইলাস্ট্রেটারের জন্য কিছু ওপেন সোর্স অ্যাপ্লিকেশন আইকন টেম্পলেট তৈরি করেছি । তারা বিবেচনা যোগ্য হতে পারে।


বাহ, দুর্দান্ত তথ্য, ধন্যবাদ! যদিও আমি নিশ্চিত নই যে আমি কীভাবে এটি অ্যাফিনিটিতে করব। আপনি কীভাবে এফটিভিটির মতো কোনও টেম্পলেট তৈরি করবেন জানেন?
ম্যাট ম্যাক

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

এইচএম, হ্যাঁ, এতে স্লাইস বৈশিষ্ট্য রয়েছে যা দুর্দান্ত। আপনার ফটোশপ টেমপ্লেটে এমন কিছু আছে যা চিত্রটি অনুলিপি করে এবং স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করে? হিসাবে, আপনি 76pt চিত্রটি তৈরি করেন এবং বাকিগুলি স্বয়ংক্রিয়ভাবে তৈরি হয়? অথবা আপনি প্রতিটি সংস্করণ তৈরি করতে হবে, এবং তারপরে রফতানি করতে টুকরা ব্যবহার করবেন?
ম্যাট ম্যাক

হ্যাঁ, আমি আকার পরিবর্তন করতে কিছু ক্রিয়া এবং স্ক্রিপ্ট ব্যবহার করি। আমার সম্পূর্ণ কর্মপ্রবাহটি এখানে নথিভুক্ত করা হয়েছে: bjango.com/articles/appdesignworkflow আমি যে টেম্পলেটটির একটি স্ক্রিনশট পোস্ট করেছি তা এখানে উপলভ্য: bjango.com
মার্চ এডওয়ার্ডস

3

আপনি এটি অ্যাফিনিটি ডিজাইনারে করতে পারেন, টুকরোটি প্রত্যয় ব্যবহার করে তাদের আউটপুট স্কেল করতে পারে, এখানে আইওএস আইকনগুলি 'ডাব্লু' প্রত্যয় ব্যবহার করে রফতানি করা হয়েছে:

এখানে চিত্র বর্ণনা লিখুন


2

আমি স্রেফ অ্যাফিনিটি ডিজাইনারে এটি করার একটি ভাল উপায় খুঁজে পেয়েছি। যদিও এটি সম্পূর্ণ স্বয়ংক্রিয় নয় ted আমি কীভাবে আইফোনের জন্য বর্তমানে প্রয়োজনীয় তিনটি আইকন আকার পেতে পারি তা ব্যাখ্যা করব (29pt, 40pt, 60pt), প্রতিটি 2x এবং 3x রেজোলিউশন সহ:

  1. একটি নতুন ডকুমেন্ট তৈরি করুন, ইউনিটটিকে "পয়েন্টস" এ সেট করুন, পৃষ্ঠার আকার 29x29 এ সেট করুন এবং ডায়ালগটিতে "আর্টবোর্ড তৈরি করুন" পরীক্ষা করুন
  2. আর্টবোর্ডে আপনার শিল্পকর্ম আটকে দিন position
  3. লেয়ার প্যানেলে আর্টবোর্ডটির নাম "29pt" করুন (alচ্ছিক)
  4. আর্টবোর্ডে রাইট ক্লিক করুন এবং "নকল" নির্বাচন করুন
  5. নতুন আর্টবোর্ডটি টেনে আনুন (যাতে আপনি উভয় পাশাপাশি দেখতে পারেন) এবং এরপরে এর নাম পরিবর্তন করে "40pt" (আবার, এই পদক্ষেপটি alচ্ছিক)
  6. ট্রান্সফর্ম প্যানেলটি ব্যবহার করে নতুন স্তরটিকে 40x40pt এ পুনরায় আকার দিন - আপনার শিল্পকর্মটি স্বয়ংক্রিয়ভাবে ছোট হয়ে যাবে
  7. 60pt আর্টবোর্ড তৈরি করতে 4-6 পদক্ষেপ পুনরাবৃত্তি করুন (প্রয়োজনে আইপ্যাডের জন্য 76pt এবং 83.5pt)
  8. এক্সপোর্ট পার্সোনায় যান, স্লাইস প্যানেলে স্যুইচ করুন এবং 2x এবং 3x রেজোলিউশন (আইপ্যাডের জন্য 1x) নির্বাচন করুন
  9. তালিকার সমস্ত আর্টবোর্ড স্তর নির্বাচন করুন ("29pt", "40pt" ইত্যাদি) এবং প্যানেলের নীচে "রফতানি নির্বাচিত" ক্লিক করুন।

অ্যাফিনিটি প্রতিটি নির্বাচিত রেজোলিউশনে সমস্ত আইকন আকার তৈরি করবে, যাতে আপনার প্রকৃত প্রয়োজনের চেয়ে বেশি আইকন পেতে পারেন। তবে সেগুলিকে সুন্দরভাবে "29pt@2x.png" ইত্যাদির নাম দেওয়া হয়েছে, সুতরাং এগুলি আপনার এক্সকোড সম্পদ ক্যাটালগায় নির্ধারণ করা সত্যিই সহজ।

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


1

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

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

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


1
আমি কোনও পরীক্ষা নিইনি, তবে সাবধান থাকুন যে এই পদ্ধতিটি বৃহত্তর আকার থেকে বিটম্যাপ স্কেল করা সম্পদ দিয়ে শেষ হবে না। যদি এটি হয় তবে তারা ভেক্টর / স্তর প্রভাব হিসাবে স্কেলিংয়ের চেয়ে খারাপ মানের হবে quality আপনি কেবল অ্যাফিনিটি ডিজাইনারে স্লাইস ব্যবহার করতে পারবেন না? আমি যদি সময় পাই তবে আমি পরীক্ষার জন্য সেট আপ করব।
মার্ক এডওয়ার্ডস

1
@ মার্কএডওয়ার্ডস এটি সত্য, ফলাফলগুলি ভেক্টর বা বিটম্যাপ হিসাবে স্কেল করা হয়েছে কিনা তা আমি খতিয়ে দেখিনি। অ্যাফিনিটি ডিজাইনারের স্লাইসগুলি রফতানির জন্য একটি নির্দিষ্ট অঞ্চলকে সংজ্ঞায়িত করে; আমি যা বলতে পারি তার থেকে তারা তাদের আউটপুট স্কেল করতে পারে না। আমি স্থান চিত্রের পদ্ধতিটি পরীক্ষা করে দেখেছি, যদি আপনি পরিদর্শন করতে চান: pixelapse.com/s/RGCQYVQR7DHTYC6KC
ম্যাট ম্যাক
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.