Graphical Visual element (Line, Shapes, texture, Form & Space) in Bangla । ভিজুয়েল ইলিমেন্ট( লাইন, সেইপ, টেক্সার,ফর্ম এবং স্পেস)

Graphical Visual Element

(Line, Shapes, texture, Form & Space)

What is a Graphical Visual Element?

আমরা জানি গ্রাফিক্স ডিজাইন কে বাস্তব রূপ দেওয়ার জন্য কিছু ভিজুয়াল এলিমেন্ট ব্যবহার করতে হয় । আর এ ভিজুয়াল এলিমেন্ট গুলো হল:

1. Line
2. Shapes
3. Texture
4. Form
5. Space
6. Color
7. Typography

এ সবগুলোকে একসাথে বলে Graphical Visual Element.

আজকে আমরা শুধু

1. Line
2. Shapes
3. texture
4. Form
5. Space

সম্পর্কে জানবো।

For Add

01. Visual Element 'Line'

প্রফেশনাল গ্রাফিক্স ডিজাইন এর কাজ করতে হলে যে ডিজাইন টি করবো অবশ্যই সেই ডিজাইনে ব্যবহৃত প্রত্যেকটি Element ব্যবহারের কারণ এবং ব্যাখ্যা থাকতে হবে। আজকে আমরা ডিজাইনে 'লাইন' ব্যবহারের কারণ এবং ব্যাখ্যা জানবো ।

How Can We Use 'Line'?

ডিজাইনে লাইন ব্যবহার করার ৫ টি কারণ রয়েছে।

সেগুলো হল:

1. Divide
2. Connect
3. Branch
4. Decoration
5. Move.

01. Divide: ডিজাইনে লাইন ব্যবহার করার একটি কারণ হল ডিভাইড করা অর্থাৎ আলাদা করা। ডিজাইনে ব্যবহৃত একটি Object থেকে অন্য একটি Object আলাদা বুঝাতে বা একটি যাতে আরেকটির সাথে মিশে না যায় তাই লাইন ব্যবহার করা হয়। নিচের ছবিটি থেকে আমরা বিষয়টি ভালোভাবে বুঝব।

পত্রিকা তে আমরা দেখেতে পেলাম যে একটি কলাম থেকে অন্য একটি কলাম আলাদা করে বুঝাতে লাইন ব্যবহার করা হয়েছে।

02. Connect: ডিজাইনে লাইন ব্যবহার করার আরো একটি কারণ হল Connect করা অর্থৎ সমজাতীয় Object গুলোকে একসাথে কানেকশন বা সংযুক্ত করতে লাইন ব্যবহৃত হয়।

বিষয়টি আমরা একটি উদাহরণ এর মাধ্যমে শিখব।

ডিজাইনটি তে আমরা দেখেতে পেলাম যে, ১ থেকে ৩ পর্যন্ত Object গুলো পরস্পর সংযুক্ত ।

আর বিষটি পরিষ্কার ভাবে বুঝাতে একটি লাইন ব্যবহার করা হয়েছে।

03. Branch: একটি বিষয়ের অনেকগুলো শাখা বুঝাতে লাইন ব্যবহৃত হয় অথবা, একটি বিষয়ের একাধিক বিষয়ের সাথে সম্পর্কযুক্ত বুঝাতে লাইন ব্যবহার করা হয়ে থাকে। বিষয়টি আমার উদাহরণ এর মাধ্যমে শিখবো।

উপরে প্রদশীত ডিজাইন দুটি তে আমরা দেখেতে পেলাম যে, ১ টি বস্তুর একাধিক শাখা বুঝাতে লাইন ব্যবহৃত হয়। আবার একটি জিনিস আরো অনেক গুলো জিনিসের সাথে সম্পকীত সেটা বুঝাতে লাইন ব্যবহার করা হয়েছে।

04. Decoration: ডিজাইনের সৌন্দর্য বৃদ্ধি করতে লাইন ব্যবহৃত হয়। লাইন কে ব্যবহার করে অনেক সুন্দর সুন্দর ডিজাইন তৈরি করা যায়। যেমন: মন্ডালা ডিজাইন।

  

লাইন দিয়ে তৈরি করা একটি মান্ডালা ডিজাইন।

05. Move: আমার জানি গ্রাফিক্স ডিজাইন একটি ক্রিয়েটিব পেশা। গ্রাফিক্স ডিজাইনাররা ক্রিয়েটিভ ভাবে তাদের ডিজাইন ব্যবহার কারীর কাছে উপস্থাপন করে। নিজের ইচ্ছে মত ব্যবহার কারীর মেধা কে Move করানো যায় । আর বেশিরভাগ Move করা হয় লাইন দিয়ে। বিষটি আমার একটি উদাহরণ এর মাধ্যমে পরিষ্কার ভাবে বুঝবো।

