CSS-tooltip-how-it-works
জ্ঞানস্তর: মাধ্যমিক

কোনো একটা লম্বা নামকে সংক্ষিপ্ত করে লেখার দরকার হলো, এজন্য প্রত্যেকটা শব্দের প্রথম অক্ষরগুলো, মানে আদ্যক্ষর নিয়ে, আপনি সেই নামটা তৈরি করলেন, ইংরেজিতে যাকে বলে acronym। যেমন: Bangladesh Agricultural and Rural Development-কে সংক্ষেপে ডাকা হয় BARD বলে; এখানে BARD হলো পুরো নামটার সংক্ষিপ্তরূপ। ধরা যাক, একটা লেখা লিখছেন, যেখানে বারবার আপনি BARD-ই বলে যাচ্ছেন। কিন্তু একজন পাঠক BARD-এর মানে তো নাও জানতে পারেন। তাই এসব ক্ষেত্রে HTML-এর সহজ একটা কৌশল কাজে লাগানো হয়: <acronym> কোডটি।

কোডটার ব্যবহার:

<acronym title=“Bangladesh Agricultural and Rural Development”>BARD</acronym>

এই কোডটা ব্যবহার করলে যখনই আপনি BARD লেখাটার উপরে মাউস আনবেন, একটু অপেক্ষা করলেই সেখানে একটা হলদে বাক্সে দেখাবে BARD-এর মানে, যা আপনি acronym-এর title-এ দিয়েছেন। 

কিন্তু যারা HTML-এর acronym ব্যবহার করে একটু ক্লান্ত, তাদের জন্য রয়েছে সিএসএস (CSS)-এর অপূর্ব একটা কৌশল, যার নাম “tool-tip”। আসুন দেখা যাক কিভাবে ব্যবহার করা যায় এটা:Continue reading

ফটোশপ basiX (প্রাথমিক জ্ঞান)

ভার্ষন: ফটোশপ ৭ (এবং সমমান)

এই টিউটোরিয়ালটা যখন লিখতে শুরু করি, তখন চিন্তা করছিলাম, এর কি আসলে কোনো দরকার আছে? কিন্তু লিখতে শুরু করে বুঝতে পারলাম, এর ঢের দরকার আছে। যাহোক, আজকের টিউটোরিয়াল হলো ফটোশপের ওয়ার্কস্পেস বা কর্মক্ষেত্র সম্পর্কে সম্যক ধারণা দেয়ার একটা চেষ্টা মাত্র। এই টিউটোরিয়াল থেকে আমরা জানবো ফটোপশ চালু হলে কোন অংশকে কী বলে, আর কোন অংশটা কী জন্যইবা।

ফটোশপ ৭-এর ওয়ার্কপ্লেস পরিচিতি

স্ক্রিনশট ০১.১: ফটোশপ ৭-এর ওয়ার্কপ্লেস পরিচিতি (ছবিটা ক্লিক করে মূল রেযোল্যুশনে খুলুন)

চিত্র ১ থেকে আমরা পুরো উইন্ডো’র একটা পরিচিতি পেয়ে যাবো। নিচে সেগুলোর সংক্ষিপ্ত পরিচিতি দেয়া হলো (এগুলোর বিস্তারিত আমরা ভবিষ্যতে জানবো, ইনশাল্লাহ):

টাইটেল বার: নাম শুনেই বোঝা যাচ্ছে এখানে দেখা যাবে পরিচিতিমূলক নাম বা টাইটেল। সবচেয়ে উপরের অংশটিতেই তা থাকে। যেহেতু আমাদের সফ্‌টওয়্যারের নাম ফটোশপ, তাই এখানে টাইটেল বারে লেখা Adobe Photoshop।

মেনু বার: যেখানে File, Edit, Image ইত্যাদি মেনু থাকে, এবং তার অধীনে সাবমেনু থাকে।

টুলবার/টুলপ্যালেট: ‘প্যালেট’ বানানটা এরকম: Palette। এটা দিয়ে বোঝানো হয় চিত্রকরদের আঙ্গুল ঢুকিয়ে হাতের তালুতে ধরা একটা বোর্ড, যাতে রং লেপ্টে চিত্রকর ছবি আঁকেন। অনেকেই একে ভুল করে ‘প্লেট’ বলে, যা শুদ্ধ নয়। যাহোক, কাজ করার উপযোগী প্রয়োজনীয় সব টুলগুলো যেখানে গোছানো থাকে, তাইContinue reading

