বেসিX: কম্পিউটারে ওয়ার্ডপ্রেস ইন্সটলেশন

ভার্ষন: ওয়ার্ডপ্রেস ৩.২.১, ৩.৩, ৩.৩.১+

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

ওয়েব ডিযাইনিং-এ CMS (Content Management System)-এর মধ্যে সবচেয়ে জনপ্রিয় হলো জুমলা। কিন্তু প্রাথমিক জ্ঞান দিয়ে যারা ওয়েব ডিযাইন করতে চান, তাদের কাছে সবচেয়ে বেশি পছন্দের ওয়ার্ডপ্রেস। যারা ইন্টারনেটে WordPress.com-এ একটা ব্লগ সাইট খুলেছেন, তারা খুব আশ্চর্য হয়ে ভাবছেন, ওয়ার্ডপ্রেস তো ব্লগ! এটা ওয়েবসাইট হবে কিভাবে? হ্যা, ব্লগের ধারণাকে একটু বদলে নিয়ে ওয়ার্ডপ্রেস দিয়ে জনপ্রিয় সব ওয়েবসাইট বানানো যায়। আর তার প্রকৃষ্ট উদাহরণ আপনারা দেখতে পাবেন WordPress.org ওয়েবসাইটে (.com নয়)।

যাহোক, কিভাবে ওয়েবসাইট ডিযাইন করা যায় ওয়ার্ডপ্রেস দিয়ে, তা আমরা কোনো এক টিউটোরিয়ালে বলার আশা রাখি, ইনশাল্লাহ। তবে শুরুতেই আপনাকে সেজন্য ওয়ার্ডপ্রেস ইন্সটল করে নিতে হবে আপনার কর্মক্ষেত্রে। এটা যেমন ইন্সটল করা যায় আপনার কম্পিউটারে, তেমনি ইন্টারনেটের সার্ভারেও। আমরা প্রথমে কম্পিউটারে ইন্সলেশন পদ্ধতিটা দেখিয়ে দিচ্ছি, তাহলে সার্ভারে ইন্সটল-প্রক্রিয়া সহজ হয়ে যাবে।

কম্পিউটারে ওয়ার্ডপ্রেস ইন্সটল করা

ধাপ ১: যেহেতু ওয়ার্ডপ্রেস দিয়ে তৈরি ওয়েবসাইটের ভিতরে পিএইচপি (PHP) এবং মাইএসকিউএল (MySQL) কোড তৈরি হয়, তাহলে বোঝাই যাচ্ছে যে, এই ওয়েবসাইটটি হবে সার্ভার-সাইডে। সেজন্য আপনার কম্পিউটারে লোকালসার্ভার তৈরি করে নিতে হবে (দেখুন: বেসিX: লোকাল সার্ভার ইন্সটলেশন)।

লোকাল সার্ভার (Wamp, Xamp) ইন্সটল হয়ে গেলে তা চালু করতে হবে। লোকাল সার্ভার চালু হলে এবার দ্বিতীয় ধাপের কাজ।

ধাপ ২: WordPress.org ওয়েবসাইট হলো ওয়ার্ডপ্রেসের অফিশিয়াল ওয়েবসাইট। এখান থেকে^ ওয়ার্ডপ্রেসের সাম্প্রতিক সংস্করণটি ডাউনলোড করে নিতে হবে। ডাউনলোড করা ফাইলটি হবে একটি কমপ্রেস্‌ড ফাইল (*.zip কিংবা *.rar)। ধরা যাক আমাদের সাম্প্রতিক সংস্করণটি হলো: wordpress-3.5 এবং ডাউনলোড করা ফাইলটা হলো wordpress-3.5.zip। এবারে কোনো একটা আন-কমপ্রেস করার সফ্‌টওয়্যার দিয়ে ফাইলটাকে আন-কমপ্রেস (আনযিপ) করতে হবে। করলে wordpress-3.5 নামক একটা ফোল্ডার পাওয়া যাবে। এই ফোল্ডারের ভিতরে wordpress নামক আরেকটা ফোল্ডার পাওয়া যাবে। এই wordpress ফোল্ডারটি কপি করে নিতে হবে, এবং কম্পিউটারের লোকাল সার্ভারে (অর্থাৎ www ফোল্ডারে…) পেস্ট করতে হবে। এবারে প্রজেক্টের খোঁজ (ট্রেস) রাখার সুবিধার্থে ফোল্ডারটাকে রিনেম করে নেয়া যেতে পারে {ঐচ্ছিক কাজ} (আমরা এখানে nanodesigns দিয়ে রিনেম করেছি)।

