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

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

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

কেমন আছেন আপনারা? আশা করি ভালই,
আজ আমি ফটোশপ এর একটি বহুল ব্যাবহৃত এবং অতি জনপ্রিয় blur motion নামক ফিল্টার দিয়ে HIGH SPEED MOTION ইফেক্ট তৈরি করা দেখাব।

বিভিন্ন রেসিং মুভি অথবা গেম এর কভার পোস্টার এ এই HIGH SPEED MOTION ইফেক্ট এর ব্যবহার দেখতে পাই।
তাহলে শুরু করা যাক,

প্রথমে একটি ছবি ফটোশপে ওপেন করুন। আমি যে ছবিটি ব্যাবহার করেছি আপনারা এরকম একটি ছবি ওপেন করুন।.

এবার Magnetic Lasso Tool এর সাহায্যে গাড়ির চারিদিকে একটি সিলেকশন তৈরি করুন। এর পর কি-বোর্ড থেকে (CTRL+SHIFT+I) কমান্ড দিন। নিচের ছবিটির মত একটি আবরন তৈরি হবে।

তারপর মেইন মেনু থেকে Layer>New>Layer via Copy (CTRL+J) সিলেক্ট করুন।

এবার মেইন মেনু থেকে Filter>Blur>motion Blur এ ক্লিক করুন।

Angle “5″ এবং Distance “64″ সেট করে ok দিন।

ব্যাস!!
এই ছবিটিই আমাদের শেষ ফলাফল।

সূত্রঃ টেকটিউশন

আজকের কাজ প্রজেক্ট হল ফটোশপে ওয়েব রেজিস্টার ফর্ম ডিজাইন।

শুরু করি এবং ব্যাকগ্রাউন্ড:

সবার আগে নতুন একটা ডকুমেন্ট্রি নিন। নিচের সাইজ অনুসরণ করুন।

Rectangle Tool (U) এর এর সাহায্য নিচের মত একটা চতুর্ভুজ তৈরি করুন এটাই আমাদের ওয়েব রেজিস্টার ফর্ম এর ব্যাকগ্রাউন্ড।

এবার নিচের লেয়ার স্টাইলটা ফলো করে একটাকে আসল রূপ প্রদান করি।

ব্যাস সব কিছু ঠিকঠাক মত করতে পারলে আপনার ব্যাকগ্রাউন্ড এর ফাইনাল অবস্থা নিচের মত হবে।

হেডার তৈরি:

এবার বার পেন টুল ব্যাবহার করে নিচের মত একটা হেডার ব্যাকগ্রাউন্ড তৈরি করুন।

এবার নিচের লেয়ার স্টাইল অনুসরণ করুন।

এবার ডার্ক-গ্লো যোগ করবো! এবার Ctrl key চেপে ধরে আপনার হেডার ব্যাকগ্রাউন্ড এর সেইপ লেয়ারে ক্লিক করুন তাহলে ঐটার এরিয়া সিলেক্ট হয়ে যাবে।

এবার Gradient Tool ব্যাবহার করে স্ক্রিন সট এর মত করে পাশে ড্রাগ করুন। Gradient এর Option বার এর সেটিং স্ক্রিনশট এ লক্ষ্য করুন।

এবার Later>Layer Styles> Blending Options: Custom যান নিচের স্ক্রিন সট অনুসরণ করুন।

হেডারের টাইটেল দিন। আমি এখানে Vintage ফন্ট ব্যাবহার করেছি।

ফরম ডিজাইন:

এইবার Horizontal Type Tool (T)ব্যাবহার করে নিচের মত টেক্সটা এবং Rounded Rectangle Tool (U) ফর্ম তৈরি করুন। টেক্সটার রং হবে #363636।

এবার ফর্ম গুলার লেয়ার স্টাইল নিচের মত হবে।

সব কিছু যদি ঠিকঠাক মত সারতে পারেন তাহলে আপনার প্রজেক্ট এর অবস্থা নিচের মতন হবে।

বাটন যোগ:

বাটন এর বিশেষ কোন পরিবর্তন হবে না। শুধু Drop Shadow যৎ সামান্য পরিবর্তন ঘটবে। তারপর একই ভাবে ডার্ক-গ্লো ও টেক্সটা যোগ করুন। Drop Shadow পরিবর্তনটা নিম্নরূপ।

তাহলে অবস্থা নিচের মত