সার্ভার-সাইড স্ক্রিপ্টিং ল্যাংগুয়েজ যেমন: পিএইচপি (PHP), এএসপিডটনেট (ASP.net) ইত্যাদি দিয়ে ওয়েবসাইট তৈরি করতে গেলে প্রথমেই আপনার দরকার একটা সার্ভার। কিন্তু আপনার বাসায় ইন্টারনেট সংযোগই নেই, কিংবা আপনার নিজস্ব ডোমেইন কেনা নেই, সেক্ষেত্রে আপনি সার্ভার কোথায় পাবেন? সমাধানটা খুব সহজ: যারা পিএইচপি কোড করেন, তারা সবাই পিএইচপিতে কাজ করার জন্য নিজের কম্পিউটারের মধ্যেই একটা বানোয়াট সার্ভার বানিয়ে নেন। পিএইচপি কোড মনে করে সে সার্ভার পেয়েছে, আসলে ওটা মোটেই কোনো ইন্টারনেট সার্ভার না, ওটা কম্পিউটারের মধ্যেই একটা সার্ভারের আবহ, যা অনেকটাই ইন্টারনেট সার্ভারের মতো কাজ করে। একে বলা হয় Local Server, যা মূলত Localhost-এর অধীন হয়।

এই লোকাল সার্ভার বলতে মূলত বোঝায় অ্যাপাচি সার্ভারকে (Apache)। এছাড়াও আরো বিভিন্ন রকম সার্ভার আছে, আমরা সে আলোচনায় যাবো না। অ্যাপাচি সার্ভার ছাড়াও ডাটাবেজের জন্য বহুল পরিচিত প্রোগ্রাম হচ্ছে মাইএসকিউএল (MySQL), আর আপনার লাগবে ডাটাবেজ সংগঠন-সমন্বয়ের জন্য পিএইচপিমাইএ্যাডমিন (phpMyAdmin)। এই শব্দগুলোর আদ্যক্ষর একত্র করলে আপনি পাবেন AMP। আর এগুলো একত্রে সার্ভারে ব্যবহারের জন্য পাওয়া যায় XamppServer সফ্‌টওয়্যারটি। উইন্ডোজের (W) জন্য রয়েছে WAMP, লিনাক্সের (L) জন্য রয়েছে LAMP, ম্যাকের (M) জন্য রয়েছে MAMP। Xampp সব প্লাটফর্মে কাজ করে বলে এটা অনির্ধারিত (X) প্লাটফর্ম। ইন্টারনেট থেকে ফ্রি বা বিনামূল্যে ডাউনলোড করে নিতে পারেন এর যেকোনোটি (পরিশিষ্ট দ্রষ্টব্য)। Wamp কিংবা Xampp ইন্সটল করার সময় কোনো কিছু পরিবর্তন করার দরকার নেই, যা যেভাবে আছে, তার সাথে রাজি হয়ে আপনি তা ইন্সটল করুন। আমরা উইন্ডোজ পিসিতে WAMP ব্যবহার করতে স্বচ্ছন্দবোধ করি। উদাহরণটা তাই WAMP দিয়ে দিচ্ছি, যদিও সবগুলোরই কার্যপ্রক্রিয়া প্রায় এক। আমরা WampServer2.1e ব্যবহার করছি।

WAMP-এর পূর্বনির্ধারিত সেটিংস অনুযায়ী যদি আপনি ইন্সটল করেন, তাহলে তা আপনার কম্পিউটারের প্রাথমিক ড্রাইভে (অধিকাংশ ক্ষেত্রে C:\\) একটা জায়গা করে নিবে। যার ঠিকানাটা মোটামুটি এরকম:Continue reading

 ন্যানোডিযাইন্‌স-এর সকল পাঠক ও শুভাকাঙ্ক্ষির প্রতি শুভেচ্ছা

শুভ নববর্ষ ১৪১৯ বঙ্গাব্দ!

জ্ঞান-স্তর: প্রাথমিক

ভার্ষন: ফটোশপ (যেকোনো ভার্ষন)

