ওয়েব ডিজাইনে, আপনি সম্ভবত জানেন, প্রতিটি বিবরণ গুরুত্বপূর্ণ। একজন ব্যক্তি যিনি আপনার সংস্থানে স্যুইচ করেছেন তিনি প্রতিটি উপাদান আলাদাভাবে দেখতে পান না, তবে সমগ্র চিত্রটিকে অন্যান্য ছোট বিবরণ সমন্বিত একটি প্যাকেজ হিসাবে উপলব্ধি করেন। এইভাবে, আপনি যদি আপনার সংস্থান বিকাশের প্রক্রিয়ায় কিছু মিস করেন, এই বিবরণটি পরে পুরো কমপ্লেক্স, পুরো রচনাটি নষ্ট করতে পারে।
এমন একটি তুচ্ছ জিনিস হতে পারে, উদাহরণস্বরূপ, একটি বোতামের পটভূমি, কিছু ছোট উপাদানের একটি ভুলভাবে নির্বাচিত ফন্ট এবং এমনকি একটি ফেভিকন। প্রকৃতপক্ষে, নিজের জন্য দেখুন - বড়, সুপরিচিত সাইটগুলির একটি পৃথক আইকন রয়েছে যা ব্যবহারকারীর ব্রাউজারের "বুকমার্ক" বিভাগে এটি নির্দেশ করে। এটি ছাড়া, সম্পদের বিকাশকারীরা যে রচনাটির জন্য তারা মূলত চেষ্টা করছিলেন তা তৈরি করতে সক্ষম হতো না৷
অতএব, আপনার সাইটের জন্য একটি ডিজাইন তৈরি করার সময়, আপনার ফেভিকনের মতো বিস্তারিত যত্ন নেওয়া উচিত। এই নিবন্ধে, আমরা কীভাবে এটিকে সম্পদের সাধারণ শৈলীর সাথে মেলে সেই সাথে এই চিত্রটির আকার কী হওয়া উচিত সে সম্পর্কে কথা বলব৷
সাইট আইকন
প্রথম, আসুন সংজ্ঞায়িত করা যাক এই উপাদানটি কি। এই মুহুর্তে, আপনার ব্রাউজার ট্যাবের শিরোনামটি দেখুন। আপনি দেখতে পাচ্ছেন, এটির বাম দিকে একটি ছোট চিত্র রয়েছে, যা সম্পদের লোগোর একটি সরলীকৃত সংস্করণ নির্দেশ করে৷ একই ছবি সার্চ রেজাল্টে প্রদর্শিত সাইটের নামের কাছেও রয়েছে। ব্যবহারকারী শিরোনাম দেখলে এটিই নির্দেশিত হয়৷
অনেক ওয়েবমাস্টার বোঝেন যে এই ধরনের ছবি প্রয়োজন - কিন্তু খুব কম লোকই জানেন যে সাইটের জন্য ফেভিকন সাইজ সবচেয়ে উপযুক্ত হবে। অতএব, এই নিবন্ধে আমরা কীভাবে এই জাতীয় আইকন তৈরি করতে হয় এবং আপনি কীভাবে এটি আপনার সংস্থানে ইনস্টল করতে পারেন সে সম্পর্কে তথ্যই দেব না, তবে চিত্রের আকার সম্পর্কেও কথা বলব৷
ফ্যাভিকনের উদ্দেশ্য
সুতরাং, সাইটের শিরোনামের কাছের ছবি সনাক্তকরণের জন্য ব্যবহার করা হয়। এটি এর মূল উদ্দেশ্য: আমরা যে সাইটটির নাম দেখি সেটি প্রকাশ করা এবং বাকিদের চোখে এটিকে আলাদা করে তোলা। এটি গ্রাফিক্স ব্যবহারের মাধ্যমে যতটা সম্ভব সহজভাবে করা হয়: আমরা টেক্সট বিন্যাসের তুলনায় ছবিগুলিতে তথ্য খুব দ্রুত এবং সহজভাবে উপলব্ধি করি। ফেভিকনগুলি আমাদের এটি করতে সহায়তা করে। তবে ভুলে যাবেন না যে ব্যবহারকারীর চোখে ফেভিকনের আকার ন্যূনতম। এটি সাইটের "শিরোনাম" লোগো নয়, যাতে শিলালিপি, কিছু স্পষ্টীকরণ বা যোগাযোগের তথ্যের আকারে অতিরিক্ত তথ্য থাকতে পারে। নামের পাশের আইকনে যা প্রদর্শিত হতে পারে তা যতটা সম্ভব ফেভিকনের আকারের সাথে মানানসই হওয়া উচিত। এবং তিনি, ইতিমধ্যেই নির্দেশিত হিসাবে, কেবল ক্ষুদ্র (শুধুমাত্র 16 বাই 16 পিক্সেল)।
কীভাবে নির্বাচন করবেনফেভিকন?
তাহলে কিভাবে একজন ওয়েবমাস্টার তার সাইটের জন্য একটি আইকন ডিজাইন করতে পারেন? এটি লক্ষ করা উচিত যে কেবল সাইটের লোগো সংকুচিত করা, প্রায়শই, কাজ করবে না। একটি নির্দিষ্ট সংস্থানের লোগো আকারে যে প্রতীকগুলি স্থাপন করা হয়, তাতে বিভিন্ন উপাদান প্রায়শই দৃশ্যমান হয়, যা সর্বদা একটি ক্ষুদ্র আকারে সঠিকভাবে প্রদর্শিত হবে না। অবিলম্বে এই ধরনের একটি অঙ্গীকার পরিত্যাগ করা ভাল।
অবশ্যই, ফেভিকনের আকার কেবল সেখানে একটি শিলালিপি সন্নিবেশ করার বিষয়ে কথা বলার অনুমতি দেয় না। এই রেজোলিউশনে যেকোনো টেক্সট অদৃশ্য হয়ে যাবে। আমাদের একটি নতুন আইকন তৈরি করতে হবে যা সাইটের শৈলী প্রকাশ করবে। সমাধান খুঁজতে, আবার, আসুন সবচেয়ে বড় সাইটগুলিতে ঘুরে আসি৷
অনেক লোক ফেভিকন হিসাবে পরিষেবার নামের স্টাইলাইজড প্রথম অক্ষর ব্যবহার করেন। এই উপায়, উদাহরণস্বরূপ, বিং, ইয়াহু, ইয়ানডেক্স, উইকিপিডিয়া, গুগল। আরেকটি পদ্ধতি আছে - আপনার যদি একটি ছোট সাইটের নাম থাকে, আপনি এটি আপনার আইকনের পটভূমি হিসাবে সেট করতে পারেন। এই শিলালিপিটি সঠিকভাবে প্রদর্শন করার জন্য ফেভিকনের আকারের জন্য (পিক্সেলে এটি পৌঁছায়, আমি আবার বলছি, 16 বাই 16 পিক্সেল) এটি 3 অক্ষরের বেশি হওয়া উচিত নয়। উদাহরণস্বরূপ, Aol পরিষেবা এটি করে।
কীভাবে একটি ফেভিকন তৈরি করবেন?
সাইটের নামের জন্য একটি আইকন তৈরি করার বিভিন্ন উপায় রয়েছে৷ অবশ্যই, বিভিন্ন প্রস্তুত-তৈরি সমাধানের সাথে কাজ করা সবচেয়ে সহজ। আমরা কিছু পরিষেবা বা প্রোগ্রাম সম্পর্কে কথা বলতে পারি যা আপনাকে এটিকে হ্রাস করে একটি পূর্ণাঙ্গ চিত্র থেকে একটি আইকন তৈরি করতে দেয়। যাইহোক, আমি আপনার নিজের মতো একটি লোগো বিকাশ করার সুপারিশ করব। এই প্রথম দিতে হবেকিছু শেখার সুযোগ; এবং দ্বিতীয়ত, এটি আরও সরঞ্জাম প্রদান করবে। এর জন্য আপনাকে যা জানতে হবে তা হল কী আঁকতে হবে এবং চূড়ান্ত সংস্করণে ফেভিকনের আকার কী হওয়া উচিত তাও জেনে নিন। আমরা একটু পরে সাইটের আইকনের আকার সম্পর্কে কথা বলব, তবে আপাতত আমরা এই জাতীয় চিত্রগুলির সাথে কাজ করার কিছু সূক্ষ্মতা নোট করব। বিশেষ করে, সাইটের জন্য ফেভিকনের আকার উল্লেখ না করে, এই ধরনের ছবির বিন্যাস স্পষ্ট করা উচিত। অভিজ্ঞ ডিজাইনারদের মতে, ছবিটি অবশ্যই একটি-p.webp
আপনি ছবি সংরক্ষণ করতে পারেন, উদাহরণস্বরূপ, ফটোশপ ব্যবহার করে, যেখানে প্রতীকটি আঁকা হবে।
ফ্যাভিকন মাত্রা
তাহলে, এখন আসুন অনুসন্ধানের ফলাফলে সাইটের নামের পাশে যে ছবিটি দেখতে পাই তা কত বড় হওয়া উচিত সে সম্পর্কে কথা বলা যাক। ডিফল্টরূপে, ইতিমধ্যে উল্লিখিত হিসাবে, এর আকার মাত্র 16 পিক্সেল (প্রতিটি দিকে)। যাইহোক, আপনি যদি ফটোশপে এই ছবিটি সম্পাদনা করার চেষ্টা করেন তবে আপনি নিজেই দেখতে পাবেন এটি কতটা অসুবিধাজনক। অতএব, আমরা একটি বর্ধিত ছবি নিয়ে কাজ করার পরামর্শ দিই, যা ভবিষ্যতে কেবল প্রান্ত বরাবর সংকুচিত এবং প্রয়োজনীয় বিন্যাসে সংরক্ষণ করা যেতে পারে।
মাল্টিপ্ল্যাটফর্ম
তবে, আপনার সাইটে ফেভিকন কত বড় হওয়া উচিত তা বলার জন্য, আরও একটি জিনিস মনে রাখতে হবে। সমস্ত প্ল্যাটফর্ম একইভাবে একটি সম্পদ চিত্র প্রদর্শন করে না। উদাহরণস্বরূপ, রেটিনা ডিসপ্লে সহ ডিভাইসগুলি 32 বাই 32 পিক্সেলে আপনার ফেভিকন "দেখুন"৷ এবং সাফারিতে এবং নতুন উইন্ডোজ প্ল্যাটফর্মে, এবং সর্বোপরি, এই আইকনগুলি 64 এর আকারে পৌঁছেছেপিক্সেল।
অতএব, আমরা সুপারিশ করছি যে আপনি আইকনের বিভিন্ন সংস্করণ সংরক্ষণ করুন এবং ভবিষ্যতে ব্যবহারকারীর প্ল্যাটফর্মের উপর নির্ভর করে এটির পরিবর্তনের জন্য প্রদান করুন। আরেকটি আকর্ষণীয় বিষয় - আপনি আইকনটিকে সবচেয়ে বড় বিন্যাসে লোড করার চেষ্টা করতে পারেন, ব্রাউজারের উপর নির্ভর করে এটি "সঙ্কুচিত" হবে তা বিবেচনা করে।
বাইরের সম্পাদক
অবশ্যই এটি ভাল যদি আপনি ফটোশপের সাথে ভাল হন এবং আপনার ছবি সংরক্ষণ করার সময় ফেভিকনের আকার কী হওয়া উচিত এবং কীভাবে এটি অর্জন করা যায় তা জানেন। যাইহোক, এমন অনেক নতুনরা আছেন যারা আগে গ্রাফিক এডিটরদের এত কাছ থেকে দেখেননি, তাই তারা এত সহজে পছন্দসই ছবি আঁকতে পারে না। এই ধরনের ওয়েবমাস্টারদের সাহায্য করার জন্য, বিভিন্ন পরিষেবা রয়েছে যা আপনাকে স্বয়ংক্রিয়ভাবে আপনার আগ্রহী আইকন তৈরি করতে দেয়। তাদের মধ্যে অনেকগুলি এমনকি বিনামূল্যে, যার জন্য ব্যবহারকারীর কাছ থেকে কোনও বিনিয়োগের প্রয়োজন নেই৷
কখনও কখনও আপনাকে শুধুমাত্র কাজ করার জন্য নিবন্ধন করতে হবে, কিন্তু, আপনি যেমন বোঝেন, এটি একবার করা হয় - সর্বোপরি, কোম্পানিগুলি তাদের ফেভিকন এত ঘন ঘন পরিবর্তন করে না। Google-এ একবার দেখুন, যেটি প্রতিদিন লোগো পরিবর্তন করে, কিন্তু আইকন স্পর্শ করে না।
কীভাবে একটি ফেভিকন ইনস্টল করবেন?
সাধারণত, আপনার সাইটটি এমনভাবে সেট আপ করুন যাতে এটি আপনার প্রয়োজনীয় চিত্রটি সঠিকভাবে প্রদর্শন করে খুব সহজ। এটি বেশ কয়েকটি সহজ পদক্ষেপগুলি সম্পাদন করা যথেষ্ট যা অনুসন্ধান ইঞ্জিনগুলির পাশাপাশি সাধারণ ব্রাউজারগুলিকে তথ্য পড়ার অনুমতি দেবে৷
এটি করার জন্য, ফলস্বরূপ ছবিটি সংরক্ষণ করতে হবেfavicon.ico নামে এবং আপনার সম্পদের মূলে স্থাপন করা হয়েছে। এটাই, এখন আপনার ছবি স্বয়ংক্রিয়ভাবে স্বীকৃত হবে এবং কিছু সময় পরে এটি আপনার সাইটের সাথে লিঙ্ক করা হবে।
এই বাঁধাই ছাড়াও, আপনি আরও একটি লাইন যোগ করতে পারেন যা আপনার আইকনটি কোথায় অবস্থিত তা "সাজেস্ট" করবে৷ এটা এই মত দেখাচ্ছে:
সাইটের হেডারে কোডটি ইনস্টল করুন।
সিদ্ধান্ত
সুতরাং, আমাদের নিবন্ধটি পড়ার পরে, আপনি একটি সাইটের জন্য একটি ফেভিকন কী আকারের হওয়া উচিত এবং এটি কী তা নির্ধারণ করেছেন৷ এছাড়াও, আমি মনে করি আপনি বুঝতে পেরেছেন যে আপনার সম্পদের জন্য সঠিক আইকনটি খুঁজে পাওয়া একটি প্রয়োজনীয়তা, কারণ এটি আপনার হাতে ক্রমবর্ধমান স্বীকৃতি এবং আপনার প্রতিযোগীদের মধ্যে কিছু অতিরিক্ত স্ট্যান্ডআউট উভয় ক্ষেত্রেই কাজ করে। কমপক্ষে বৃহত্তম সাইটগুলি একই কাজ করে, যা একটি প্রধান উদাহরণ হিসাবে নেওয়া যেতে পারে। এবং তাছাড়া, এটি খুব বেশি পরিশ্রমের কারণ হয় না - একবার একটি ফেভিকন তৈরি করে এবং এটি আপনার সাইটে সঠিকভাবে ইনস্টল করার পরে, আপনি পরবর্তী কয়েক মাসের জন্য এটি ভুলে যেতে পারেন৷
অতএব, নির্দ্বিধায় পরীক্ষা করুন, নতুন কিছু নিয়ে আসুন, চেষ্টা করুন - এবং সবকিছু কার্যকর হবে!