আরও কিছু:

মূল কাজ তো শেষ করলাম এবার আরও কিছু যোগ করি। নিচের মত টেক্সটা যোগ করতে পারেন।

একটা ক্রস বাটনও যোগ করা যেতে পারে। এটার ব্যাকগ্রাউন্ড লেয়ার স্টাইল নিচের মতন। আর X টা (ফাইনাল প্রজেক্টে লক্ষ্য করুন) আপনাদের দায়িত্বে ছেড়ে দিলাম।

ব্যাস ফাইনাল প্রজেক্ট হবে নিচের মতন।

সোর্চ ডাউনলোড করুন

১. নিচের মত সাইজের একটা নতুন ডকুমেন্ট্রি নেই।

২. এবার এখানে টেক্সটা যোগ করি। ব্যাকগ্রাউন্ড কি ভাবে যোগ করেছি বলবো না। আপনাদের বুঝে নিতে হবে। আর বুঝতে না পারলে আগের টিউটোরিয়াল দেখুন।

স্টাইল শুরু:

৩. সবার আগে আজও কালার ঠিক করবো তবে এটা মুখ্য নয়, গৌণ রং। এর ওপর সাদা রং প্রলেপ দেয়া হবে। যাই হক নিচের স্কিনসট লক্ষ্য করুন।

৪. এইবার ঐ সাদা প্রলেপ দেয়া হবে Color Overlay এর মাধ্যমে, দিন! Opacity 85% করে দিতে ভুলবেন না।

৫. এখন অভ্যন্তরীণ 3D মেকিং করা হবে। Bevel and Emboss যান। নিচের স্কিনসট এর সেটিং গুলো লক্ষ্য করুন।

৬. আকাশটা নীল রং এর কিন্তু শুভ্র মেঘ গুলো বাদ দিলে চলবে? আসেন ছোপ তৈরি করি।

৭. এইবার মূল কাজ 3D মেকিং যেইটা আমার Drop Shadow করবে।

আপনার ফাইনাল প্রজেক্টটা নিচের মত হবে।

সোর্চ ফাইল ডাউনলোড

১. নিচের মত সাইজ নিয়ে একটা নতুন ডকুমেন্টই নিন।

২. এবার 5d5d5d রং দিয়ে ফীল করুন। এবং পছন্দ অনুযায়ী টেক্সটা যোগ করুন।

<!–

৩. স্টাইল শুরু

বরাবর যেমন বলে থাকি এই বারো বলছি সবার আগে Gradient Opacity গিয়ে আপনি আপনার রং ঠিক করুন। নিচের স্কিনসট লক্ষ্য করুন এখানে আমি সাদা ও #585858 (ধূসর) রং ব্যাবহার করেছি। এইখানে নিচের দক্ষতা কাজে লাগান। একেবারে সেইম সেইম না হালেও সমস্যা নাই।

পরের কাজ হল Inner Shadow তে গিয়ে সূক্ষ্ম একটা 3D ভাব তৈরি করা। (যদিও এটা একটা রং হিসেবে এইখানে ব্যাবহার করছি)

Bevel and Emboss যান এইখানেই শুরু হচ্ছে মূল 3D এবং মূল গ্লেস প্রদান। নিচের স্কিনসট লক্ষ্য করুন।

Satin যান, এটা আপনার প্রজেক্ট এর মাঝে একটা ধূসর রং প্রদান করে সাইটে গ্লেস গুলোকে বোল্ড করবে।

এই স্টাইলে Drop Shadow ব্যাবহার করা আর না করা আপনার রুচির ব্যাপার।

তাহলে আপনার ফাইনাল অবস্থা

সোর্চ ফাইল ডাউনলোড

১. নিচের মত সাইজের একটা নতুন ডকুমেন্ট্রি নিন।

ব্যাকগ্রাউন্ড ডিজাইন

২. পরের কাজ হল #8a00ff কালার ব্যাবহার করে এইটার Fill করুন।

৩. Rounded Rectangle Tool (U) নোটিস বোর্ড এর মত দুইটা চতুর্ভুজ আঁকুন নিচের চিত্র লক্ষণীয়। বড়টার কালার কোড #cdcdcd এবং ছোটার #3f3f3f।

৪. Stroke এ যান এবং এগুলো বর্ডার সাদা রং এর 5px করে দিন।

