1. Design & Illustration
  2. Illustration

ওয়েবসাইটের জন্য লম্বা স্ক্রলিং ব্যাকগ্রাউন্ড তৈরি করবেন কিভাবে

by
Read Time:17 minsLanguages:

Bengali (বাংলা) translation by Syeda Nur-E-Royhan (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

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

এই পাঠের শেষ দিকে আপনি এই কৌশল কাজে লাগিয়ে শুধু ওয়েবসাইটের ব্যাকগ্রাউন্ড নয়, সেই সাথে যে কোন অন্য ধরণের ফ্ল্যাট স্টাইলের কম্পোজিশন বা ইলাস্ট্রেশন তৈরি করতে পারবেন। যেমন, গেমের জন্য নিরবিচ্ছিন্ন ব্যাকগ্রাউন্ড, ফ্ল্যাট স্টাইলের শহরচিত্র, এবং আরও অনেক কিছু। প্রেরণার ঝাঁপি খুলে দিতে এনভাটো মার্কেটে ঘুরে আসুন এবং এই উত্তেজনাময় প্রক্রিয়ার অংশ হতে প্রস্তুত হয়ে যান!

১। মহাজাগতিক বস্তু এবং গ্রহ তৈরি করুন

ধাপ ১

চলুন আমাদের প্রথম গ্রহটি তৈরি করে ফেলি! এলিপ্স টুল (এল) নিন এবং শিফট চেপে ধরে গাঢ় ম্যাজেন্টা রঙের ৩৬৫ x ৩৬৫ পিক্সেল সাইজের বৃত্ত তৈরি করুন।

রেক্ট্যাঙ্গল টুল (এম) নিন এবং ৪৫০ X ৩০ পিক্সেল সাইজের একটি গোলাপি ডোরা তৈরি করুন।

make a planet from circlemake a planet from circlemake a planet from circle

ধাপ ২

ডোরা দাগটি সিলেক্ট করে রাখুন, এন্টার চেপে মুভ অপশনের উইন্ডোটি ওপেন করুন। হরাইজন্টাল ভ্যালু ০ পিক্সেল এবং ভার্টিকাল ভ্যালু ৩০ পিক্সেলে সেট করুন।

আমাদের শেষ অ্যাকশনটির পুনরাবৃত্তি করার জন্য Control-D কয়েকবার চাপুন এবং সম্পূর্ণ বৃত্তটি ডোরাকাটা দাগ দিয়ে ভরে ফেলুন।

এখন অল্টারনেট ডোরাকাটা দাগগুলো সিলেক্ট করুন (পরিষ্কারভাবে বুঝানোর জন্য আমি নিচের স্ক্রিনশটে এগুলো গাঢ় রং দিয়ে চিহ্নিত করে দিয়েছি) এবং সিলেক্টেড ডোরাকাটা দাগগুলো আরও ছোট করে ফেলুন।

add more stripes with the move functionadd more stripes with the move functionadd more stripes with the move function

ধাপ ৩

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

আপনি যখন স্ট্রাইপগুলোর অবস্থান নিয়ে সন্তুষ্ট হবেন তখন ডিরেক্ট সিলেকশন টুল (এ)-এর সাহায্যে সবকিছু সিলেক্ট করুন এবং লাইভ কর্নার ফিচার ব্যবহার করে প্রতিটি কোণায় অবস্থিত ছোট্ট বৃত্ত চিহ্নিতকারীগুলোকে টেনে নিয়ে কোণাগুলোকে সম্পূর্ণ গোলাকৃতির তৈরি করুন।

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

Unite the stripes and use Live CornersUnite the stripes and use Live CornersUnite the stripes and use Live Corners

ধাপ ৪

আমাদের শেইপটি কপি করুন এবং ব্যাকে পেস্ট করুন (Control-C > Control-B)শিফট এবং বামের অ্যারো কী কয়েকবার চাপ দিয়ে নতুন শেইপটিকে কিছুটা বামে নিয়ে নিন। ডিরেক্ট সিলেকশন টুল (এ) ব্যবহার করে কয়েকটি স্ট্রাইপের দৈর্ঘ্য পরিবর্তন করুন যাতে কপি করা অংশটি একটু ভিন্ন দেখায়। উপরের কপির চাইতে নতুন শেইপটিকে একটু গাঢ় করে তৈরি করুন।

এখন চলুন দেখি শেইপ দুটিকে কিভাবে একটির সাথে আরেকটির খাপ খাওয়ানো যায়। নিচের বৃত্তটি কপি করুন (Control-C > Control-F) এবং এটিকে ফ্রন্টে নিয়ে আসুন (Shift-Control-])। সবকিছু সিলেক্ট করুন। মাউসের ডানের বাটন ক্লিক করুন এবং ক্লিপিং মাস্ক তৈরি করুন

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

make a clipping maskmake a clipping maskmake a clipping mask

ধাপ ৫