ধাপ ৩: আপনার ওয়ার্ডপ্রেসের যাবতীয় উপাত্তগুলো বা ডাটাগুলো সংরক্ষণের জন্য একটা ডাটাবেজ বানিয়ে নিতে হবে এপর্যায়ে। এজন্য আপনার ব্রাউযারের এ্যাড্রেসবারে টাইপ করতে হবে:

http://localhost/phpmyadmin/

তাহলে আপনি পিএইচপিমাইএ্যাডমিন-এর প্যানেলে চলে আসবেন। এখানে প্রথম পাতায়ই MySQL localhost অংশে Create new database-এ আপনার প্রোজেক্টের ডাটাবেজের নাম লিখুন। যেভাবে লিখলে আপনি পরবর্তিতে ডাটাবেজের নাম দেখে প্রোজেক্টকে চিনতে পারবেন, সেরকমই একটা নাম লিখলে ভবিষ্যতে কাজ সহজ হবে (আমরা, আমাদের প্রোজেক্টের সাথে মিলিয়ে রেখেছি nanodb), অথবা আপনার যা ইচ্ছা একটা নাম দিন। তারপর Create বোতামে ক্লিক করে ডাটাবেজ তৈরি সম্পন্ন করুন (লেখা আসবে: Database nanodb has been created.)।

ধাপ ৪: এবারে ব্রাউযারের এ্যাড্রেসবারে লিখুন: http://localhost/nanodesigns (যেহেতু আমাদের ফোল্ডারের নাম nanodesigns)।

ক. “Create a Configuration File” বোতামে ক্লিক করুন। পরবর্তি উইন্ডোতে Let’s go চাপুন।

খ. খালি ঘরগুলো পূরণ করুন:

Database name: এখানে, কিছুক্ষণ আগে যে ডাটাবেজ নাম দিয়ে ডাটাবেজ তৈরি করেছেন, এখানে সেই ডাটাবেজের নামটি লিখুন, কিংবা কপি করে পেস্ট করুন। (উদাহরণ অনুযায়ী হবে nanodb)

Username ও Password: এখানকার ইউযারনেম ও পাসওয়ার্ড আপনাকে জানতে হবে। যদি জানা না থাকে, তাহলে আপনার লোকাল সার্ভার সফ্‌টওয়্যারের ফোল্ডারে যান, তারপর Apps ফোল্ডারের ভিতরের phpmyadmin ফোল্ডারে যান। আমাদের এখানে পাথ হলো: C:\wamp\apps\phpmyadmin3.3.9। এখানে config.inc.php নামক ফাইলটি যেকোনো কোড এডিটরে খুলুন। কোড এডিটর না থাকলে Notepad দিয়েই খুলতে পারেন।

কনফিগারেশন ফাইল থেকে ডাটাবেযের ইউযারনেম ও পাসওয়ার্ড দেখে নেয়া

সেখানে user এবং password লেখাদুটো লক্ষ করুন। চিত্রে user এবং password চিহ্নিত করে দেখানো হয়েছে, যেখানে user-এর ডান পাশে লেখা দেখুন: ‘root’; অর্থাৎ আমার ডাটাবেযের ইউযার হলো root। পাসওয়ার্ড-এর পাশে লেখা: ‘’; অর্থাৎ এখানে পাসওয়ার্ড ব্ল্যাংক বা ফাঁকা রাখা হয়েছে।

তাই চিন্তা না করে আপনার ইন্সটলেশনের ইউযারনেম ও পাসওয়ার্ড ফিল্ড দুটো পূরণ করে ফেলুন। আমাদের এখানে username: root; password: । পাসওয়ার্ড যেহেতু নেই, তাই ঐ ঘরের সব লেখা মুছে দিয়ে ওটাকে ফাঁকা রাখতে হবে।

Database Host: Localhost অপরিবর্তনীয় রাখুন।

