দীর্ঘ-রূপের সামগ্রীতে চিত্রগুলির সাথে সৃজনশীল হওয়া

আপনি যখন নিবন্ধ, কেস স্টাডি বা প্রতিবেদনগুলির মতো-দীর্ঘ-রূপের সামগ্রীতে চিত্রগুলি স্থাপন করার চিত্র চিত্রিত করেন-স্ট্যান্ডার্ড পদ্ধতির পাঠ্যগুলির ব্লকগুলি ভাঙা, ইনলাইন আয়তক্ষেত্রগুলি। কার্যকরী? নিশ্চিত। অনুপ্রেরণামূলক? খুব কমই

এত দীর্ঘ-রূপের নিবন্ধগুলি কেন দৃশ্যত সমতল মনে হয়? গল্পের অংশের চেয়ে চিত্রগুলি কেন প্রায়শই বোল্ট মনে হয়? এবং কীভাবে এটি ব্যস্ততা, বোধগম্যতা বা সুরকে প্রভাবিত করে?

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

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

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

প্রথমত, একটি দীর্ঘ-দীর্ঘ-ফর্ম পুনরুদ্ধার।

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

তবে একবার আমি একটি গ্রিড প্রতিষ্ঠা করলে, মাঝে মাঝে এটি ভাঙা মূল বিষয়বস্তুর দিকে দৃষ্টি আকর্ষণ করার, ব্যক্তিত্ব যুক্ত করার এবং লেআউটগুলিকে সূত্রগত বা সমতল অনুভূতি থেকে রোধ করার একটি শক্তিশালী উপায় হতে পারে।

উদাহরণস্বরূপ, দীর্ঘ-রূপের সামগ্রীতে, আমি আরও বেশি নৈমিত্তিক, শক্তিশালী অনুভূতি তৈরি করতে চিত্রগুলি মার্জিনে টেনে আনতে পারি বা এগুলি প্রান্তিককরণের বাইরে নিয়ে যেতে পারি। আমি নেতিবাচক মার্জিন মানগুলি ব্যবহার করে কোনও চিত্রের ইনলাইন আকারটি তার কলামের বাইরে প্রসারিত করতে পারি:

figure {
  inline-size: 120%;
  margin-inline-start: -10%; 
  margin-inline-end: -10%;
}

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

পাঠ্য প্রস্থ বা পূর্ণ-রক্তাক্ত

একবার আমরা দীর্ঘ-রূপের সামগ্রীতে চিত্রগুলি সম্পর্কে সৃজনশীলভাবে চিন্তাভাবনা শুরু করার পরে, একটি প্রশ্ন সাধারণত মনে আসে: এই চিত্রগুলি কতটা প্রশস্ত হওয়া উচিত?

তারা কি পাঠ্য কলামের প্রান্তগুলি নিয়ে ফ্লাশ করা উচিত?

img {
  inline-size: 100%;
  max-inline-size: 100%;
}

বা পৃষ্ঠার পুরো প্রস্থ পূরণ করতে প্রসারিত?

figure {
  inline-size: 100vw;
  margin-inline-start: 50%;
  transform: translateX(-50%);
}

উভয় পদ্ধতির বৈধ, তবে তারা কীভাবে বিভিন্ন উদ্দেশ্যে কাজ করে তা বোঝা গুরুত্বপূর্ণ।

বই এবং সংবাদপত্রের লেআউটগুলি tradition তিহ্যগতভাবে চিত্রগুলির প্রবাহকে শক্তিশালী করে চিত্রগুলি পাঠ্য কলামে সীমাবদ্ধ রাখে। অন্যদিকে, ম্যাগাজিনগুলি নিয়মিতভাবে নাটকীয় প্রভাবের জন্য পূর্ণ-রক্তাক্ত চিত্র সহ গ্রিডটি ভেঙে দেয়।

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

ভিউপোর্টের সম্পূর্ণ প্রস্থ পূরণ করতে সামগ্রী কলামের বাইরে চিত্রগুলি প্রসারিত করা তাত্ক্ষণিক প্রভাব তৈরি করে। এই মুহুর্তগুলি নাটকীয় বিরতির মতো কাজ করে – তারা উদ্দেশ্যমূলকভাবে পড়ার ছন্দটি ভেঙে দেয়, মনোযোগ পুনরায় সেট করে এবং শব্দ থেকে ভিজ্যুয়ালগুলিতে ফোকাসকে স্থানান্তর করে। এটি বলেছিল, এই চিত্রগুলি সর্বদা একটি উদ্দেশ্য পরিবেশন করা উচিত। যদি তারা অতিরিক্ত ব্যবহার করা হয় বা ফিলারের মতো বোধ করে তবে তারা তাদের প্রভাব দ্রুত হারাবে।

একাধিক চিত্রের জন্য একটি মডুলার গ্রিড ব্যবহার করে

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

চিত্রগুলি উল্লম্বভাবে স্ট্যাক করার পরিবর্তে, আমি প্লেসমেন্ট এবং স্কেলের উপর সুনির্দিষ্ট নিয়ন্ত্রণের সাথে একটি সম্মিলিত ব্যবস্থা তৈরি করতে একটি মডুলার গ্রিড ব্যবহার করতে পারি। একটি মডুলার গ্রিড কি? এটি পুনরাবৃত্ত ইউনিটগুলি থেকে নির্মিত একটি কাঠামো – সাধারণত স্কোয়ার বা আয়তক্ষেত্রগুলি – বিভিন্ন সামগ্রীতে অর্ডার আনার জন্য অনুভূমিকভাবে এবং উল্লম্বভাবে সাজানো। আমি একক মডিউলগুলির মধ্যে পৃথক চিত্র রাখতে পারি, বা বৃহত্তর, আরও কার্যকর অঞ্চল তৈরি করতে একাধিক মডিউল স্প্যান করতে পারি।