একজন ওয়েব গ্রাফিক্স ডিযাইনার হিসেবে আপনাকে জানতে হবে আপনার ডিযাইনটিকে আপনি কোন আকারে বানাবেনঅর্থাৎ ডিযাইন শুরু করার জন্য ফটোশপে যে ফাইলটা নিবেন, তার width-height কত নিবেনএজন্য মনে রাখতে হবে, কম্পিউটারে, মনিটরের রেযোল্যুশন বা দৃশ্যমান অংশের আকার আপনার ডিযাইনের এই অংশকে প্রভাবিত করবে (যাদের ভেক্টর গ্রাফিক্স সম্বন্ধে ধারণা আছে, তারা এই আলোচনাকে ভেক্টরের সাথে তুলনা করে গুলিয়ে ফেলবেন না যেন)

জেনে রাখতে হবে, আমরা ফটোশপে কোনো ছবি, লেখা, আঁকিবুকি ইত্যাদি যাবতীয় কিছুকে পিক্সেল (pixels, পিক্‌যেল) দিয়ে হিসাব করিপিক্সেল জিনিসটা হলো ধরা যাক একটা ছোট্ট আকৃতির বর্গক্ষেত্রআমরা হয় dot জিনিসটা বুঝি, একটা ফোঁটাতবে আমাদের কাছে মনে হয়, ডট জিনিসটা গোলাকৃতি কিছুকিন্তু পিক্সেল জিনিসটা গোলাকৃতি না, এটা বর্গাকৃতিরচিত্র ৩.০১-এ লক্ষ করবেন, বাম দিকে একটা ছোট্ট গোলাকৃতি বৃত্ত আছেওটাকে যখন বড় করে দেখছি আমরা ফটোশপে, তখন ওটা হয়ে যাচ্ছে অনেকগুলো বিভিন্ন [কাছাকাছি] রঙের বর্গক্ষেত্রের একটা সমন্বয়

চিত্র ৩.০১: পিক্সেল ধারণা

চিত্র ৩.০১: পিক্সেল ধারণা

এভাবে কম্পিউটারের মনিটরে যেকোনো ছবি, ভিডিও, লাইন —যা কিছু আমরা দেখি, তা আসলে হাজারে হাজারে পিক্সেলের সমন্বয়ে তৈরিএবারে আপনার মনিটরের দিকে তাকান,Continue reading

জ্ঞান-স্তর: মাধ্যমিক

ভার্ষন: ফটোশপ (যেকোনো ভার্ষন)

আজকে আমরা জানবো কিভাবে একটা সাদাকালো (Grayscale) ছবিকে রঙিন করা যায়। ফটোশপে আমাদেরকে সেই সাদাকালো ছবিটাকে খুলে নিতে হবে। এবারে দেখতে হবে, ছবিটা কোন কালার মোডে আছে: RGB, নাকি Grayscale। এটা দেখার সহজ পদ্ধতি হলো যে ছবিটা খোলা হলো, তার উপরের রিবনের লেখাটা পড়া। যদি ব্যাপারটা পরিষ্কার না হয়, তাহলে এই পদ্ধতি: Image > Mode, দেখুন টিক চিহ্ন কিসে দেয়া। যদি সেটা RGB-তে হয়, তাহলে আমাদের আর কিছুই করা লাগবে না। যদি সেটা Grayscale কিংবা অন্য কোনো অপশনে থাকে, তাহলে সেটাকে RGB-তে নিয়ে আসতে RGB’র উপর একটা ক্লিক করতে হবে। এটা করতে হবে এজন্য যে, RGB মোড দিয়ে রঙিন ছবিকে বোঝানো হয়, আর, আমরা যখন একটা ছবিকে রং করবো, তখন সেখানে বিভিন্ন রং যেন দেখা যায়।

যাহোক, এবারে লেয়ার প্যালেটে (লেয়ার প্যালেট না দেখা গেলে Window > Layers) একটা নতুন লেয়ার নিতে হবে সাদাকালো ছবিটার ব্যাকগ্রাউন্ড লেয়ারটার উপরে (Shift + Ctrl + N)। এবারে লেয়ার প্যালেটে এই নতুন লেয়ারটি সিলেক্ট থাকা অবস্থায় [ছবিতে দেখানোমতে] Normal mode থেকে লেয়ারটিকে Color মোডে নিয়ে যেতে হবে। আমরা এই লেয়ারটাতে এখন যা রং দিবো, সাদাকালো ছবিটা সেই রঙে রাঙতে থাকবে।