Table Prefix: ওয়ার্ডপ্রেসের পূর্ববর্তি সংস্করণগুলোতে এটা মুছে দেয়া যেত, কিন্তু ৩.৪.২’র পর থেকে এটা বাধ্যতামূলক করা হয়েছে। (টেবিল প্রিফিক্স আর কিছুই না, যেসব টেবিল ডাটাবেজে তৈরি হবে, সেগুলোর নামের আগে এই নামটি যুক্ত হবে, এই আরকি, যেমন: wp_user ইত্যাদি, যার ব্র্যান্ডিং ছাড়া কোনো ব্যবহারিক প্রয়োগ নেই।) তাই আপনার ডাটাবেযের টেবিলগুলোকে সনাক্ত করার সুবিধার্থে এখানে পছন্দনীয় কিন্তু সংক্ষিপ্ত যেকোনো প্রিফিক্স দিতে পারেন। যেমন আমরা দিলাম ndb_ (এনডিবিআন্ডারস্কোর)।

এবারে submit বোতামে চাপুন।

সব ঠিকঠাক হলে Run the install বোতামওয়ালা একটা পাতা আসবে। এই বোতামে ক্লিক করতে হবে।

ধাপ ৫: Welcome লেখা একটা স্ক্রীন আসবে, এখানে Information needed অংশে প্রয়োজনীয় তথ্যাদি দিন।

Site Title: আপনার ওয়েবসাইটের নাম লিখুন।

Username: কোন ইউযারনেম দিয়ে ওয়েবসাইট পরিচালনা করবেন। সাধারণত সবাই Admin-ই রাখে।

Password, twice: দুইবার একই পাসওয়ার্ড দিন এবং সেটা মনে রাখুন।

Your E-mail: আপনার ই-মেইল ঠিকানাটি লিখুন, পাসওয়ার্ড হারিয়ে গেলে [ইন্টারনেট সংযোগ থাকলে] এই ঠিকানায় তা পাঠিয়ে দিবে সিস্টেম।

Privacy: আপনার ওয়েবসাইটটি সবাই দেখতে পারবেন কিনা, এবং সার্চ ইঞ্জিনের কাছে দৃশ্যমান করবেন কিনা, তার সিদ্ধান্ত দিন।

Install WordPress বোতাম চাপুন।

ইন্সটলেশন সফল হলে Success পাতা দেখাবে। এবারে Login বোতামে চাপুন।

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

মনে রাখবেন, ওয়ার্ডপ্রেস দিয়ে তৈরি ওয়েবসাইটের প্রাথমিক ফ্রন্টএন্ড এবং ব্যাকএন্ডের ঠিকানাটা এরকম হয় (যা আপনার ব্রাউযারে লিখতে হয়):

http://localhost/nanodesigns (যেহেতু আমরা nanodesigns নামে প্রজেক্ট এবং ফোল্ডার রিনেম করেছিলাম)

http://localhost/nanodesigns/wp-admin কিংবা

http://localhost/nanodesigns/wp-login.php

ইন্সটল করা ওয়ার্ডপ্রেসের ওয়েবসাইট এবার কাজ করার জন্য উন্মুক্ত। তো ঘাঁটাঘাঁটি শুরু করে দিন। কোনো সমস্যা দেখা দিলে অবশ্যই আমাদের জানান। সামনের কোনো এক পর্বে আমরা ইন্টারনেট সার্ভারে কিভাবে ওয়ার্ডপ্রেস ইন্সটল করতে হয়, তা দেখার আশা রাখি, ইনশাল্লাহ।

ওয়ার্ডপ্রেস সংক্রান্ত যাবতীয় টিউটোরিয়ালে আমি কৃতজ্ঞতা স্বীকার করছি আমার শিক্ষক মোস্তাক মোহাম্মদ সামী’র। তাঁর আন্তরিক প্রচেষ্টা এবং ঐকান্তিক ইচ্ছার কোনো কমতি ছিল না আমাকে ওয়ার্ডপ্রেস শেখাতে। ঈশ্বর তাঁর মঙ্গল করুন।

-মঈনুল ইসলাম
গ্রাফিক্স ডিযাইনার ও ওয়েব ডেভেলপার
wz.islam@gmail.com

কিভাবে বাংলায় ভিডিও’র সাবটাইটেল লিখবেন?

অন্যান্য টিউটোরিয়াল

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

