কিভাবে & তৈরি করবেন একটি ওয়েবসাইটের জন্য রেটিনা-রেডি iOS বুকমার্ক আইকন সেট করুন
সুচিপত্র:
- 1) রেটিনা-রেডি iOS ওয়েবসাইট আইকন তৈরি করুন
- 2) PNG হিসেবে সংরক্ষণ করুন এবং রেটিনা ওয়েবসাইট বুকমার্ক আইকনের নাম দিন
- 3) বেস ওয়েব ডিরেক্টরিতে ওয়েবসাইট বুকমার্ক টাচ আইকন আপলোড করুন
- 4) একটি iOS ডিভাইস ব্যবহার করুন এবং সাইটটিকে বুকমার্ক করুন
ওয়েব ডেভেলপার এবং ওয়েবসাইটের মালিকরা মনোযোগ দিন: আপনাকে একটি রেটিনা-রেডি iOS বুকমার্ক আইকন সেট করতে হবে। বুকমার্ক আইকনগুলোকে বলা হয় অ্যাপল টাচ আইকন, এবং এই কাস্টম ইমেজগুলো আইকনে পরিণত হয় যা ব্যবহারকারীদের হোম স্ক্রিনে প্রদর্শিত হয় যখন তারা কোনো আইপ্যাডে কোনো ওয়েবসাইট বুকমার্ক করে, iPhone, অথবা iOS-এ iPod touch, অথবা OS X-এর জন্য Safari-এর বুকমার্ক প্যানেল।একটি কাস্টম অ্যাপল-টাচ-আইকন ফাইল সেট ব্যতীত, ব্যবহারকারীরা ওয়েব পৃষ্ঠার একটি বিরক্তিকর এবং প্রায়শই কুশ্রী থাম্বনেইল পাবেন এবং একটি রেটিনা-রেডি আইকন ব্যবহার না করেই, বুকমার্ক আইকনটি নতুন আইপ্যাড স্ক্রিনে পিক্সেলেড এবং সাধারণত ভয়ঙ্কর দেখাবে৷
কয়েকটি সহজ ধাপে যেকোনো ওয়েবসাইটের জন্য একটি রেটিনা পারফেক্ট অ্যাপল টাচ আইকন তৈরি করতে আপনাকে যা করতে হবে তা এখানে।
1) রেটিনা-রেডি iOS ওয়েবসাইট আইকন তৈরি করুন
একটি টেমপ্লেট ব্যবহার করুন বা নিজের ডিজাইন করুন। আমি পূর্ববর্তী পোস্টে উল্লিখিত সহজ DIY রেটিনা আইকন কিট ব্যবহার করেছি, এটি একটি PSD ফাইল যা একটি বা দুটি ক্লিকের মতো সুন্দর চেহারার iOS আইকন ডিজাইন করা সহজ করে তোলে। একটি ওয়েবসাইট বা কোম্পানির লোগো পেস্ট করুন এবং আপনি যেতে বেশ ভালো। যদি আপনার কাছে PSD ফাইলগুলি সম্পাদনা করার মতো কিছু না থাকে, তাহলে ফটোশপ CS6 বিটা চমৎকার এবং বিনামূল্যে ডাউনলোড এবং ব্যবহার করা যায় যতক্ষণ না বছরের শেষের দিকে চূড়ান্ত সংস্করণ না আসে।
2) PNG হিসেবে সংরক্ষণ করুন এবং রেটিনা ওয়েবসাইট বুকমার্ক আইকনের নাম দিন
আইকনটি অবশ্যই একটি PNG হতে হবে এবং এটিকে দুটি জিনিসের মধ্যে একটির নাম দিতে হবে৷ প্রতিটি ফাইলের নাম ব্যবহারকারীদের হোম স্ক্রিনে প্রদর্শিত আইকনের সামান্য ভিন্ন চেহারা প্রদান করে:
- “apple-touch-icon.png” আইকনে হাইলাইট বাবল ওভারলে যোগ করবে
- “apple-touch-icon-precomposed.png” হাইলাইট ওভারলে ছাড়াই তৈরি আইকনটি প্রদর্শন করবে
পরবর্তী -প্রি-কম্পোজড বিকল্পটি ব্যবহার করুন যদি আপনি নিজের হাইলাইট তৈরি করেন, অথবা আপনি যদি চান যে আইকনটি অ্যাপলের বেশিরভাগ ডিফল্ট আইকনে প্রদর্শিত হয় এমন সর্বব্যাপী বুদ্বুদ ছাড়াই আরও সমতল দেখাতে পারে৷
3) বেস ওয়েব ডিরেক্টরিতে ওয়েবসাইট বুকমার্ক টাচ আইকন আপলোড করুন
রুট ওয়েব ডিরেক্টরিতে apple-touch-icon.png ফাইলটি কপি করতে একটি SFTP ক্লায়েন্ট ব্যবহার করুন (OS X ফাইন্ডারে FTP অন্তর্ভুক্ত করে এবং সাইবারডাক বা ফাইলজিলা বিনামূল্যে)। এটি সাধারণত সাইটগুলির প্রধান সূচক ফাইলটি একই অবস্থানে অবস্থিত। একবার আপলোড হয়ে গেলে, একটি ওয়েব ব্রাউজার খুলে "http://SITEURL.com/apple-touch-icon.png" এ গিয়ে এটি সঠিক অবস্থানে রয়েছে তা নিশ্চিত করুন এবং এটি লোড হচ্ছে তা নিশ্চিত করুন।
এখানে OSXDaily.com থেকে 512×512 রেটিনা-রেডি বুকমার্ক আইকনের একটি উদাহরণ:
লক্ষ্য করুন যে -প্রিকম্পোজড পতাকা ছাড়া, উপরের আইকনটি হাইলাইট বুদ্বুদ প্রদর্শন করবে। বুকমার্ক হিসাবে স্ক্রিনশটে দেখানো আইকনের সাথে প্রকৃত আইকনের তুলনা করে আপনি দুটির মধ্যে পার্থক্য দেখতে পাবেন।
4) একটি iOS ডিভাইস ব্যবহার করুন এবং সাইটটিকে বুকমার্ক করুন
এটি সবচেয়ে সহজ অংশ, একটি iOS ডিভাইস নিন (রেটিনার দিকটি নিশ্চিত করতে একটি আইপ্যাড 3 পছন্দ করুন) এবং Safari খুলুন৷আপনি যে ওয়েব সাইটটিতে আইকনটি আপলোড করেছেন সেটি রিফ্রেশ করুন এবং তারপরে তীর চিহ্নে আলতো চাপুন এবং বুকমার্কের নাম "হোমস্ক্রীনে যোগ করুন" নির্বাচন করুন, তারপর এটি সেখানে আছে তা নিশ্চিত করতে হোমস্ক্রীনে ফিরে যান৷
512 x 512 পিক্সেল হওয়া সত্ত্বেও, রেটিনা আইকনটি পুরানো আইফোন এবং নন-রেটিনা ডিভাইসগুলিতে সূক্ষ্ম আকার ধারণ করবে৷ আপনি যদি সত্যিই চান, আপনি বিভিন্ন ডিভাইসে বিভিন্ন আকারের আইকন প্রদর্শন করতে CSS এবং HTML ব্যবহার করতে পারেন, তবে এটি সত্যিই প্রয়োজনীয় নয়।
এখন যদি কেউ রেটিনা ডিসপ্লে সহ আইপ্যাডে আপনার ওয়েব সাইট বুকমার্ক করে, তবে এটি তাদের হোম স্ক্রিনে অনেক ভালো দেখাবে। এটা সত্যিই সব আছে. এবং হ্যাঁ, আমরা অ্যাপল টাচ আইকন সম্পর্কে আগেও লিখেছি, তবে এটি এখন আরেকটি উল্লেখের দাবি রাখে যে iPad 3 উল্লেখযোগ্যভাবে উচ্চ রেজোলিউশন আইকন এবং গ্রাফিক্সের দাবি করে।