টেক্সটা যোগ ও অন্যান্য

৫. এবার নিচের চিত্রটা লক্ষ্য করুন। এখানে আমি 404 লিখেছি #343434 কালার কোড ব্যাবহার করে আর Oops! লিখেছি সাদা রং (#ffffff) ব্যবহার করে।

৬.এবার এটার পাসে একটা Rectangle Tool (U) ব্যাবহার করে একটা চতুর্ভুজ আঁকুন।

৭. তার সামনে একই ভাই Rectangle Tool (U) এর সাহায্যে একটা দাগ দিন। নিচের চিত্র লক্ষ্য করতে পারেন।

৮. এবার Filter>Blur>Gaussian Blur যান এবং নিচের মত 4px মান দিন।

৯. Filter>Blur>Motion Blur যান তবে এটা আপনার নিজের দক্ষতা অনুযায়ী মান দিন। এটা যেন আপনার ক্ষুদ্র দুটি নোটিশ বোর্ড এর উচ্চতা পার করে। চিত্রটা ভালো করে লক্ষ্য করুন।

১০. এবার এবার সেডো লেয়াটা (৭নং এ তৈরি লেয়ার) আপনার দ্বিতীয় ব্যাকগ্রাউন্ড লেয়ার (৬নং এ তৈরি লেয়ার) এর নিচে নামিয়ে দিন।