চিত্রটির ভালোভাবে খেয়াল করুন।

আপনি কি A, E, B, C, F, D,G,H,J আকারে পড়েছেন নাকি A, F, G আকারে পড়েছেন।

নিশ্চই A, F, G আকারে পড়েছেন। কারণ আমি চাইছি আপনি A, F, G আকারে পড়বেন। তাই আপনাকে বাধ্য করেছি A, F, G আকারে পড়ার জন্য । আর এ কাজ টা করেছি একটি লাইন দিয়ে।

For Add

02. Visual Element Shape

Shape ২ প্রকার।

১/ Geometric Shape

২/ Organic Shape

১/ Geometric Shape: যেসব Shape গুলো জিওমেট্রিক্যাল রুলস ফলো করে তৈরি করা হয় সেসব Shape গুলোকে Geometric Shape বলে। অর্থাৎ জ্যামিতিক Shape গুলোকে Geometric Shape বলে। যেমন: ত্রিভুজ ,চতুর্ভুজ, ইত্যাদি। নিচে Geometric Shape এর একটি চিত্র দেওয়া হল।

২/ Organic Shape: যে Shape গুলো কোন রুলস ফলো করে তৈরি হয় না। অর্থৎ প্রকৃত Shape গুলো কেই Organic Shape বলে। নিচে কিছু অর্গানিক সেইপ এর চিত্র দেওয়া হল।

Geometric Shape ছাড়া অন্য সকল সেইপ কে Organic Shape বলে।

How to Visualize 'Shapes'?

Shape কে ৩ ভাবে বাস্তবিক রূপদান করা যায়।

যথা:

১/ Outline Mode

২/ Fill Mode

৩/ Negative Shape Mode

১/ Outline Mode: আউটলাইন মোড মানে ভেতরে কোন কালার ব্যবহার না করে শুধু বর্ডারে কালার দিয়ে বাস্তবে রূপদান করাকে Outline Mode বলে।

২/ Fill Mode: ফিল মোড মানে ভেতরে কালার ব্যবহার করে বাস্তবে রূপদান করাকে Fill Mode বলে।

দুটি বিষয় একটি উদাহরণ এর মাধ্যমে বোঝা যাক।

৩/ Negative Shape Mode: নেগেটিভ Shape মোড শুধু ফিল বা স্টোক ব্যবহার না করে ছায়ার মতো করে Shape তৈরি করাকে Negative Shape Mode বলে। এটি এমনভাবে তৈরি করা হয়, দেখে মনে হবে এটি তৈরি করা হয়নি কিন্তু আকৃতিগত কারণে সেটা একটা Shape তৈরি হয়ে গেছে। বিষয়টি আমরা একটি উদাহরণ এর মাধ্যমে বুঝবো:

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

For Add

03. Visual Element 'Texture'

Texture:  দুই প্রকার 

যথা:

১/ Image Texture

২/ Pattern Texture

১/ Image Texture: Natural Texture গুলোকে বলা হয় Image Texture বলা হয়। Image Texture প্রকৃতির আলোকে তৈরি করা হয়ে থাকে। Image Texture এর আরেকটি শাখা হল Surface Texture.

উপরে প্রদশীত ছবি টিতে আমার দেখতে পেলাম একটি Wood এর Texture. এটি একটি Image Texture যেটি প্রাকৃতিক Wood এর মতো করেই তৈরি করা হয়েছে।

২/ Pattern Texture: যে Texture গুলো প্যাটার্ন তৈরির মাধ্যমে কাস্টমাইজ করে তৈরি হয় তাকে Pattern Texture বলে।

উপরের ছবির Texture গুলো হল Pattern Texture। করণ এগুলো প্যাটার্ন তৈরির মাধ্যমে কাস্টমাইজ করে তৈরি করা হয়েছে।

04. Visual Element 'FORM'

আমাদেরকে যদি 2D Interface  এ যদি  3D Object  এ রূপান্তর করতে বললে তা করা সম্ভব নয়।

তবে Color, Sade, Sadow, etc  ইত্যাদিরে মাধ্যমে এ 3D  Fill  টা আনা যায়। 

আর এ প্রক্রিয়াকেই বলে  Form বলে।  চলুন আরো কিছু উদারহণ এর মাধ্যমে বিষটা বুঝা যাক।

উপরে চিত্রে দেখানো হয়েছে কিভাবে একটি নরমাল ডিজাইন কে কিভাবে 3D এর মতো করা যায়।

কিন্তু আমরা এটি 2D Interface এ দেখতে পারছি।  যে প্রক্রিয়ায় এটাকে 3D এর মতো উপস্থাপন করা হয়ে তাকেই  Form  বলে।

