নতুন ওয়েব ডিজাইনারদের জন্য ৫টি ফটোশপ টিপস!

প্রকাশিতঃ 19 February, 2015, দেখা হয়েছেঃ 22,062 বার

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

প্রযুক্তি টিম

উদাহরণস্বরুপ বলা চলে, আপনি যদি ওয়েবের জন্য একটি গ্রাফিক্স ব্যনার করে তবে সেটিকে .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 তে সেভ করে নিতে ভুলবেন না।

আজ এই পর্যন্ত!

সবাই ভাল থাকুন, সুস্থ থাকুন। :)

সকল মন্তব্য (5)

নতুন ওয়েব ডিজাইনারদের জন্য ৫টি ফটোশপ টিপস! | Elanteach.com for Virtual Education

14 March, 2015 at12:57:08 AM, Reply

[…] টিম | বাংলায় প্রযুক্তির স্বাদ. …read more var hupso_services_c=new […]

AdiTonmoy

12 April, 2015 at10:33:41 AM, Reply

সত্যিই খুব দরকারি টিপ্স। ধন্যবাদ।

muniaamoni

9 September, 2015 at04:53:38 PM, Reply

অনেক ভাল লাগলো । পরবর্তি পোষ্টের অপেক্ষায়……………….

Jewel

26 November, 2015 at07:09:30 PM, Reply

অতি গুরুত্বপূর্ণ একটি সাইট। আপনাকে ধন্যবাদ।

মন্তব্য করুন

ফেইসবুক দিয়ে মন্তব্য