এখন চলুন আরও ছোট আকারের আরেকটি গ্রহ তৈরি করি। ১৩০ X ১৩০ পিক্সেলের একটি ফিরোজা রঙের বৃত্ত তৈরি করুন। লাইন সেগমেন্ট টুল (\) নিন এবং একটি খাটো হরাইজন্টাল স্ট্রাইপ তৈরি করার জন্য শিফট চাপুন। আপনি উপরের কন্ট্রোল প্যানেলের স্ট্রোক সেটিং থেকে অথবা স্ট্রোক প্যানেল থেকে এডিট করতে পারবেন (Window > Stroke)। গ্রহের রঙের চাইতে স্ট্রোকের রঙটি কিছুটা হালকা করে দিন। ওয়েট ২ পয়েন্টে এবং প্রোফাইলটি উইথ প্রোফাইল ১ হিসেবে সেট করুন। এতে করে স্ট্রোকগুলোর মাথা সূচালো হবে।

make another planet from a circlemake another planet from a circlemake another planet from a circle

ধাপ ৬

বিভিন্ন দৈর্ঘ্যের আরও কিছু স্ট্রাইপ যোগ করুন। বৃত্তটি ডুপ্লিকেট করুন এবং এটিকে ফ্রন্টে নিয়ে আসুন (Shift-Control-])। সবকিছু সিলেক্ট করুন এবং ক্লিপিং মাস্ক দিয়ে স্ট্রোকগুলোকে বৃত্তের আড়ালে লুকিয়ে ফেলুন।

Make Clipping Mask to hide the strokes insideMake Clipping Mask to hide the strokes insideMake Clipping Mask to hide the strokes inside

ধাপ ৭

একটা সাধারণ ৮০ X ৮০ পিক্সেলের বৃত্ত তৈরি করে চাঁদ তৈরি করুন। চাঁদটিতে গর্ত দেখানোর জন্য গাঢ় গোলাপির উপবৃত্তাকার দিয়ে ঢেকে ফেলার জন্য এলিপ্স টুল (এল) ব্যবহার করতে থাকুন। 

Create a simple moonCreate a simple moonCreate a simple moon

ধাপ ৮

এবার চলুন আমাদের সর্বশেষ গ্রহটি তৈরি করে ফেলি। এবার এটিকে আরেকটু নিখুঁতভাবে আঁকবো। ২২০ X ২২০ পিক্সেলের কমলা রঙের বৃত্ত তৈরি করার মধ্য দিয়ে শুরু করুন।

বৃত্তের আড়াআড়ি হালকা কমলা স্ট্রাইপ তৈরি করার জন্য রেক্ট্যাঙ্গল টুল (এম) ব্যবহার করুন। অলটার-শিফট চেপে ধরুন এবং নিচে টেনে নিয়ে আসুন। এতে করে একটি কপি তৈরি হয়ে প্রথম স্ট্রাইপের ডানপাশে যুক্ত হয়ে যাবে। নতুন স্ট্রাইপটি কিছুটা হালকা করুন।

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

ক্লিপিং মাস্ক ব্যবহার করে বৃত্তের ভিতরে স্ট্রাইপগুলো লুকিয়ে ফেলুন।

make a striped planetmake a striped planetmake a striped planet

ধাপ ৯

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

গ্রহটির সাথে সাথে উপবৃত্তগুলোকে সিলেক্ট করুন এবং গ্রহটিকে মূল অবজেক্ট বানানোর জন্য সেটির উপর আরেকবার ক্লিক করুন (আপনি অবজেক্টের চারপাশে আরও ঘন একটি সিলেকশন দেখতে পাবেন)। অ্যালাইন প্যানেলে চলে যান এবং হরাইজন্টাল অ্যালাইন সেন্টারে ক্লিক করে অবজেক্টগুলোকে নিখুঁতভাবে মাঝামাঝি নিয়ে আসুন।

add a ring to our striped planet and align themadd a ring to our striped planet and align themadd a ring to our striped planet and align them

দুইটি শেইপই সিলেক্ট করুন এবং প্যাথফাইন্ডারের মাইনাস ফ্রন্ট ফাংশন ব্যবহার করে উপরের উপবৃত্তটি কেটে ফেলে একটি গর্ত তৈরি করুন।

use the Minus Front function of the Pathfinder use the Minus Front function of the Pathfinder use the Minus Front function of the Pathfinder

ধাপ ১০