১১. এবারের কাজ ব্যাকগ্রাউন্ড এর কালার (#8a00ff) অনুযায়ী এটার কালার দিন।

১২. আরও কিছু টেক্সট যোগ করুন।

এটা আপনি বিভিন্ন রং এর তৈরি করতে পারবেন। নিচে ডেমো দেখুন। সোর্চ ফাইলে তিনটায় দিলাম।

সোর্চ ফাইল ডাউনলোড

১. ব্যাকগ্রাউন্ড ও টেক্সটা যোগ।

নিচের সাইজ অনুযায়ী ডকুমেন্ট্রি নিন।

লাল রং ব্যবহার করা হবে বলে হলুদ রং দিয়ে ভরাট করুন। আমি টেক্সটা যোগ করেছি Ash ফন্ট ব্যাবহার করে। আপনি যে কোন মোটা ফন্ট ব্যাবহার করতে পারেন। চিকন ফন্ট এর ক্ষেত্র Drop Shadow এর সাইজ কমাতে হয়।

২. স্টাইল শুরু:

আগেও দেখিয়েছি, সবার আগে রং বাছতে হয়। লাল রং দিলাম, ইদানীং রংটা ভালো লাগছে। Opacity 60% দিলাম কারণ রং এর পার্থক্য করতে Gradient ব্যাবহার করা হবে।

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

এইবার একটা 3D করার জন্য Drop Shadow ব্যাবহার করি। এই খানে লাল রং এর চেয়ে গাড় রং ব্যাবহার করা উচিৎ তাহলে ভালো দেখায় আর মূল টেক্সটা কালো জাতীয় রং হলে হালকা রং ব্যাবহার করতে হবে। ফটোশপ অনুশীলন এর মাধ্যমে এইটা বুঝতে পারবেন।

নিচের দিকে একটু গ্লেস ব্যাবহার করার জন্য Inner Shadow ও ব্যাবহার করলাম।

স্টাইলটা প্রকটিস করে হয়তো বুঝতে পারছেন খুবই সহজে রং বদল করা যায় দেখুন। আপনি আপনার ইচ্ছা মত আরও রং ব্যাবহার করতে পারেন।

.PSD ফাইলটা ডাউনলোড করুন

১. ব্যাকগ্রাউন্ড ডিজাইন

নিচের সাইজ অনুসারে একটা একটা নতুন ডকুমেন্ট নিন।

এবার Filter>Artistic> Sponge যান এবং নিচের স্কিন সট অনুসরণ করুন।

১. লেয়ার স্টাইল শুরু:

আশা করি এইবার আর টেক্সটা যোগ করার কথা বুঝিয়ে দিতে হবে না, যোগ করে ফেলুন। প্রথম কাজেই হল Gradient Opacity এর কাজ সারা। এইটা যেহেতু Metal স্টাইল তাই ধূসর রং ব্যাবহার করলাম।

Satin এর ব্যাবহার করবো এখন।

Bevel and Emboss এ যান এবং নিচের মত সেটিং করুন। এই খানে আমাদের মূল ডিজাইন সংগঠিত হয়েছে লক্ষ করলেই বুঝতে পারবেন।

Inner Glow এর ব্যাবহার করবো নয়েজ এর প্রয়োগ এর জন্য।

Stroke এর ব্যাবহার এই স্টাইলে খু্বই জরুরি ভূমিকা পালন করবে। চকচকে বর্ডার এই স্টাইল এর সুন্দর্য বৃদ্ধি করবে।

Inner Shadow এর ব্যবহার করি তাহলে Stroke বর্ডার এর সামনে খুবই দুর্বল একটা বর্ডার দেখা যাবে।

Drop Shadow এর কথা ভুলে যাবেন না। “আলো তো ছায়া ফেলবেই”। কি বলেন?

আপনার ফাইনাল প্রজেক্ট এর অবস্থা নিজের মত হবার কথা।

ফটোশপের .PSD ফাইলটা নামিয়ে নিন

১. নিচের সাইজের একটা নতুন ডকুমেন্ট নিন। ব্যাকগ্রাউন্ড আগের টিউটোরিয়াল “ফটোশপে Prodded Style তৈরি” এর ব্যাকগ্রাউন্ড এর মতই হবে।

২. বাটন বডি

Rounded Rectangle Tool (U) এর সাহায্য নিচে মত একটা চতুর্ভুজ তৈরি করুন।

এইবার নিচের লেয়ার স্টাইল ফলো করুন। এইটার আর আলাদা করে বর্ণনা দিলাম না।

সব কিছু ঠিক-ঠাক মত করতে পারলে আপনার প্রজেক্ট এর অবস্থা এমনটি হবে।

3. রিবন তৈরি শুরু

নিচের স্কিন সট লক্ষ্য করুন। এইখানে একটা Rectangle Tool (U) এর সাহায্যে দুইটা রিবন তৈরি করুন। বড়টা বাটন বডি লেয়ারের পেছনে আর ছোটটা এর সামনে স্থাপন করুন।

পেন টুল এর সাহায্য একটা খাঁচকাটা তৈরি করুন! এবং পেন টুল এর সেটিং নিচের স্কিন সটে লক্ষ্য করুন।

এইবারের আরও একটা বৃত্ত এটার মাঝে স্থাপন করুন।

এগুলোর সব গুলো লেয়ার স্টাইল নিচের মত হবে।

সব কিছু ঠিক-ঠাক মত করতে পারলে আপনার প্রজেক্ট এর অবস্থা এমনটি হবে।

রিবন এর ওপর নিচের মত আরও একটা বৃত্ত লাগান।

এইটার লেয়ার স্টাইল নিচের মত হবে।

৪.ফাইনাল প্রজেক্ট

এটাতে নিজের মত আপনার পছন্দের ফন্ট এর যেন কোন একটা ব্যাবহার করে টেক্সটা যোগ করুন।

সর্বশেষ অবস্থা নিচের মত।

ডাউনলোড সোর্চ ফাইল

১. ব্যাকগ্রাউন্ড:

প্রথম কাজ নিচের সাইজের একটা নতুন ডকুমেন্ট্রি নিন।

Gradient Tool এর সেটিং নিচের মত করে করুন। এবং স্ক্রিন সট অনুযায়ী ড্রাগ করুন।

২. স্টাইল তৈরি:

আপনি আপনার ওয়াল পেপারের ওপর টেক্সটা যোগ করুন। দেখুন আমি যোগ করেছি Designer এবং Shibly। ফন্ট একটু চিকন টাইপের ব্যাবহার করুন। আমি Neuropol ফন্ট ব্যবহার করেছি।

এইবার এর কাজ নিচের লেয়ার স্টাইল অনুসরণ করা।

পুরোটা ঠিক ভাবে করতে পারলে আপনার প্রজেক্ট এর অবস্থা নিচের মত হবে।

৩. বাবল যোগ

এইবার Ellipse Tool এর সাহায্যে নিচের মত বাবল যোগ করুন।

এইটার স্টাইল টেক্সটা স্টাইল এর মতই হবে।

তাহলে আপনার ফাইনাল প্রডার্ক হচ্ছে নিচের মত।

হাই রেজুলেশন এ .jpg ফরমেটের ইমেজ ডাউনলোড লিংক | PSD ডাউনলোড লিংক