এবারের কাজটা সম্পূর্ণ নিজের কাছে: আমরা বাস্তবে যেভাবে একটা সাদাকালো ছবিতে তুলি দিয়ে রং মেখে রঙিন করি, এখানেও ব্যাপারটা হুবহু তাই। আমরা এবারে ফটোশপের ব্রাশ টুলটা নিব (B) এবং বিভিন্ন রং দিয়ে ছবির বিভিন্ন অংশ রঙিন করতে থাকবো। আমরা ঠিক করেছি সামনের চরিত্রটিকে রং করবো। এজন্য আমরা প্রথমে জ্যাকেটটা রং করছি, আর রং হিসেবে আমরা বেছে নিয়েছে হালকা আকাশি (#5986D1)। চেহারার রং হিসেবে নিয়েছি #F0C79F। আর ইনারের স্ট্রাইপ দুটোর জন্য নিয়েছি বেগুনি (#9373EF)। এরপর বিভিন্ন আকারের ব্রাশ নিয়ে মোটামুটিভাবে রং করেছি ছবিটাকে।

মোটামুটি রং করার পর আমাদের যেমন মনে হবে, ইশ্! ওখানটায় একটু বেরিয়ে গেছে, কিংবা ওহ! দারুণ রং করে ফেলেছি তো! দুটোরই সমাধান এখন করতে হবে।Continue reading

ন্যানোডিযাইনস এখন থেকে সব সময়ই আপনাদেরকে উপহার দিবে গ্রাফিক্স ডিযাইন এবং ওয়েব ডিযাইন বিষয়ক বিভিন্ন টিপ্‌স, টিউটোরিয়াল, সম্পূর্ণ বাংলায়। প্রথম টিউটোরিয়াল হিসেবে আমরা জানবো ফটোশপে কী করে এ্যাপল টেক্সট ইফেক্ট দেয়া যায়। আপনারা যারা এ্যাপলের ওয়েবসাইট ভিযিট করেছেন, তারা ম্যানুবারের এনগ্রেভ করা বা খোদাই করা লেখাগুলো দেখে থাকবেন। ঐ ইফেক্ট ফটোশপে কিভাবে দেয়া যায় তা-ই আমরা দেখবো:

জ্ঞান-স্তর: মাধ্যমিক

ভার্ষন: ফটোশপ (যেকোনো ভার্ষন)

ফটোশপে File > New (Ctrl + N) ক্লিক করে নতুন একটি ডকুমেন্ট নিন। আমাদের মোটামুটি আকারের একটা ডকুমেন্ট হলেই কাজ চলবে, তাই আমরা Width: 400, Height: 200, Resolution: 72 pixels/inch দিয়ে RGB মোডে একটা ডকুমেন্ট নিয়েছি। এবারে টুলস প্যালেট থেকে Rectangle Tool (U) সিলেক্ট করে [Shape layers মোডে] ডকুমেন্টের সাদা জমিনে একটা আয়তক্ষেত্র আঁকবো (ছবিতে যেমনটা দেখানো হয়েছে)। এবারে নতুন যে লেয়ারটি তৈরি হয়েছে তার ডানদিকে ডাবল ক্লিক করে এই লেয়ারের স্টাইল চালু করতে হবে (লেয়ার প্যালেটের নিচে বামদিকে f লেখাটিতে ক্লিক করেও ব্লেন্ডিং অপশন চালু করা যায়) (ফটোশপ সিএস-এ লেয়ারের বাম দিকের থাম্বনেইলে ক্লিক করতে হবে)।

 ব্লেন্ডিং মোডে Gradient Overlay সিলেক্ট করতে হবে। সেখানে Gradient-এর সাদা-কালো শেডটাতে একবার ক্লিক করতে হবে। এবারে Gradient Editor-এর লম্বা বারটির বাম দিকের নিচের তীরটাতে ক্লিক করে কালার কোড হিসেবে #949494 দিয়ে OK করুন, আর ডান দিকের তীরে ক্লিক করে কালার কোড দিন #d1d1d1, OK করে বেরিয়ে আসুন। ব্লেন্ডিং মোড চালু থাকা অবস্থায় এবারে Drop Shadow অপশনে ক্লিক করুন। সেখানে Blend mode: Multiply, রং থাকবে কালো (#000000), Opacity: 20%, Use Global Light-এর টিক চিহ্ন তুলে দিয়ে Angle দিন 90 degree। এবারে Distance: 1, Spread: 0, Size:0 দিয়ে OK করে ব্লেন্ডিং প্রয়োগ করুন। ব্যস, আপনার বার এখন প্রস্তুত। এবারে এই বারের উপর আমরা খোদাই করা লেখা লিখবো।Continue reading