এখন বৃত্তাকার গ্রহের তলদেশ ডুপ্লিকেট করুন এবং ফ্রন্টে নিয়ে আসুন (Shift-Control-])। এরপর এক অবস্থান পিছনে (Control-[) পাঠিয়ে দিন। এতে করে বৃত্তটি আমাদের গ্রহটির রিঙের ঠিক নিচে যেয়ে হাজির হবে।

বৃত্ত এবং রিং দুটোই সিলেক্ট করুন এবং শেইপ বিল্ডার টুল (শিফট+এম) নিন। অলটার চেপে ধরুন এবং রঙের যেই অংশটুকু বৃত্তের উপর এসে পড়েছে সেটুকু ডিলিট করার জন্য সেখানে ক্লিক করুন। এখন আপনি দেখতেই পাচ্ছেন যে এখন আমাদের কাছে অয়েছে একটি ফাঁকা অংশ এবং বৃত্তের দুইটি অপ্রয়োজনীয় অংশ।

অপ্রয়োজনীয় অংশগুলো ডিলিট করে দিন এবং পেয়ে যাবেন আপনার কাঙ্ক্ষিত ফলাফল! আমাদের শনিগ্রহের মতো দেখতে গ্রহটি তৈরি হয়ে গিয়েছে!

use the Shape Builder Tool to edit the ringuse the Shape Builder Tool to edit the ringuse the Shape Builder Tool to edit the ring

২। মেঘগুলোকে রেন্ডার করুন

ধাপ ১

চলুন বায়ুমণ্ডলের বিভিন্ন স্তরের জন্য বিভিন্ন ধরণের মেঘ তৈরি করি।

এলিপ্স টুল (এল) দিয়ে ১০০ X ১০০ পিক্সেলের হালকা নীল রঙের বৃত্ত তৈরি করি। ডান পাশে ৫৫ X ৫৫ পিক্সেলের দ্বিতীয় আরেকটি বৃত্ত যোগ করুন। সবশেষে, বাম পাশে ভিন্ন ভিন্ন আকারের আরও কিছু বৃত্ত যোগ করুন এবং মেঘগুলোকে ফোলাফোলা করে তৈরি করুন।

make a cloud from circlesmake a cloud from circlesmake a cloud from circles

ধাপ ২

সবগুলো বৃত্ত সিলেক্ট করুন এবং ইরেজার টুল (Shift-E) নিন। অলটার চেপে ধরুন এবং মেঘের নিচের সিলেকশনের উপর দিয়ে সেটিকে মুছে ফেলার জন্য টেনে নিয়ে যান।

সবশেষে, প্যাথফাইন্ডারে সবগুলো বৃত্ত একত্রিত করুন এবং ট্রান্সপারেন্সি প্যানেলে শেইপের ওপাসিটি ৫০%-এ সেট করুন।

use the eraser tool and lower the opacityuse the eraser tool and lower the opacityuse the eraser tool and lower the opacity

ধাপ ৩

এখন আমরা একটা সুন্দর কোন পাহাড় বা চূড়াকে চিত্রিত করে এমন একটি সাধারণ পরিবেশকেন্দ্রিক উপাদান তৈরি করবো। ৯৫ X ৪১০ পিক্সেলের একটি ভার্টিকাল স্ট্রাইপ তৈরি করতে রেক্ট্যাঙ্গল টুল (এম) ব্যবহার করুন।

চলুন এখন গাঢ় নীল থেকে নীল এবং সেখান থেকে হালকা নীল থেকে লিনিয়ার গ্র্যাডিয়েন্ট দিয়ে এটিকে পূর্ণ করে ফেলি। গ্র্যাডিয়েন্ট প্যানেলে হালকা নীল স্লাইডারের ওপাসিটি ০%-এ সেট করে এটিকে স্বচ্ছ করে ফেলুন। গ্র্যাডিয়েন্টটিকে লম্বাভাবে প্রতিষ্ঠা করতে গ্র্যাডিয়েন্ট টুল (জি) ব্যবহার করুন।

ডিরেক্ট সিলেকশন টুল (এ) দিয়ে রেক্ট্যাঙ্গলটির উপরের অংশ সিলেক্ট করুন এবং এটিকে পুরোপুরিভাবে গোলাকার করতে লাইভ কর্নার ফিচার ব্যবহার করুন।

make a vertical peakmake a vertical peakmake a vertical peak

ধাপ ৪

এখন আমরা আরেকটি ভিন্ন ধরণের মেঘ তৈরি করবো।

২৫ X ২৫ পিক্সেলের একটি ফিরোজা রঙের চতুর্ভুজ তৈরি করুন। উপরে একটি ছোট চতুর্ভুজ যোগ করে প্রথমটির ডান পাশে জুড়ে দিন। এরপর দ্বিতীয়টির উপরে একটি তৃতীয় চতুর্ভুজ যোগ করে এটিকে চওড়া করে ফেলুন। প্যাথফাইন্ডারে সবগুলো স্ট্রাইপ একত্রিত করুন।

লাইভ কর্নার ফিচার ব্যবহার করে সবগুলো কোণা পুরোপুরি গোলাকৃতির করে ফেলুন।

make a cloud from rectanglesmake a cloud from rectanglesmake a cloud from rectangles

ধাপ ৫

বিভিন্ন আকারের আরও কিছু মেঘ যোগ করে দিন। ট্রান্সপারেন্সি প্যানেলে চলে যান এবং আপনার মেঘগুলোর ওপাসিটি ৫০%-এ সেট করুন।

set the Opacity of your clouds to 50set the Opacity of your clouds to 50set the Opacity of your clouds to 50

৩। ব্যাকগ্রাউন্ড তৈরি করুন এবং উপাদানগুলো বিন্যস্ত করুন

ধাপ ১

প্রথমত, চলুন আর্টবোর্ড টুল (Shift-O) ব্যবহার করে আমাদের আর্টবোর্ডের সাইজ ৮০০ X ৪৪০০ পিক্সেলে সেট করে ফেলি। আপনি এই ইন্সট্রুমেন্ট সিলেক্ট করে উপরে অবস্থিত কন্ট্রোল প্যানেলে আকৃতি সেট করতে পারবেন।

রেক্ট্যাঙ্গল টুল (এম) ব্যবহার করে ওই একই আকারের (৮০০ X ৪৪০০ পিক্সেল) একটি শেইপ তৈরি করুন এবং আর্টবোর্ডের সাথে অ্যালাইন করুন

এখন এটিকে ভার্টিকাল লিনিয়ার গ্র্যাডিয়েন্ট দিয়ে পূর্ণ করে নিচের স্ক্রিনশটের মতো করে রঙগুলো বিন্যস্ত করি: গাঢ় বেগুনী থেকে নীল এবং নিচের লাইলাক রঙে।

make a long background with linear gradientmake a long background with linear gradientmake a long background with linear gradient

ধাপ ২

চলুন উপর থেকে অবজেক্ট যোগ করা শুরু করি। ক্যানভাসের গাঢ় অংশে উপাদানগুলো একটির সাথে আরেকটি সমন্বিত করে গ্রহগুলো স্থাপন করুন। এরপর আকৃতি আর অবস্থানভেদে মেঘগুলো যোগ করা শুরু করুন।

start adding our objects from the topstart adding our objects from the topstart adding our objects from the top

ধাপ ৩

নিচে নীমে আসুন এবং আমাদের তৈরি চূড়াগুলোর মধ্য থেকে সুন্দর একটি চূড়া ব্যবহার করুন। অনেকগুলো কপি তৈরি করে এগুলোকে একেকটার পাশাপাশি ও সামনাসামনি স্থাপন করুন। এর মধ্যে কতগুলো উঁচুতে থাকবে আবার কতগুলো নিচে থাকবে। চূড়াগুলোর নিচের অংশ ব্যাকগ্রাউন্ডের সাথে সুন্দরভাবে মিশে যাবে যেহেতু আমরা এগুলোকে অর্ধ-স্বচ্ছ হিসেবে তৈরি করেছি।

form a group of peaksform a group of peaksform a group of peaks

ধাপ ৪

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

শেইপের ওপাসিটি ৫০%-এ সেট করুন এবং প্রয়োজনে শেইপটিকে অর্ধস্বচ্ছ ও বায়বীয় দেখাতে রং কিছুটা হালকা করে দিন। উপরে রং কিছুটা পরিবর্তন করে দ্বিতীয় একটি অর্ধচন্দ্র যোগ করে দিন।

add semi-transparent shapesadd semi-transparent shapesadd semi-transparent shapes

ধাপ ৫

আমাদের ব্যাকগ্রাউন্ডের নিচের অংশ খালি রয়ে গেছে। চলুন এটিকে নতুন সব উপাদান দিয়ে ভরিয়ে ফেলি। একটি ঘন বন আর ভূমি তৈরি করে ফেলি।

এলিপ্স টুল (এল) ব্যবহার করে বিভিন্ন আকৃতির এক গুচ্ছ বৃত্ত তৈরি করে একটির উপর আরেকটি স্থাপন করুন।  প্যাথফাইন্ডারে সবগুলো বৃত্ত একত্রিত করুন এবং নিচের লাইলাক এবং উপরের নীল রং থেকে ভার্টিকাল লিনিয়ার গ্র্যাডিয়েন্ট দিয়ে মিলিয়ে ফেলা শেইপটি পূর্ণ করুন।

make tree crowns from circlesmake tree crowns from circlesmake tree crowns from circles

ধাপ ৬

এখন আমরা গাছের গুঁড়িগুলোর আকৃতি তৈরি করবো। গুঁড়ির জন্য ৭৫ X ১১৮০ পিক্সেলের সঙ্কীর্ণ খাঁড়া শেইপ তৈরি করতে রেক্ট্যাঙ্গল টুল (এম) ব্যবহার করুন। শেইপটি গাঢ় বেগুনী রং দিয়ে ভরে ফেলুন যাতে উপরের হালকা রঙের ব্যাকগ্রাউন্ডের সাথে একটি বৈপরীত্য তৈরি হয়। ডিরেক্ট সিলেকশন টুল (এ) নিন এবং উপরের বামের অ্যাংকর পয়েন্ট সিলেক্ট করুন। মুভ অপশনস উইন্ডো ওপেন করতে এন্টার চাপুন এবং হরাইজন্টাল ভ্যালু ২০ পিক্সেলে এবং ভার্টিকাল ভ্যালু ০ পিক্সেলে সেট করুন। OK ক্লিক করুন। এভাবে পয়েন্টটিকে ২০ পিক্সেল ডানে সরিয়ে নিয়ে যান। ডানের অ্যাংকর পয়েন্টের জন্য বিপরীতমুখী একই পদ্ধতি কাজে লাগান।

চলুন আমাদের গাছগুলোতে কিছু সরল শাখা-প্রশাখা যুক্ত করে দেই। আর্ক টুল দিয়ে কাজ শুরু করুন (আপনি এটি লাইন সেগমেন্ট টুলের (\) একই ড্রপ ডাউন মেন্যুতে পাবেন)।  একটি বাঁকানো রেখা তৈরি করুন এবং গুঁড়িতে যে গাঢ় বেগুনী রঙের ছোপ ব্যবহার করা হয়েছে ঠিক সেই রঙে স্ট্রোকের রং সেট করুন (আই ড্রপার টুল (আই) ব্যবহার করুন এবং শিফট চেপে ধরে রং বাছাই করুন)। স্ট্রোক প্যানেলে চলে যান এবং ওয়েট ভ্যালু ২০ পয়েন্টে সেট করুন। ক্যাপ অ্যান্ড কর্নার মাঝামাঝি অবস্থানে নিয়ে আসুন যাতে শাখা-প্রশাখার আগাগুলো গোলাকার হয়।

make a tree trunk from rectanglemake a tree trunk from rectanglemake a tree trunk from rectangle

ধাপ ৭

আমাদের তৈরি গাছের গুঁড়িগুলো ডুপ্লিকেট করুন এবং কম্পোজিশনটিতে ভিন্নতা আনতে শাখা-প্রশাখাগুলোর অবস্থান পরিবর্তন করে দিন। Control-[ চেপে ঝোপঝাড়ময় গাছের মাথার নিচে গুঁড়িগুলো স্থাপন করুন।

এখন চলুন গাছের গুঁড়িগুলোতে কিছু ডাইমেনশন যোগ করি। আরেক গুচ্ছ বৃত্ত তৈরি করুন। এগুলোকে বেগুনী রং দিয়ে পূর্ণ করুন (গাছের গুঁড়িগুলোর থেকে হালকা রঙের)। প্যাথফাইন্ডার প্যানেলে বৃত্তগুলো একত্রিত করুন এবং শেইপটিকে গুঁড়ির নিচে পিছনে পাঠিয়ে দিতে কয়েকবার Control-[ চাপুন।

attach the trunks to the tree crownattach the trunks to the tree crownattach the trunks to the tree crown

ধাপ ৮

গাছের গুঁড়ির আরও কতগুলো হালকা রঙের কপি তৈরি করুন। এই কপিগুলোকে সবচাইতে গাঢ় রঙের গুঁড়িগুলোর নিচে স্থাপন করুন। এতে করে এক ধরণের অবাস্তব ইফেক্ট তৈরি হবে এবং আমাদের বনে ঘনত্ব আসবে।

গুঁড়ির নিচে নীলচে বেগুনী ঝোপ যোগ করে দিন। গাছের মাথা যেভাবে তৈরি করেছি ঠিক সেই উপায়ে বৃত্ত থেকে এগুলো তৈরি করুন।

add more tree trunksadd more tree trunksadd more tree trunks

ধাপ ৯

এখন আমাদের কম্পোজিশনের নিচের অংশ গঠন করার জন্য ভূমি যোগ করে দেই। রেক্ট্যাঙ্গল টুল (এম) ব্যবহার করে ৮০০ পিক্সেল চওড়া একটি শেইপ তৈরি করুন (আমাদের আর্টবোর্ডের সমান চওড়া হতে হবে)। অন্যথায়, আপনি ব্যাকগ্রাউন্ড রেক্ট্যাঙ্গলটি ডুপ্লিকেট করতে পারেন। এটিকে উপরে সরিয়ে নিয়ে যেয়ে ছোট করে ফেলুন। এটির দৈর্ঘ্যও কমিয়ে দিন। পিছনের গাছের গুঁড়িগুলোর মতোই একই লাইলাক রং দিয়ে পূর্ণ করুন যাতে করে শেইপগুলো দৃশ্যত একটি আরেকটির সাথে মিশে যায়।

এখন কার্ভেচার টুল (Shift-‘) নিন এবং ভূমির উপরের কিনারার অর্ধেকের বাম পাশটা নিচে টেনে নিয়ে এটিকে বাঁকিয়ে ফেলুন।  বিপরীতার্ধের উপরের কিনারা টেনে ধরে একটি মসৃণ ঢেউ তৈরি করে ফেলুন।

shape the ground and use the curvature toolshape the ground and use the curvature toolshape the ground and use the curvature tool

ধাপ ১০

ভূমির আরেকটি স্তর যোগ করুন। মাঝের গাছগুলোর গুঁড়ির জন্য আমরা যেই বেগুনী রং ব্যবহার করেছি সেটি দিয়েই এটিকে পূর্ণ করুন। এতে শেইপগুলো মিলে যাবে। কার্ভেচার টুল (Shift-‘) ব্যবহার করে শেইপ টিকে বাঁকিয়ে নিন।

সবচাইতে গাঢ় স্তরটি উপরে যুক্ত করে বাঁকিয়ে ভূমির কাজ শেষ করুন। এটিতে আরেকটু টেক্সচার আনতে এলিপ্স টুল (এল) ব্যবহার করে ভূমিতে ছোট ছোট উপবৃত্ত ছড়িয়ে ছিটিয়ে দিন। 

add layers of the ground and speckle the oval stonesadd layers of the ground and speckle the oval stonesadd layers of the ground and speckle the oval stones

ধাপ ১১

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

লম্বা ব্যাকগ্রাউন্ডের চতুর্ভুজটিকে ডুপ্লিকেট (Control-C > Control-F) করুন এবং ফ্রন্টে নিয়ে আসুন (Shift-Control-])। এখন সবকিছু সিলেক্ট করুন, মাউসের ডান বাটন ক্লিক করুন, এবং ক্লিপিং মাস্ক তৈরি করুন। সাবাস! এখন সবগুলো অবজেক্ট একটি বড় ক্লিপিং মাস্কের ভিতর লুকানো থাকবে।

আপনার কাজের গতি আরও দ্রুত, সহজ এবং সুবিধাজনক করতে হবে আমাদের অবজেক্টগুলোকে বিভিন্ন দলে একত্রিত করতে হবে (এক গুচ্ছ গ্রহ, এক গুচ্ছ মেঘ, চূড়া, গাছ, ইত্যাদি) এবং প্রতিটি দলের জন্য আলাদা ক্লিপিং মাস্ক ব্যবহার করতে হবে।

use Clipping Masksuse Clipping Masksuse Clipping Masks

ধাপ ১২

আপনি চাইলে ব্যাকগ্রাউন্ডটিকে আরও নিখুঁত এবং সূক্ষ্ম করতে চাইলে মাস্কের ভিতর আরও উপাদান যোগ করতে পারেন। যেমন, আমি কিছু তারা যোগ করে দিয়েছি। এতে ব্যাকগ্রাউন্ডের উপরে একটা গভীরতা সৃষ্টি হয়েছে।

 continue adding the elements inside the mask continue adding the elements inside the mask continue adding the elements inside the mask

৪। আপনার ব্যাকগ্রাউন্ডে মূল কিছু চরিত্র বা চলমান উপাদান এঁকে ফেলুন

ধাপ ১

আমাদের ব্যাকগ্রাউন্ড যেহেতু তৈরি হয়ে গিয়েছে কাজেই চলুন এমন কিছু অবজেক্ট তৈরি করি যেগুলো স্ক্রল করার সময় ব্যাকগ্রাউন্ডের সাথে সাথে পুরোটা জুড়েই থাকবে। এগুলো ব্যাকগ্রাউন্ডের উপর থেকে নিচ পর্যন্ত চলাচলের সময় একে একে মূল উপাদান হিসেবে কাজ করবে।

আমরা একটি উড়ন্ত সসার এঁকে শুরু করবো। এলিপ্স টুল (এল) ব্যবহার করে ২০০ X ২০০ পিক্সেলের ফিরোজা রঙের একটি বৃত্ত তৈরি করুন। ম্যাজেন্টা রঙের একটি আনুভূমিক উপবৃত্ত তৈরি করুন এবং Control-[ চেপে এটিকে ব্যাকওয়ার্ডে পাঠিয়ে দিন

লাইন সেগমেন্ট টুল (\) ব্যবহার করুন এবং বৃত্তের আড়াআড়ি আনুভূমিক ডোরাকাটা রেখা তৈরি করতে শিফট চেপে ধরুন। বৃত্ত এবং রেখা দুটোই সিলেক্ট করুন এবং বৃত্তটিকে বিভক্ত করার জন্য প্যাথফাইন্ডারের ডিভাইড ফাংশনটি ব্যবহার করুন। নিচের অর্ধাংশ সিলেক্ট করুন এবং সসারের নিচে ব্যাকে পাঠিয়ে দিন (Shift-Control-[)

make a flying saucer from ellipsesmake a flying saucer from ellipsesmake a flying saucer from ellipses

ধাপ ২

কার্ভেচার টুল (Shift-‘) ব্যবহার করে উপরের বৃত্তের নিচের কিনারা বাঁকা করুন। এতে এটি কিছুটা ঢেউ খেলানো দেখাবে।

এখন চলুন আমাদের ইউএফওটিতে কিছু ডাইমেনশন যোগ করি এবং বাড়তি কিছু খুঁটিনাটি যোগ করে এটিকে সুসজ্জিত করে ফেলি। ম্যাজেন্টা রঙের উপবৃত্তটিকে কপি করুন এবং ব্যাকে পেস্ট করুন (Control-C > Control-B)। নিচের কপিটিকে একটু গাঢ় করুন এবং এর নিচের অংশ সিলেকশন টুল (ভি) ব্যবহার করে নিচে টেনে নিয়ে যান। এতে করে শেইপটিকে কিছুটা বড় মনে হবে।

ফিরোজা রঙের বৃত্তটির নিচের অর্ধাংশ ডুপ্লিকেট করুন (Control-C > Control-B) এবং উপরের কপিটির নিচের কিনারা উপরে টেনে ধরে একটু সংকুচিত করে ফেলুন। নিচের কপিটি হলুদ রং দিয়ে পূর্ণ করুন যাতে করে একটা মৃদু আবহ আসে।

এলিপ্স টুল (এল) ব্যবহার করে সসারের কিনারা দিয়ে এক গুচ্ছ হলুদ লাইট বাল্ব তৈরি করুন।

add details to the sauceradd details to the sauceradd details to the saucer

ধাপ ৩

আমাদের ইউএফওটির কাঁচের পৃষ্ঠতলে চকচকে প্রতিমূর্তি তৈরি করে এটি তৈরির কাজ শেষ করি। ফিরোজা রঙের বৃত্তের উপরের অর্ধাংশ কপি করুন এবং ফ্রন্টে দুইবার পেস্ট করুন (Control-C > Control-F > Control-F)। আপনার কীবোর্ডের ডান দিকের অ্যারো চিহ্ন ব্যবহার করে উপরের কপিটি কিছুটা ডানে সরিয়ে আনুন।

উপরের কপি এবং তার নিচেরটি সিলেক্ট করুন এবং শেইপগুলো কাটার জন্য প্যাথফাইন্ডারের মাইনাস ফ্রন্টে ক্লিক করুন। এতে করে ইউএফওর বাম কিনারায় একটা নতুন চাঁদের মতো চিকন ডোরাকাটা দাগ থেকে যাবে। হাইলাইট তৈরি করার জন্য নতুন তৈরি হওয়া শেইপটি হালকা ফিরোজা রং দিয়ে পূর্ণ করুন। আপনি চাইলে উপরে ওই একই রঙের একটি ছোট বৃত্ত তৈরি করতে পারেন। এর ফলে ইউএফওটিকে সম্পূর্ণভাবে তৈরি করা হয়ে যাবে।

add a reflection to the UFOadd a reflection to the UFOadd a reflection to the UFO

ধাপ ৪

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

এলিপ্স টুল (এল) ব্যবহার করে একটি ৫০ X ৫০ পিক্সেলের হালকা নীল বৃত্ত তৈরি করুন। চোখের জন্য গাঢ় নীল রঙের উপবৃত্ত তৈরি করুন। চোখটিকে সিলেক্ট করে রেখে রিফ্লেক্ট টুল (ও) ডাবল ক্লিক করুন এবং উলম্ব অর্ধবৃত্তের উপরে শেইপটিকে উল্টে দিন। দ্বিতীয় চোখ তৈরি করার জন্য কপিতে ক্লিক করুন।

৭৫ X ৭৫ পিক্সেল আকারের একটি বড় ম্যাজেন্টা রঙের বৃত্ত তৈরি করুন এবং ভিনগ্রহের প্রাণীটির মাথার ঠিক নিচে স্থাপন করুন।

make aliens head from circlemake aliens head from circlemake aliens head from circle

ধাপ ৫

১০০ X ৩৩০ পিক্সেল আকারের ফিরোজা রঙের শেইপ তৈরি করার জন্য রেক্ট্যাঙ্গল টুল (এম) ব্যবহার করুন এবং ভিনগ্রহের প্রাণীটির মাথার নিচে স্থাপন করুন। ডিরেক্ট সিলেকশন টুল (এ) দিয়ে শেইপের নিচের অ্যাংকর পয়েন্ট সিলেক্ট করুন এবং শেইপের নিচের অংশটুকু পুরোপুরি গোলাকার করতে লাইভ কর্নারস ফিচার ব্যবহার করুন।

ফিরোজা রঙের শেইপের উপরে দুইটি উলম্ব চিকন ডোরাকাটা রেখা যোগ করুন এবং শেইপগুলোকে কাটার জন্য প্যাথফাইন্ডারের মাইনাস ফ্রন্ট ফাংশন ব্যবহার করুন।

add a rectangle and use minus front functionadd a rectangle and use minus front functionadd a rectangle and use minus front function

ধাপ ৬

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

শেইপগুলোকে সিলেক্ট করে রেখে Object > Path > Offset Path-এ চলে যান এবং অফসেট ভ্যালু ৫ পিক্সেলে সেট করুন। ফলে একটি বড় শেইপ তৈরি হবে।

ভিতরের শেইপটিতে ডাইমেনশন যোগ করে কিছুটা হালকা করুন।

shape the tips of the cometshape the tips of the cometshape the tips of the comet

ধাপ ৭

ডিরেক্ট সিলেকশন টুল (এ) ব্যবহার করে গাঢ় এবং হালকা ডোরাকাটা রেখাগুলোর উচ্চতায় ভিন্নতা নিয়ে আসুন।

finish up with the cometfinish up with the cometfinish up with the comet

ধাপ ৮

এখন চলুন ভিনগ্রহের প্রাণীটি মাটিতে পা ফেলার পর তার সম্পূর্ণ দেহ চিত্রিত করি। আমরা এটির মাথা ব্যবহার করে সেখানে কিছু উপাদান যোগ করে দিবো। রেক্ট্যাঙ্গল টুল (এম) ব্যবহার করে মাথার আড়াআড়ি একটি ৬.৫ X ৮৫ পিক্সেলের হালকা নীল রঙের শেইপ তৈরি করুন। উপরে একটি ছোট ১৫ X ১৫ পিক্সেল আকারের বৃত্ত যোগ করুন।

add a neck from rectangleadd a neck from rectangleadd a neck from rectangle

ধাপ ৯

এখন আমরা ৭০ X ১৪০ পিক্সেল আকারের একটি চতুর্ভুজ দিয়ে দেহের আকার তৈরি করবো। চতুর্ভুজের উপরে দুইটি পাতলা উলম্ব ডোরাকাটা রেখা যোগ করুন এবং সেগুলোকে কাটার জন্য প্যাথফাইন্ডারের মাইনাস ফ্রন্ট ফাংশন ব্যবহার করুন। এর ফলে দুইটি লম্বা চিকন বাহু তৈরি হয়ে যাবে।

ডিরেক্ট সিলেকশন টুল (এ) ব্যবহার করে বাহুগুলোর নিচের অ্যাংকর পয়েন্ট উপরে সরিয়ে নিন। ফলে সেগুলো দেহের চাইতে ছোট হবে।

shape the body and arms from rectanglesshape the body and arms from rectanglesshape the body and arms from rectangles

ধাপ ১০

দেহের উপরে আরেকটি চতুর্ভুজ যোগ করুন এবং আমাদের এই প্রাণীটির পায়ের আঁকার তৈরির জন্য মাইনাস ফ্রন্ট ব্যবহার করে এটিকে কেটে ফেলুন।

ডিরেক্ট সিলেকশন টুল (এ) ব্যবহার করুন এবং প্রতিটা চতুর্ভুজাকৃতির কোণা সম্পূর্ণ বা আংশিক গোলাকার করতে লাইভ কর্নার ফিচার ব্যবহার করুন।

shape the legs and make the body roundedshape the legs and make the body roundedshape the legs and make the body rounded

ধাপ ১১

এখন ভিনগ্রহের প্রাণীটির দেহ সিলেক্ট করে ৫ পিক্সেল অফসেট ভ্যালু দিয়ে Object > Path > Offset Path ব্যবহার করে দেহের চারপাশে আরও বড় একটি শেইপ তৈরি করুন।  মাথার চারপাশের বৃত্তের মতো ম্যাজেন্টা গোলাপি রং দিয়ে এটিকে পূর্ণ করুন।

make offset path around the alienmake offset path around the alienmake offset path around the alien

ধাপ ১২

ব্যাকগ্রাউন্ডের একদম কেন্দ্রে মূল উপাদানগুলো স্থাপন করে এটি তৈরি করা শেষ করুন। উপরের ইউএফও দিয়ে শুরু করে মাটিতে ভিনগ্রহের প্রাণী দিয়ে শেষ করবেন। ব্যাস হয়ে গেলো!

place the elements on the backgroundplace the elements on the backgroundplace the elements on the background

চমৎকার! আমাদের লম্বা স্ক্রলিং ফ্ল্যাট ব্যাকগ্রাউন্ড তৈরি করা শেষ!

দারুণ কাজ দেখিয়েছেন! আমরা আমাদের টিউটোরিয়ালের একদম শেষে পৌঁছে গিয়েছি এবং একটি ভারসাম্যপূর্ণ কম্পোজিশন তইর করার জন্য বিভিন্ন উপাদান তৈরি করে সেগুলোকে সামঞ্জস্যপূর্ণভাবে সাজিয়ে এই চমৎকার প্রক্রিয়াটি সম্পন্ন করে ফেলেছি! আমাদের কাজের গতি দ্রুত এবং সুবিধাজনক করার জন্য মৌলিক জ্যামিতিক আকৃতি রূপান্তর করা এবং অ্যাডোবি ইলাস্ট্রেটরের বিভিন্ন ফাংশন ব্যবহার করা শিখে গিয়েছি!

আমাদের ভবিষ্যতের যে কোন প্রজেক্টেও এই কৌশলগুলো কাজে লাগাতে পারবো। নিরবিচ্ছিন্ন ফ্ল্যাট ব্যাকগ্রাউন্ড তৈরি, নিখুঁত কম্পোজিশন এবং ফ্ল্যাট স্টাইলের দৃশ্য, ল্যান্ডস্কেপ, সিটিস্কেপ এবং আরও অনেক কিছু তৈরি করতে পারবো।

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

Long Scrolling Flat Background is FinishedLong Scrolling Flat Background is FinishedLong Scrolling Flat Background is Finished
One subscription.
Unlimited Downloads.
Get unlimited downloads