ইংরেজি মুভি দেখতে বসেছি, কিন্তু তবু ইংরেজিটা বুঝতে পারছি না, কারণ হলিউডের মুভি দেখতে দেখতে অ্যামেরিকান ইংরেজিতে অভ্যস্ত হয়ে পড়ায়, চিফ ব্রিটিশ ইংরেজি সহজে বুঝতে পারছি না, মুভিটার নাম: Sherlock Homes। তাই খুব সহজে গুগল করলাম প্রয়োজনীয় সহায়তার জন্য, এবং কিছুক্ষণের মধ্যে ছোট্ট একটা ফাইল নামিয়ে ভিডিও প্লেয়ারেই চলচ্চিত্রের কথাগুলো নিচে লেখা অবস্থায় দেখতে পেলাম – একে চলচ্চিত্রবিদ্যায় কী বলা হয় জানি না, তবে আমরা সাধারণ মানুষ একে ‘সাবটাইটেল’ হিসেবে জানি।

চলচ্চিত্রে দেখা যাবে বাংলা সাবটাইটেল, তৈরি করবো নিজেই

সাবটাইটেল ফাইল পরিচিতি:

সাবটাইটেল ফাইলগুলোর এক্সটেনশন হলো SRT (*.srt)। ফাইলের নাম যা ইচ্ছা হতে পারে, ভিডিও প্লেয়ারে ভিডিওটি চালু করে এসআরটি ফাইলটি লোড করে দিলেই হয়, সময় বুঝে বুঝে সে ভিডিও চলার সাথে সাথে নিচে সাবটাইটেল দেখাতে থাকবে। এই ফাইলগুলোতে শুধু লেখা বা অক্ষর থাকে বলে এগুলোর আকার হয় যথেষ্ট কম, মাত্র কয়েক কিলোবাইট।

সাবটাইটেল ফাইলের কার্যপদ্ধতি:

দেখা যাক একটা সাবটাইটেল ফাইল কিভাবে কাজ করে

CSS – tool-tip, acronym-এর দৃষ্টিনন্দন বিকল্প

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

কোনো একটা লম্বা নামকে সংক্ষিপ্ত করে লেখার দরকার হলো, এজন্য প্রত্যেকটা শব্দের প্রথম অক্ষরগুলো, মানে আদ্যক্ষর নিয়ে, আপনি সেই নামটা তৈরি করলেন, ইংরেজিতে যাকে বলে 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”। আসুন দেখা যাক কিভাবে ব্যবহার করা যায় এটা:

বেসিX: ফটোশপের ওয়ার্কস্পেস

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

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

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

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

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

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

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

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

বেসিX: লোকাল সার্ভার ইন্সটলেশন

সার্ভার-সাইড স্ক্রিপ্টিং ল্যাংগুয়েজ যেমন: পিএইচপি (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:\) একটা জায়গা করে নিবে। যার ঠিকানাটা মোটামুটি এরকম:

ওয়েব ডিযাইন রেযোল্যুশন

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

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

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

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

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

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

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

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

ডাউনলোড: ওয়েব ফুটার মেনু

ওয়েব ডিযাইনারদের সুবিধার জন্য এবার থাকছে একটি ফটোশপ ফাইল (*.psd) ডাউনলোডের ব্যবস্থা। আপনার ওয়েবসাইটের নিচে, ফুটারে, ধরা যাক আপনি কিছু মেনু বাটন রাখতে চাচ্ছেন, আর সাথে থাকবে ফেসবুক আর টুইটার ফ্যানপেজের লিংক। সেক্ষেত্রে এরকম একটি ফুটার মেনু আপনি বসাতে পারবেন ওয়েবসাইটের ফুটারে। আপনাদের কাজের সুবিধার্থে এই ডিযাইনের পুরো ফটোশপ ফাইলটা ডাউনলোড করার জন্য দেয়া হলো:

তো, আর দেরি করার কোনোই কারণ দেখি না। এখুনি লেগে যান ডিযাইনটাকে কাজে লাগানোয়। এই পোস্টে বিশেষ কৃতজ্ঞতা স্বীকার করছি আমার সিএসএস (CSS) শিক্ষক অমিত চৌধুরীর।
-মঈনুল ইসলাম
wz.islam@gmail.com

ফটোশপে সাদাকালো ছবি রঙিন করা

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

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

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

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

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

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

ফটোশপে এ্যাপল টেক্সট ইফেক্ট

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

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

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

ফটোশপে 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 করে ব্লেন্ডিং প্রয়োগ করুন। ব্যস, আপনার বার এখন প্রস্তুত। এবারে এই বারের উপর আমরা খোদাই করা লেখা লিখবো।