For Add

05. Visual Element 'SPACE'

ডিজাইনেরে অনেক গুরুত্বপূর্ণ একটি ইলিমেন্ট হল Space

Space কে ৩ভাগে ভাগ করা যায়। 

যথা:

১/ White Space

২/ Negative Space

৩/ Depth or 3D Space

১/ White Space:  ডিজাইনে পর্যাপ্ত জায়গা খালি রাখাকে White Space বলে । অর্থাৎ ডিজাইনে অনেক গুলো টেক্স এবং সেইপ থাকে , একটি টেক্স থেকে অন্য একটি টেক্স বা একটি সেইপ থেকে অন্য একটি সেইপ পর্যাপ্ত জায়গা খালি রেখে ডিজাইজ করা যাতে ইউজার সহজে ধরতে এবং পড়তে পারে । এ পর্যাপ্ত জায়গা খালি রাখাকে White Space বলে। বিষটি একটি উদারহণ এর মাধ্যমে বোঝা যাক।

উপরে  চিত্রে গুগল এর ইন্টারফেইস  ডিজাইনের ছবি দেওয়া হল। ইউজাররা যাতে সহজে গুগল ব্যবহার করতে পারে এ জন্য পর্যাপ্ত ফাকা রাখা হয়েছে।  এই যে ফাকা রাখা হয়েছে তাকেই বলে White Space.

২/ Negative Space:   নেগেটিভ স্পেস নেগেটিভ সেইপ এর মতোই।  এটি এমনভাবে তৈরি করা হয়, যাতে মনে হবে এটি এমনিতেই Shadow এর মাধ্যমে আকৃতি তৈরি হয়েছে।  বিষয়টি একটি উদাহরণ এর মাধ্যমে বোঝা যাক।

উপরে ছবির দিকে খেয়াল করুন। দুটি প্রাণীটির  গঠনই এমন যে এটার বাহিরে একটা নারী ও একটা পুরুষের  ছবি ভেসে উঠছে। এটা এমনভাবে তৈরি করা হয়েছে, মনে হচ্ছে এটি আলাদা তৈরি করা হয়নি। এটা নিজে নিজেই হয়েছে।  এটাকেই বলে Negative Space.

৩/ Depth or 3D Space

Depth:   Depth মানে হল গভীর। Depth এর মাধ্যমে কোন ডিজাইন কে এমনভাবে তৈরি করা হয় মনে হবে এটা অনেক গভীর বা অনেক দূর পর্যন্ত ডিজাইনের গভীরতা বা দূরত রয়েছে , কিন্তু বাস্তবে এটি অল্প জায়গার মধ্যে একটি ইলিউশন করা হয়েছে। ।

এ বিষয়টি এমনেতে অসম্ভব মনে হতে পারে, কিন্তু করা যায় । আর এ প্রক্রিয়াকে  Depth বলে। বিষয়টি একটি উদারহণ এর মাধ্যমে বোঝা যাক:

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

For Add

3D Space:   Space , কালার, Shadow  ব্যবহার করে অর্থাৎ Form এর মাধ্যমে 2D Interface  এ  3D Object এর মতো Shape তৈরি করাকে 3D Space বলে। বিষয়টি একটি উদারহণ এর মাধ্যমে বোঝা যাক।

চিত্রটির দিগে খেয়াল করুন। বোতল এবং গ্লাস গুলো দেখতে মনে হেচ্ছে দাড়িয়ে আছে। কিন্তু প্রকৃত পক্ষে এটি একটি 2D Interface  এই যে  2D  দেখতে 3D মতো লাগছে এই রকম ইলিউশন তৈরি কারাকেই 3D Space আশাকরি বুঝতে পেরেছেন। 

সর্বশেষ আপডেট: ১৭ আগস্ট ২০২৩

তথ্য সূত্র:

1. Dnezel এর Freepik Zero To Hero (Advanced Graphic Design Course)

2. Youtube

3. Google

লেখক ও গবেষক

--------------

মোঃ ইউসুফ

প্রফেশনাল গ্রাফিক্স ডিজাইনার
(মোশন গ্রাফিক্স ডিজাইনার)

Contact and Follow

E-mail: [email protected]
Facebook: https://www.facebook.com/mdyousuffb2
Twitter: https://twitter.com/mdyousuffb

Linkedin: https://www.linkedin.com/in/mdyousuffb/
Behance: https://www.behance.net/mdyousuffb
Dribbble: https://dribbble.com/mdyousuffb
Instagram: https://www.instagram.com/mdyousuffb/

যে কোন সমস্যায় গ্রুপে পোস্ট করুণ: FBITSchool

পেইজে মেসেজ দিতে পারেন: FBITSchool