গ্রাফিক্স ডিজাইন এবং ওয়েব ডিজাইন দুটি দুই ধরনের কার্যক্রম। দুটিতেই আলাদা আলাদা পদ্ধতি এবং দক্ষতা দরকার। তারপরেও ওয়েবে গ্রাফিক্সের ব্যবহার আকাঁশ ছোয়া। আজকালকার বাজারে এমনকোন ওয়েব সাইট নেই য়েখানে গ্রাফিক্স এর ব্যবহার হয় না। কিন্তু ওয়েবে গ্রাফিক্স এর ফাইল ফরমেট এবং শুধুমাত্র গ্রাফিক্সের কাজেই গ্রাফিক্সের ফাইল ফরমেটের ব্যপক পার্থক্য পরিলক্ষিত হয়।
উদাহরণ স্বরুপ বলা চলে, আপনি যদি ওয়েবের জন্য একটি গ্রাফিক্স ব্যনার করেন তবে সেটিকে .jpg, .gif অথবা .png রাস্টার মুডে সেভ করবেন। আর যদি তা প্রিন্ট মিডিয়ার জন্য হয় তবে .eps, .ai(ইলাস্ট্রেটর ফরমেট) ভেক্টর মুডে সেভ করবেন।
শুধু কি ফাইল ফরমেটই সব কিছু? না, একজন আদর্শ ওয়েব ডিজাইনার হিসাবে আপনাকে সঠিক ফাইল ফরমেটের সাথে ফাইল সাইজের ব্যাপারটিও মাথায় রাখতে হবে। আপনাকে চেষ্টা করতে হবে যাতে সর্বনিম্ন সাইজে আপনি একটি সু্ন্দর গ্রাফিক্স পেতে পারেন। আবার অত্যাধিক সাইজ কমাতে যেয়ে গ্রাফিক্সে মানের কথা ভুলে যাবেন তা করলেও চলবে না। তাই একজন ওয়েব ডিজাইনার হিসাবে আপনাকে লক্ষ রাখতে হবে যাতে আপনার সার্ভারে গ্রাফিক্স রিকোয়েস্ট কম পড়ে। এক্ষেত্রে গ্রাফিক্সের রিকোয়েস্ট কমাতে আপরি সিএসএস ইমেজ স্প্রীট ব্যবহার করতে পারেন।
এখন দেখুন বাই ডিফল্ট ফটোশপ আপনি কিছু টিপস ব্যবহার করে ওয়েবের জন্য অনেক সহজেই ফাইল সেভ করতে পারবেন। অনেকেই জানেন এসব, তবে যারা একদম নতুন তাদের বলছি…
১. Save for Web & Devices মেন্যুর ব্যবহারঃ
ওয়েবের জন্য তৈরী আপনার গ্রাফিক্সকে ফাইল মেন্যু থেকে “Save for Web & Devices” কমান্ডের মাধ্যমে সেভ করতে পারেন। এতে করে আপনার গ্রাফিক্সটি পরিপূর্ণভাবে ওয়েবের উপযোগী হল এবং একটা স্টান্ডার্ড ওয়েব ফরমেট পেল। তবে, বেশির ভাগ ডিজাইনারই “Save for Web & Devices” এর পরিবর্তে “Save As” এ অভ্যাস্থ।
এরপর Save for Web & Devices উইন্ডো আসলে আপনার প্রয়োজন মতো সেটিংস করে নিন। নিচের চিত্রটি দেখুন.. Save for Web & Devices কমান্ডটির মাধ্যমে আপনি .jpg, .png, .gif এই তিনটি মুডে ইমেজকে সেভ দিতে পারবেন। নিচের ইমেজের লাল দাগ করা অংশ দুটি দেখুন।
এরপর আপনার পছন্দমত স্থানে সেভ করুন। খেয়াল রাখবেন ছবির মান অবশ্যই ম্যাক্সিমাম/হাই।
২. ওয়েব কালার মুড ব্যবহার করাঃ
ওয়েবের জন্য গ্রাফিক্স করছেন অথচ আপনি ব্যবহার করছেন গ্রাফিক্স মুড কালার। এতে আপনার গ্রাফিক্স হবে ঠিকই তবে রিমোট সার্ভারে গিয়ে গ্রাফিক্স এর নিজেস্ব মান ঠিক নাও থাকতে পারে। তাই ওয়েবের জন্য কোন গ্রাফিক্স করলে সেটির কালার গুলোকে ওয়েব মুডেই এ্যাপ্লাই করুন। এ জন্য আপনার টুলবারের কালার পিকার থেকে ব্যাকগ্রাউন্ড অথবা ফোরগ্রাউন্ড সিলেক্ট করে Only Web Colors মুডে ঠিক করুন।
৩. .jpg ইমেজে “Progressive Scan” অপশন এর ব্যবহারঃ
ফটোগ্রাফির জন্য .jpg একটি আদর্শ ফাইল ফরমেট। তদুপরি এটি ওয়েবের জন্য আদর্শ নয়। কারন, .jpg ফাইল গুলো অনেক হাই রেজুলেটেড এবং ওয়েবে আপলোড করলে সেটি প্রদর্শনের জন্য সার্ভারে অনেক অনুরোধ পাঠায়। তাই ওয়েবে .jpg এর ব্যবহার করলে ফাইল ফরমেটকে JPG Format Options থেকে Progressive Scans এর মান ব্যবহার করা। এতে করে আপনার কাঙ্ক্ষিত ফাইল ফরমেট এর সাথে মানও ঠিক থাকবে।
৪. .PNG গ্রাফিক্স ফাইলগুলোকে Transparency মুডে সেভ করাঃ
ওয়েব সাইটরে জন্য তৈরীকৃত গ্রাফিক্স ফাইলগুলোকে .png ট্রান্সপারেন্ট মুডে সেভ করা/ব্যবহার করা একটি ভাল অভ্যাস। কারন, আপনার এই গ্রাফিক্স ফাইলগুলো ওয়েবের যেকোন সেকশনে ব্যবহার হতে পারে। আর সে স্থানের সাথে যদি আপনার গ্রাফিক্সের কালারের মিল না থাকে তবে ব্যাপারটি খারাপ দেখাবে। বেশির ভাগ ডিজাইনার তাদের ওয়েব গ্রাফিক্স ফাইলগুলোকে তাদের সাইটের সাখে যেন যেকোন অবস্থাতেই মিলে যেতে পারে সেজন্য ট্রান্সেপারেন্ট মুডেই সেভ করেন। সেটা হতে পারে লোগো, হতে পারে ব্যানার বা পটভূমি।
৫. Animated Graphic ফাইলগুলো .GIF মুডে সেভ করাঃ
বলা চলে .gif ফাইল ফরমটে বর্তমানে .png এর প্রতিপক্ষ। ওয়েবে ফ্লাশ এনিমেশনের ব্যবহার কমার এই একটা কারনও হতে পারে .gif এর আধিপত্ব। ফটোশপ দিয়ে আপনার তৈরীকৃত যেকোন এনিমেশনকে ওয়েবে প্রদশ্ন করাতে .jpg/.png এর পরিবর্তে .gif ব্যবহার করাটা বাঞ্চনীয়। .gif এর জন্য একটি ব্যাপার আর তা হল, আপনি একবার আপনার এনিমেটেড এর জন্য তৈরী করা গ্রাফিক্সকে .gif মুডে সেভ করলে তা আর সম্পাদন করতে পারবেন না। তাই মুল ফাইলটিকে আলাদাভাবে .psd তে সেভ করে নিতে ভুলবেন না।
আজ এই পর্যন্ত!
সবাই ভাল থাকুন, সুস্থ থাকুন। 🙂
Cheers bro. Root level topics all time precious.Waiting for more conducive tips.
Thanks for nice tips.
ভাই আমাকে ওয়েভসাইড কিভাবে খুলব সে ব্যাপারে ট্রিপস বা দিকনির্দেশনা দিলে কৃতজ্ঞ থাকব
Wow, fantastic blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your web site is magnificent, as well as the content!. Thanks For Your article about নতà§à¦¨ ওয়েব ডিজাইনারদের জনà§à¦¯ ৫টি ফটোশপ টিপস! | টিউটোরিয়ালবিডি .