figure {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

figure > *:nth-child(1) {
  grid-column: 1 / -1;
}

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

সিএসএস আকার এবং অভিব্যক্তিপূর্ণ সম্ভাবনা

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

কিন্তু যখন বিষয়টি কেটে ফেলা হয় বা একটি অনিয়মিত রূপরেখা থাকে তখন সেই আয়তক্ষেত্রাকার মোড়কটি বিশ্রী বোধ করতে পারে।

সিএসএস আকারগুলি আমি যে কোনও কাস্টম আকৃতির চারপাশে মোড়ানো পাঠানোর অনুমতি দিয়ে সেই সমস্যাটিকে সমাধান করে। একটি আকারের চারপাশে পাঠ্য প্রবাহিত করা কেবল আলংকারিক নয় – এটি শক্তি যুক্ত করে এবং পৃষ্ঠাটিকে প্রাণবন্ত বোধ করে। ব্যবহার shape-outside পড়ার অভিজ্ঞতা প্রভাবিত করে। এটি মানুষকে কিছুটা কমিয়ে দেয়, ভিজ্যুয়াল ছন্দ তৈরি করে এবং নিয়মিত পাঠ্য ব্লকের অবিচলিত মার্চের সাথে বিপরীত যোগ করে। এটি পাঠ্য এবং চিত্রকে আরও ঘনিষ্ঠ সম্পর্কের মধ্যে নিয়ে আসে, এগুলি বিচ্ছিন্ন উপাদানগুলির চেয়ে ভাগ করে নেওয়া রচনার অংশ অনুভব করে।

সর্বাধিক shape-outside ব্যাখ্যাগুলি চেনাশোনা বা উপবৃত্তগুলির সাথে শুরু হয় তবে আমি মনে করি সেগুলি আরও কিছু অভিব্যক্তিপূর্ণ দিয়ে শুরু করা উচিত: কোনও চিত্রের আলফা চ্যানেলের চারপাশে পাঠ্য মোড়ানো।

img {
  float: left;
  width: 300px;
  height: auto;
  shape-outside: url('patty.webp');
  shape-image-threshold: .5;
  shape-margin: 1rem;
}

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

একটি নকশায় ক্যাপশন সংহতকরণ

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

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

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

figure {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

figure img {
  grid-column: 1 / 6;
}

figcaption {
  grid-column: 6;
}

অথবা এটি ছবির অংশটি নিজেই ওভারল্যাপ করতে দিন:

figure {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

figure img {
  grid-column: 1 / 6;
  grid-row: 1;
}

figcaption {
  grid-column: 5 / -1;
  grid-row: 1;
}

ক্যাপশনগুলি চিত্র এবং পাঠ্যকে সংযুক্ত করে। ভাল সম্পন্ন, তারা উন্নত করার পাশাপাশি ব্যাখ্যা করতে পারে। তাদের প্রচলিত দেখতে হবে না; আপনি টান কোট বা পাশের নোটগুলির মতো দেখতে তাদের স্টাইল করতে পারেন।

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

হোয়াইটস্পেসের শক্তি

এখন অবধি, আমি নিজেরাই চিত্রগুলিতে মনোনিবেশ করেছি – কীভাবে তারা ক্যাপশনযুক্ত, অবস্থানযুক্ত এবং আকারের। তবে অন্য কিছু আছে যা ঠিক তেমন গুরুত্বপূর্ণ: স্থান আশেপাশে তাদের।

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

চিত্রগুলি গোষ্ঠীভুক্ত করার সময় কঠোর ব্যবধান কার্যকর হয় তবে এটি উত্তেজনাও তৈরি করে। বিপরীতে, উদার মার্জিন একটি চিত্র আরও শ্বাসকষ্ট দেয়।

figure {
  margin-block: 3rem;
}

কোনও কবিতায় লাইন বিরতি বা কথোপকথনে বিরতি দেওয়ার মতো, হোয়াইটস্পেস জিনিসগুলিকে ধীর করে দেয় এবং পড়ার সময় মানুষকে প্রাকৃতিক মুহুর্তগুলিকে বিরতি দেয়।

উপসংহার

দীর্ঘ-ফর্ম সামগ্রীতে চিত্রগুলি কেবল চিত্র নয়। তারা কী পড়ছে তা লোকেরা কীভাবে অনুভব করে – তারা কীভাবে এটির মধ্য দিয়ে চলেছে, এটি কেমন অনুভূত হয় এবং কী মনে রাখে তা তারা আকার দেয়। ডিফল্ট আয়তক্ষেত্রের বাইরে চিন্তা করে, আমরা ছন্দ, ব্যক্তিত্ব এবং এমনকি বিস্ময়ের মুহুর্তগুলি তৈরি করতে চিত্রগুলি ব্যবহার করতে পারি।

এটি গ্রিডটি ভাঙার মাধ্যমে, ইনলাইন ওভার ইনলাইন বেছে নেওয়া, পাঠ্য মোড়ানো বা খেলাধুলার ক্যাপশনগুলি ডিজাইন করে, এটি ইচ্ছাকৃত হওয়ার বিষয়ে। সুতরাং পরের বার আপনি একটি দীর্ঘ নিবন্ধ স্থাপন করছেন, অবাক হবেন না, “আমি কোথায় একটি ছবি রাখতে পারি?“জিজ্ঞাসা করুন,”এই চিত্রটি কীভাবে কারও অভিজ্ঞতাকে আকার দিতে সহায়তা করতে পারে?“